Asha

Web Dev 1.0 Lesson plans

This course introduces students to the basics of web development. Students begin by exploring existing web pages, then learn HTML to structure their own pages and CSS to style them. Along the way they consider digital footprint, intellectual property and how to research and cite sources. The course then moves on to multi-page sites, layout with Flexbox, and a team project to build a website for a purpose. The final lessons introduce JavaScript - variables, the DOM, conditional statements, functions, arrays and array methods.
Lesson No Topic Description
1 Exploring Web Pages Student will see Sample Personal Web Pages.
2 Intro to HTML Students will experiment with Web Lab.
3 Headings and Lists Students learn how the different heading elements and lists are displayed by default and practice using them to create page and section titles.
4 Digital Footprint Students look at several social media pages to determine what sorts of information people are sharing about themselves or one another.
5 Mini-Project - HTML Web Page Students use what they have learned to create their own personal web page on a topic of their choice.
6 Styling Text with CSS Students learn the basic syntax for CSS rule-sets and then explore properties that impact HTML text elements.
7 Intellectual Property Starting with a discussion of their personal opinions on how others should be allowed to use their work, the class explores the purpose and role of copyright for both creators and users of creative content.
8 Using Images Students learn how to add images to their web pages using the <img> tag and how to cite the image sources appropriately.
9 Styling Elements with CSS Students adding their own styles to the page. They apply their knowledge of new CSS properties to their personal websites.
10 Mini-Project - Adding Style to a Web Page Students use what they have learned to create their own styled web page on a topic of their choice.
11 CSS Classes Students have been able to do is styling by the element, which means that every element of a particular kind has the same style
12 Organizing Content with Flexbox Students learn about Flexbox and how it can be used with their div containers to style and position items. Students practice using Flexbox properties to control the layout of web pages
13 Flexbox Children for More Control This lesson introduces students to advanced Flexbox child properties including order, align-self, flex-grow, and flex-shrink through an interactive warm-up and the various level exercises.
14 Chapter 1 Project Students use what they have learned to style and organize a web page. They use CSS classes and flexbox to organize their user’s web page in Web Lab.
15 Team Problem Solving Students work together to set group norms and brainstorm what features they would like their websites to have.
16 Sources and Research This lesson encourages students to think more about how to find relevant and trustworthy information online.
17 Linking Pages This lesson will give students practice in using links and introduce them to good navigation practices for their sites.
18 CSS Pseudo-classes This lesson introduces students to the dynamic world of CSS pseudo-classes. Students will learn about their role in enhancing web page interactivity and style.
19 Planning a Multi-Page Site Students work in teams to plan out their websites and create a sketch of each page.
20 Project - Website for a Purpose They are finally able to code their pages. Using the project guide, the team works together and individually to code all of the pages, then puts all of the work together into a single site.
21 Peer Review and Final Touches Students first reflect on what they are proud of, and what they would like feedback on.
22 Introduction to JavaScript variables, DOM and basic operations To help students learn Javascript basics, including variables, DOM access, operators and displaying results on a webpage using innerHTML.
23 Conditional statements   - Temperature checking using HTML and JavaScript To help students understand decision making using conditional statements, reusable functions and basic DOM events and callback functions in JavaScript.
24 Introduction to arrays and index Students learn how to store multiple values using arrays and how to process these values using loops.
25 Array and array methods Students learn how to process and transform data stored in arrays using JavaScript array methods.