Front-End-Engineering Part 2

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:

Flexbox: To-Do App

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

In the file above I placed notes on the sections for set-up
Also be careful the spec sheet has the wrong picture on Myrtle Ave Tea

This is some code to help with the style.css set up

On the css once you get the Header section and the Mission section done you should have a good idea how to finish the rest of the web page
The most difficult part was making sure the Flexbox coding for each section was done right for when you Horizontally change the window size the material does not pile up on itself

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

Nav Bar CSS

Mission Container 1 CSS

Tea of the Month Container 2 CSS

Location Container 3 CSS

Footer Container 4 CSS

My Website Example of the project

Spend some time looking at it and the Horizontal re-sizing

Tea Cozy

Week 2

LESSON 9 Projects Part 2

Use the videos to check your work as you go. Remember it is your Learning!!!

Website Examples:

PupSpa

CSS Grid: Task Board

Tsunami Coffee

Video Walk Through

PupSpa Walkthrough

CSS Grid: TaskBoard Walkthrough

Tsunami Coffee Walkthrough

Week 3

De-bug Fotomatic Website

Download Broken code copy here.

Download the Spec Sheet.

This will download a zipped copy of the website to your downloads
You will need to make a folder on your desktop and transfer the files from the download section to your created desktop file

This is the project solution of the website.

Try not to peek at the solution code until you’ve completed this part of the project, or unless you’re really stuck, and your struggle has become totally unproductive. Looking at the code before that moment will deprive you of an important learning opportunity and will make it harder for you to achieve your ultimate outcome.
The solution also has a few things that does not follow the spec sheet, so it is easy for me to tell if you just jumped to the solution and copied it.

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.

It needs to be readable on computer, tablet, & phone
(Lap-top1400px, Tablet-LS-1200px,Tablet-850px,Phone-600px)
Both Challenges give you examples and some direction
They also provide some resources for putting one together

Have fun with it this is the start of a portfolio of your work

My Website Example of the project

Mr. Horvath Website

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

Kelvin Weather Walkthrough

Dog Years Walkthrough

Magic Eight Ball Walkthrough

Race Day Walkthrough

Week 5

LESSON 10 Projects Part 2