Option #2 for the Unit 1 Project is to build an About Me website.

This project will give you a chance to use the skills we've learned in class to create a site that highlights the skills and projects you'll be working on in WDI. You'll get a chance to use JavaScript to tackle interactions such as an image slider, a responsive hamburger menu, and quotes that fade in and out on a timer.

Make sure to customize the design and content of the website to make it your own.

You will be working individually for this project, but we'll be guiding you throughout the process and helping as you go.

Your work must:

• Use semantic markup for HTML and CSS, adhering to best practices.
• Use Flexbox to create a multi-column layout.
• Be completely responsive.
• Include separate HTML/CSS /JavaScript files.
• Stick with the KISS (Keep It Simple Stupid) and DRY (Don't Repeat Yourself) principles.
• Use JavaScript or jQuery for DOM manipulation.
• Be deployed and accessible online. (Research and use GitHub Pages)
• Contain no "dead" code
• Your code must pass our validators with flying colors

• A working site, built by you, hosted somewhere on the internet.

• A Git repository, hosted on GitHub, that includes a link to your hosted site and frequent commits dating back to the beginning of the project.

• Any pseudo code you created. Either have it in the .js file, or in a separate file

• A README.md file with explanations of:

  • Technologies used.
  • Your process/approach.
  • Unsolved problems.
  • Your biggest wins and challenges.

• Screenshots of the snippets of code you used to solve particularly interesting problems (think code highlights).

• An in-class demo of the site that shows off the interactions you worked on.

• A carousel whose images slide to the side on a timer, along with indicators that the user can click to navigate to a particular project.

  

• Functionality that allows a carousel image to enlarge in a lightbox when the user clicks on it. Clicking anywhere on the screen when the lightbox is open should close the lightbox.

  

• Nav bar functionality that allows the page to scroll smoothly to the correspending section when a nav item is clicked.

  

• Nav bar functionality that highlights a nav item when the user scrolls to the corresponding section of the page.

  

• A testimonials section in which testimonials rotate in and out on a timer.

  

• A mobile nav that expands and collapses when a user clicks on the hamburger icon.

  

• Remember that you should customize the design of the site and make it your own. Here's a guideline for what the site could look like:

No starter code has been provided for this project, as you will be building your site from scratch. As an option, you can use the HTML5 Boilerplate as a template to get started.

• Don't hesitate to write throwaway code to solve short-term problems.
• Read the documentation for whatever technologies you use. Most of the time — but not always — there is a tutorial you can follow, and learning to read documentation is crucial to your success as a developer.
• Write pseudocode before you write any JavaScript code. Planning out and thinking through interactions for a website is an important step that will save you time and effort when you start actually coding.
• Do not simply copy and paste code that you find online! It is OK (and highly encouraged) to use resources like Stack Overflow when thinking through interactions, but use these sites as a guide and then write the code on your own.

If you're looking for an extra challenge, try tackling some of the tasks below:

• Add validation to the contact form to make sure the user has filled out all required fields before submitting.
• Add a skills section featuring skills you have/will have learned in the class.
• Add functionality so that the carousel works with swiping on an iPad/iPhone.
• Utilize an API.

• HTML/CSS

  • Codecademy — Learn HTML/CSS
  • Practice CSS Selectors with CSS Diner
  • Flexbox Froggy

• JavaScript

  • Eloquent JavaScript Textbook
  • 30 Days to Learn jQuery
  • JavaScript Timers
  • Codecademy — Learn JavaScript

Based on the requirements above, you can earn a maximum of 24 points on this project. Your instructors will score each of your technical requirements using the scale below:

This will serve as a helpful overall gauge of whether or not you've met the project goals. It can also help you identify where to focus your efforts for the next project!

Based on the requirements above, you can earn a maximum of 24 points on this project. Your instructors will score each of your technical requirements using the scale below: