Cheney Middle School

Skip to main content
Mobile Menu
Please Create A Marquee

Web Development 2

Web Development 2

1 Quarter                                  Prerequisite: Web Development 1 (with a grade of an A and teacher approval)

This class start with fundamentals of CSS and then go into how to create a webpage to customer specs off platform using sublime text editor and developing files needed for webpage locally on their desk top computer. They will also learn some bash coding for structure of files on a system. Then students will move into Improved styling with CSS. Here students will learn improved styling with color theory and importing of google api fonts. This class will wrap-up with how to make a website more responsive. 

 

Grading:

Grading: Weekly Points will be 50% of total Grade.

 

Weeks 1 – 5 will contain 60% of the student’s weekly grade.

Each Week is Graded on 100 pts for completed Challenges/Projects during that week.

- If student does not finish all challenges/projects in the week, they must finish the missing challenges/projects before the end of the following week to be eligible for the full points in that current week.
- Student will be provided two days a week of make-up time to get caught up or progress ahead if available per class – these days are also setup in schedule to give extra time if student is absent per school policy.
- Grades for each week will not fall be 70pts in a week but the student cannot get more than 70pts in a week until they are fully caught up.

 

Weeks 6 – 8 will contain 40% of the student’s weekly grade. (Week 6 starts over at 100pts)

Each Week 6 – 8 is Graded on 100 pts for completed Challenges during that week.

- If student does not finish all challenges/projects in the week, they will be graded on work completion for each of the last 3 weeks.
- Student will be provided two days a week of make-up time to get caught up or progress ahead – these days are also setup in schedule to give extra time if student is absent per school policy.
- Grades for these last 3 weeks, can and will fall below the 70pts (unlike week 1 – 5) in each week grades can result in a “0” for the week if the student does not do any of the assigned work in the week.

 

Other 50% of grade

Computer Programming 1 – (50% - Projects, 50% - Lessons/Daily)

Students will only be able to move on to the next step in programming classes if they get an “A” in this course.

Course Grading

92% - 100% - A

90% - 91.99 - A-

88% - 89.99% - B+

82% - 87.99% - B

80% - 81.99% - B-

78% - 79.99% - C+

72% - 77.99% - C

70% - 71.99% - C-*

68% - 69.99% - D+*

60% - 67.99% - D*

59.99% & Below – NG - Does keep student off Honor Roll

*For introduction to programming and Web Development 1 –

These categories will be changed to “S” – as to not negatively affect student GPA.

 

Week 1 - Web Foundations (Fundamentals of CSS)

 

LESSON 4 Projects

Website Examples:

Healthy Recipes

Olivia Woodruff Portfolio

 

Video Walk Throughs:

Healthy Recipes Walkthrough

Olivia Woodruff Portfolio Walkthrough

 

 

Week 2 - Web Foundations (Fundamentals of CSS)

Website Examples:

The Box Model: Davie’s Burgers

Broadway

Video Walk Throughs:

The Box Model: Davie’s Burgers Walkthrough

Broadway Walkthrough

 

Week 3 & 4 - Developing Websites Locally

 

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 & 7- Improved Styling with CSS

 

Improved styling with CSS (Colors, Typography, Links, & Navigation)  

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

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

Paint Store Walkthrough

Typography Walkthrough

The Summit Walkthrough

Blueberries Walkthrough

 

Week 8 - Improved Styling with CSS

 

Fundamentals of Web Design (Color Theory, Color for UI, Text Design)

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