Cheney Middle School

Skip to main content
Mobile Menu
Please Create A Marquee

Front-End Engineering Part 1

Grading:

At middle school level my classes are what we call an exploratory class. All of my classes as an exploratory class will be a “NO” fail class. I only ask that students are always trying to work at the best of their abilities. All though your student can not fail my class, a lack of effort or trying can result in a “NG” No Grade in my class. I reserve this system for students that after many communications and tries to get them to participate in the class, that they do not give work effort. Moving on to the next programming class will require satisfactory completion of this class.

 

Front-End Engineer Career Path

What you will be learning in this Career Path.

Welcome to the Front-End Engineer Career Path! If you want to make beautiful, interactive websites, start a new career, or improve your skills, you’ve come to the right place. This path starts from the very basics so you don’t need to know anything to start. We’ll give you everything you need to know to apply for an entry-level job in front-end engineering: from languages like HTML, CSS, and JavaScript, to frameworks like React and Redux, to interview skills, like whiteboarding and data structures.

 

After this Path, you will be able to:

 

  • Build static websites with HTML and CSS
  • Make your websites interactive with JavaScript
  • Apply basic design theory to your webpages
  • Use the command line
  • Manage versions of your code with Git
  • Collaborate with teammates on GitHub
  • Build web apps with React and Redux
  • Test React applications with Jest and Enzyme
  • Deploy React applications with Netlify
  • Apply SEO tactics to improve your site’s popularity
  • Ace the engineering interview

 

You will demonstrate your knowledge in several Portfolio Projects that exist throughout the Path. You can complete the Portfolio Projects either in parallel with or after taking the prerequisite content—it’s up to you!

 

Currently this series will be broken up into 5 parts - with each part being about 8 weeks long in content and some may need more some may need less - This is the layout below of Part 1

 

Week 1

 

Lesson 1-3 info

Overall, you want to on the first day get to section 3 which will take most of your time, so do not get caught up too much on 1 and 2

Introduction to Front-End Engineer Career Path

  • In this section just skim over the documentation and answer a few questions when needed – Look to bottom right and click “Next” when done examining information
  • 3 Sections

Overview of Web Development

  • In this section just skim over the documentation and answer a few questions when needed – Look to bottom right and click “Next” when done examining information
  • There are a couple of Videos explaining Front-End

Fundamentals of HTML - This section will take most of your time

  • This section is where you will start some programming with HTML – I will post a short video on how their programming sections work if I do not get a chance to personally go over it with you

 

Week 2

 

LESSON 3 Projects 

Website Examples:

Fashion Blog

Wine Festival Schedule

New York City

Video Walk Throughs:

Fashion Blog Video Walkthrough

Wine Festival Schedule Walkthrough

New York City Blog Walkthrough

 

Week 3

 

LESSON 4 Projects

Website Examples:

Healthy Recipes

Olivia Woodruff Portfolio

The Box Model: Davie’s Burgers

Broadway

Video Walk Throughs:

Healthy Recipes Walkthrough

Olivia Woodruff Portfolio Walkthrough

The Box Model: Davie’s Burgers Walkthrough

Broadway Walkthrough

 

Week 4

 

Lesson 5 info.

Text Editors

  • You will learn about text editors there is a video that explains them and “Visual Studio Code” – However for a Text Editor we will use Sublime Text Editor

 

Building a Project Local on the computer

  • It has a video on how to us “Visual Studio Code” to build a project locally
  • When we go to do the 1 project in this section, I will have posted instructions and will help you
  • They will also give you the basic HTML file set up and some CSS code to start projects locally – (I would suggest when you do the Project in this section coming back to these articles to help you start your project) – You could as you go through it paste it in a google doc or word doc to keep it for later.

 

DevTools

  • They do have a video that goes over development tools in google, safari, edge & firefox
  • These are all powerful and you do not have access to them in google because of abuse in the High School they have been blocked by IT.
  • However, if you do need access to them you can see them in edge if I un-block it for your website development

 

Dasmoto’s Arts & Crafts

 

  • I will download Sublime Text Editor for you for this Project
  • You will need to make a new file folder on your Desktop for Project
  • When you click on images: Chose Save Image as then select to save them in the Folder you created to save in.
  • When you open Sublime Text Editor it will be blank – Click File option and save as and call it index.html or you can do what I did and call it Darts&crafts.html
  • Then chose File again and choose New File
  • It will create another blank file on a second tab
  • On the tab - Click File option and save as and call it style.css or you can do what I did and call it DAstyle.css
  • In your file folder for the Project these will be all the files you need.
    • style.css
    • finnish.jpeg
    • frames.webp
    • hacksaw.webp
    • index.html
    • pattern.jpeg

 

If you need Help ask.

 

Once all of this is done you can start programming the website based on the design specs given.

 

My Website Example of the project

 

Dasmoto’s Arts & Crafts

 

Week 5

 

Deploying Website

 

There are a few videos (I would Skim watch them using arrows) about deploying Websites and Web Hosting

 

GitHub Pages

  • If you wish to make an account using your school information you can. GitHub is an excellent resource for building and deploying webpages on-line using files.
  • I personally use 000webhost.com (However it does not have all the tools or community of Github – it is just a place to deploy a website using the free file manager. (if you chose this be careful when making the account ask me for help)

 

Bash

  • In this section you will learn how to set up folders and files using Bash programming which is a newer form of DOS.
  • On your computers you DO NOT HAVE ACCESS TO command line or command line programming, but you can do the lessons in the Code Academy program.
  • Knowing DOS or Bash or any command line programming is useful in system setups and accessing files on the computer for editing. Because this is direct access to system and program files is why IT Blocks it.

 

Projects

  • Bicycle World – I just the hints to do project this is a link to the Video
  • Daily Buzz – Just like Bicycle World use hints but this is the Vide

 

Week 6

 

LESSON 7 Projects Part 1

From this point on I would use the videos to check your work as you go. Remember it is your Learning!!!

Website Examples:

Paint Store

Typography – SKIP STEP 7 - @font-face does not work from google

Build your own Cheat Sheet – Just re-created their example project in step 2

Video Walk Through

Paint Store Walkthrough

Typography Walkthrough

 

Week 7

 

LESSON 7 Projects Part 2

Website Examples:

The Summit – I combined the starting.css and the style.css for one sheet

Blueberries

Website Design System – I would just recreate theirs the best you can. Link in step 2

The fonts you will need to link them from google (Source Code Pro, Nunito Sans, Poppins)

Video Walk Through

The Summit Walkthrough

Blueberries Walkthrough

 

Week 8

 

LESSON 8 Projects

Website Examples:

On all these projects the color scheme is your choice so colors will be different, however all content should match. Use Adobe Color - For color schemes.

Journey Around the World

Pinpoint E-Commerce

Reel Good Reviews

Video Walk Through

Journey Around the World

Pinpoint E-Commerce

Real Good Reviews