8/4/2020 Web Dev Curriculum - Google Docs

HTML, CSS & Vanilla Javascript 

This is the basic foundation of our curriculum for the first year of the Elkins High School 
PEAC program. We will be covering the foundations of HTML, basic CSS, and Vanilla 
Javascript. Listed here is a basic outline as we have not had any detailed meetings with our 
club. 
 
Throughout the year, students will work on a website idea of their choice 
using the skills they learn in class. Each lesson they will also have a 
mini-project they will work on throughout the lesson, which will later serve as 
their notes if they ever need to refer back to a certain lesson or topic. 
 
Curriculum 
 
Week 1: Introductions, Make a Plan 
● Set-up software 
● Make sure they all have accounts 
● Set-up flash drive/folder on desktop 
○ One main folder with all Web Dev Stuff 
■ One folder for semester long project 
■ X Folders for each week’s lesson 
● Mini-projects and notes will be stored here 
● Give kids inspiration 
○ Find cool websites to show them what they can do with HTML, CSS, JS 
○ Show the inspect elements so they can see the coding aspect 
● Have them create an idea for the website 
○ Should come up with a general theme 
○ What tabs they want 
○ What they want their website about 
○ Name and all that jazz 
○ Color scheme 
○ Create a sitemap for page hierarchy 
○ Have them draw out their plans 
■ Provide templates they can use 
● Where they should be: 
○ Comfortable navigating and using the tools that the software provides 
○ Able to access the software and able to write and manipulate files using 
the software 
 
Week 2: Basic Starter HTML. How to Create your Website 
● Basic file for HTML 
● H1’s, p, b, em, i 

https://docs.google.com/document/d/1a8ZOyLpwwy86Eiuf1lxV5Pqj8xvsmEQMfnSW90uzF0I/edit 1/3
8/4/2020 Web Dev Curriculum - Google Docs

● Ordered and Unordered Lists 

● Images 
● Create a starter website 
● Where they should be:  
○ Able to start a page on their own and type strings within the page 
 
Week 3:  
● Tables 
● <a> tag and href 
● Create a ‘Resources/References’ page with links to other sites 
● Where they should be: 
○ They should be able to add links and tables to any text on their website 
 
Week 4: Div and basic CSS 
● Div, Span, and their importance 
● Ids and Classes 
● Style Tag 
● Colors, fonts, weight, italics, sizes, borders 
● Create a landing page 
● Where they should be: 
○ Able to divide their website into subsection and add basic style changes 
to text using a CSS Sheet or style tag 
 
Week 5: 
● Text-align 
● Box Model 
● Float 
● Create a navigation bar 
● Where they should be 
○ Able to change and shape borders around images and text. 
 
Week 6: Review 
● Review concepts learned thus far 
● Import fonts 
● Free-Time to work on their personal projects 
● Where they should be: 
○ Caught up on their website development 
 
Week 7: 
● Responsive Design 
● Flex Box (If there is time) 
● Create a responsive landing page 
 

https://docs.google.com/document/d/1a8ZOyLpwwy86Eiuf1lxV5Pqj8xvsmEQMfnSW90uzF0I/edit 2/3
8/4/2020 Web Dev Curriculum - Google Docs

● Where they should be: 

○ Able to stretch and manipulate their screen or user data and have the 
website respond with physical changes 
 
Week 8: Intro into js 
● What is JS and what can be done with it? 
● console.log(); 
● Inspect (dev tools) 
● Variables (let, const, var) 
● document.getElementById() 
● .innerHTML() 
● .value 
● Where they should be: 
○ Able to create basic call and response actions on their websites 
○ Able to edit and change within their websites based on user data 
 
Week 9: 
● Review past week 
● Functions Notation 
● (Make a page with an onclick so the kids can see the before and after that 
their functions do) => talk about what onclick is 
● For Loops 
● Where they should be 
○ Able to create iterations on their website due to user-entered data. 
○ Able to utilize on-click functions  
■ This uses a combination of HTML and CSS class 
identification/values with JS functions 
 
Week 10: 
● Review past week 
● Arrays 
● Objects 
● Where they should be  
○ Finishing up their personal website 
○ Adding any extra objects or classes that will make website fun/easy to 
use 
 
Week 11/12: Final Project 
● The student will have time to work on final projects 
● Present final projects  

https://docs.google.com/document/d/1a8ZOyLpwwy86Eiuf1lxV5Pqj8xvsmEQMfnSW90uzF0I/edit 3/3