Chase Williams

About Me

My professional life has been somewhat varied in the relatively few years that I have been in the workforce, as many people do I started out in retail as a cart pusher, while I attempted to complete a diploma course in Business Management, eventually worked my way into a supervisory role but I had to find a way to make more money than retail could possibly offer me. So I jumped off the post-secondary train to join the trades, passing through hydro-vac swamper, welding shop laborer, drilling rig floorhand, shipper/receiver, warehouse picker, and the industrial painting and coating industry for nearly a decade.

All through these jobs though I had a solid interest in computers, networks, and pretty much anything technical, so just over a year ago from writing this page I began the task of learning to program. The first language I dabbled in was Python3 I wrote a few small programs including a Discord bot and began to work on a text-based computer game which is still in the early stages. I then fell into the rabbit hole that is web design and development and its associated database and server infrastructure, where I built a few web pages as projects.

I eventually plan to choose the computing discipline that I most enjoy and build my career into that field utilizing all the various experiences I have had in my varied work history to bring outside the box thinking to any project or team that I am a part of. I feel as though all the jobs I have had helped to develop me into a person with a strong work ethic, a don't give up attitude, and an ability to look at problems critically and find the best solution given the available data.

Personal Projects

freeCodeCamp

Responsive Web Design Projects

Tribute Page

Visit the project

Required User Stories

  • User Story #1:My tribute page should have an element with a corresponding id="main", which contains all other elements.
  • User Story #2: I should see an element with a corresponding id="title", which contains a string (i.e. text) that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug").
  • User Story #3: I should see a div element with a corresponding id="img-div".
  • User Story #4: Within the img-div element, I should see an img element with a corresponding id="image".
  • User Story #5: Within the img-div element, I should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in img-div.
  • User Story #6: I should see an element with a corresponding id="tribute-info", which contains textual content describing the subject of the tribute page.
  • User Story #7: I should see an a element with a corresponding id="tribute-link", which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to _blank in order for your link to open in a new tab (i.e. target="_blank").
  • User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.
  • User Story #9: The img element should be centered within its parent element.

Survey Form

Visit the project

Required User Stories

  • User Story #1: I can see a title with id="title" in H1 sized text.
  • User Story #2: I can see a short explanation with id="description" in P sized text.
  • User Story #3: I can see a form with id="survey-form".
  • User Story #4: Inside the form element, I am required to enter my name in a field with id="name".
  • User Story #5: Inside the form element, I am required to enter an email in a field with id="email".
  • User Story #6: If I enter an email that is not formatted correctly, I will see an HTML5 validation error.
  • User Story #7: Inside the form, I can enter a number in a field with id="number".
  • User Story #8: If I enter non-numbers in the number input, I will see an HTML5 validation error.
  • User Story #9: If I enter numbers outside the range of the number input, which are defined by the min and max attributes, I will see an HTML5 validation error.
  • User Story #10: For the name, email, and number input fields inside the form I can see corresponding labels that describe the purpose of each field with the following ids: id="name-label", id="email-label", and id="number-label".
  • User Story #11: For the name, email, and number input fields, I can see placeholder text that gives me a description or instructions for each field.
  • User Story #12: Inside the form element, I can select an option from a dropdown that has a corresponding id="dropdown".
  • User Story #13: Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the name attribute.
  • User Story #14: Inside the form element, I can select several fields from a series of checkboxes, each of which must have a value attribute.
  • User Story #15: Inside the form element, I am presented with a textarea at the end for additional comments.
  • User Story #16: Inside the form element, I am presented with a button with id="submit" to submit all my inputs.

Product Landing Page

Visit the project

Required User Stories

  • User Story #1: My product landing page should have a header element with a corresponding id="header".
  • User Story #2: I can see an image within the header element with a corresponding id="header-img". A company logo would make a good image here.
  • User Story #3: Within the #header element I can see a nav element with a corresponding id="nav-bar".
  • User Story #4: I can see at least three clickable elements inside the nav element, each with the class nav-link.
  • User Story #5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.
  • User Story #6: I can watch an embedded product video with id="video".
  • User Story #7: My landing page has a form element with a corresponding id="form".
  • User Story #8: Within the form, there is an input field with id="email" where I can enter an email address.
  • User Story #9: The #email input field should have placeholder text to let the user know what the field is for.
  • User Story #10: The #email input field uses HTML5 validation to confirm that the entered text is an email address.
  • User Story #11: Within the form, there is a submit input with a corresponding id="submit".
  • User Story #12: When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit).
  • User Story #13: The navbar should always be at the top of the viewport.
  • User Story #14: My product landing page should have at least one media query.
  • User Story #15: My product landing page should utilize CSS flexbox at least once.

Technical Documentation Page

Visit the project

Required User Stories

  • User Story #1: I can see a main element with a corresponding id="main-doc", which contains the page's main content (technical documentation).
  • User Story #2: Within the #main-doc element, I can see several section elements, each with a class of main-section. There should be a minimum of 5.
  • User Story #3: The first element within each .main-section should be a header element which contains text that describes the topic of that section.
  • User Story #4: Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding id="JavaScript_and_Java").
  • User Story #5: The .main-section elements should contain at least 10 p elements total (not each).
  • User Story #6: The .main-section elements should contain at least 5 code elements total (not each).
  • User Story #7: The .main-section elements should contain at least 5 li items total (not each).
  • User Story #8: I can see a nav element with a corresponding id="navbar".
  • User Story #9: The navbar element should contain one header element which contains text that describes the topic of the technical documentation.
  • User Story #10: Additionally, the navbar should contain link (a) elements with the class of nav-link. There should be one for every element with the class main-section.
  • User Story #11: The header element in the navbar must come before any link (a) elements in the navbar.
  • User Story #12: Each element with the class of nav-link should contain text that corresponds to the header text within each section (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world").
  • User Story #13: When I click on a navbar element, the page should navigate to the corresponding section of the main-doc element (e.g. If I click on a nav-link element that contains the text "Hello world", the page navigates to a section element that has that id and contains the corresponding header.
  • User Story #14: On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user.
  • User Story #15: My Technical Documentation page should use at least one media query.

External Profiles

GitHub Profile

LinkedIn Profile

freeCodeCamp.org Profile