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.
In order to help set you up for success you are required to do the following before you attempt to plan out your project:
The previous cohorts project 1 retrospective
There are alot of helpful hints and hindsight that were captured after the completion of project 1 which are sure to help provide some guidance on what to and not to do during this project.
Mastering Markdown - 34min
You will need to write and update markdown for this project as will be the case for all future projects so it's your responsibility to become familiar with the syntax.
Your work must:
- Use semantic markup for HTML and CSS, adhering to best practices.
- Use CSS GRID and Flexbox.
- Must be mobile mobile first, then tablet and desktop responsive.
- Must implement javascript to extend functionality by implementing 1 of the following
- AJAX requests
- Animations
- Javascript logic
- jQuery interactions
- Be deployed and accessible online via Github Pages.
- An About, Projects and Contact page.
- Site must be created using a "mobile first" approach.
- A Git repository, hosted on your personal GitHub, that includes a link to your hosted site. Site url should be in the form of githubusername.github.io.
- Repo must contain frequent commits (min 15+) dating back to the beginning of the project.
- An updated project worksheet with all sections filled out accordingly.
- An in-class demo of the site that shows off the interactions you worked on.
Check out portfoliios that look awesome and emulate the parts that speak to you. Here are some that we like but you should google around and find stuff you're into.
Search and compare at least 3 profile web sites. Record your findings in the table below and include some aspect of the site that you would like to incorporate into your own site.
Here is a sample of what that reserach will look like:
| Link To Site | One Thing I'd Like To Incorporate |
|---|---|
| http://www.denisechandler.com/ | initial animation\drawing on page load |
| jkeohan.com | mouseover on a project triggers animations |
| http://mattfarley.ca/ | layout of the projects |
- 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.
Try exploring these css libraries:
If you're looking for an extra challenge, try tackling some of the tasks below:
- Add a contact us form that submits to Google Sheets or Firebase
- Add a skills section featuring skills you have/will have learned in the class.
- Add a image carousel
- Add a theme changer or dark/light mode
- Show the weather of your visitor using a 3rd party API