For Grading or Front-End-Engineering explanations see Part 1 section
Week 1
LESSON 9 Projects Part 1
Use the videos to check your work as you go. Remember it is your Learning!!!
Website Examples:
Tea Cozy Off:Platform – see Instructions and file help in lower post
Video Walk Through
Flexbox: To-Do App Walkthrough
Tea Cozy
This is some code to help with the index.html set up
This is some code to help with the style.css set up
The past project I used the most to help set-up:
In Lesson 7 Links and Buttons: The Summit
In Lesson 9 for the Mission & Location Container: Flexbox: To-Do App
On this project I would ask me to print you off a copy of the spec sheet.
Help files for when you get stuck – Only use when you are Stuck
Tea of the Month Container 2 CSS
My Website Example of the project
Spend some time looking at it and the Horizontal re-sizing
Week 2
LESSON 9 Projects Part 2
Use the videos to check your work as you go. Remember it is your Learning!!!
Website Examples:
Video Walk Through
CSS Grid: TaskBoard Walkthrough
Week 3
De-bug Fotomatic Website
Download Broken code copy here.
Download the Spec Sheet.
This is the project solution of the website.
Have fun with it and do not spend forever on it.
My Website Example of the project
My copy of Fotomatic complete
Challenge – Start a Website
The next 2 sections are challenging you to make a company or a club website.
I would go back to Code.org and find the website you created in projects in Computer Programming II – Use this for the content and take all the pages and place them together like my example with navigation to different parts of the page. Use your new skills and information below to update and create a better layout for a better website.
I only want you to make a single page website of your choice using information from lesson 9 making the website responsive to sizing.
Have fun with it this is the start of a portfolio of your work
My Website Example of the project
Week 4
LESSON 10 Projects Part 1
Use the videos to check your work as you go. Remember it is your Learning!!!
In these sections I will provide screen shots of the final code if you get stuck. All of these can be made into HTML files and run on google, however output is in console log which you cannot see. If you would like to see one, ask me and I will show you Sleep Debt Calculator
JavaScript Screen Shots of the code:
Video Walk Through
Week 5
LESSON 10 Projects Part 2
Use the videos to check your work as you go. Remember it is your Learning!!!
In these sections I will provide screen shots of the final code if you get stuck. All of these can be made into HTML files and run on google, however output is in console log which you cannot see. If you would like to see one, ask me and I will show you Sleep Debt Calculator
JavaScript Screen Shots of the code:
Video Walk Through
Rock, Paper, or Scissors Walkthrough
Sleep Debt Calculator Walkthrough
Week 6
LESSON 11 Projects Part 1
Use the videos to check your work as you go. Remember it is your Learning!!!
JavaScript Screen Shots of the code:
Video Walkthrough