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
