Scribd
Upload
15 views

Introduction To Web Development - 15 Sessions

Uploaded by

Ritisha Jain Reyansh Jain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Introduction To Web Development - 15 Sessions

Uploaded by

Ritisha Jain Reyansh Jain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Lesson Plan

Introduction to Web Development

Summary
1. Programming Language(s): HTML5, CSS3, JavaScript (basic)
2. Topic or Unit of Study: Website Development
3. Grade/Level: Senior (Grades 8 to 10), Juniors, College Students
4. Objective: To be able to understand HTML, CSS and JS semantics and build simple
websites

Note:​ ​This course is just a starter course. Students will be able to continue to learn Web
Development skills such as Dynamic Websites, Responsiveness, UI/UX, through other
courses. This course is a prerequisite for any course in the Web Development Path

5. Time Allotment: 18 hours

Implementation
Learning Context
The course aims to get students to understand Markup Language, Selectors and basic
Programming through HTML, CSS and JavaScript. Students will be able to build simple websites
once they have understood this concept. The course has been designed to keep the students
interested by having a continuous set of projects to use, and has test integrated into the course
flow to be able to gauge which topics the teacher will need to focus on.

Session-wise Breakdown
1. What is HTML5? Reading HTML Tags. Playing around with websites like google, youtube,
etc. Changing img src, adding styles, changing links, adding background color, and
changing title

Tags covered: html, body, head, title, img, a, p

Projects: None

1
2. Headings,breaks, Paragraphs, divs, styling tags, list and videos

Tags covered: h1-6, p, div, em, stong, i, ul, ol, li, video, br

Projects: Blog Website

3. Tables: Rows and division, borders, head + body + foot, row and column span

Tags covered: table, td, thead, tbody, tfoot, rowspan, colspan


Projects: Schedule Website

4. CSS Selectors, Inline CSS, Internal CSS and External CSS, spanning, revisiting old projects
to change css, Classes and IDs, rgb and hex colors

Tags covered: style, link, span

Selectors covered: font, background color, color, !important

Projects: Revisit old projects

5. TEST I

Picture to HTML

6. HTML Forms: textboxes/fields, password fields, checkbox, range, number, dropdown,


radio button, button, submit

Tags covered: form, input

Projects: Login Page, Mad Libs

7. Re-looking at the Backend of CSS of all projects


8. TEST II

Barebones website to fancy website

9. Box Model, Grid Model, Flex Model

Projects: CSS Positioning on a website

10. TEST III

CSS Positioning Test

11. Intro to JavaScript and DOM, variables, JS Syntax, arithmetic, confirm, alert and console

2
Projects: JS Calculator App (CLI)

12. Getting elements from the DOM, manipulating attributes, innerHTML and text

Projects: JS Calculator App (GUI)

13. Basic Booleans and conditionals

Projects: Simple text Based choose your own adventure game

14. Accessing a JSON object, functions Basics

Projects: Restaurant Rating Website

15. TEST IV

Projects: Music Player App

Personalized Teaching
At iCodeiCreate, we understand that not all students will fall into the category of Seniors (Grades
8-12) and have therefore made this course modular and modifiable for a variety of students to be
able to attend.

Note:​ ​The sessions that are cut out will be added as padding sessions, and will be used by the
teachers to explain concepts from sessions that were not covered in the 1 hour allotted. If the
student still has time left over, it is upto the Teacher’s discretion to either teach advanced
concepts or do another project.

Sessions that are added will be added over and above the time allotted to this course, and will be
charged at the normal rate.

Materials & Resources


Note:​ ​Most iCodeiCreate classes will now require the students to only install a program called
Docker, which will remove the need to have to install any other software. If you are not
comfortable with the installation of Docker, please ensure that the counsellors are aware of this.
Students must have admin access to be able to install the software. Furthermore, students will
also need to have access to a web browser to log onto google meet.

3
To avoid any hassle with installation during the first class, we will be using an online IDE.
Therefore, installation will only happen in the second session.

a. Docker
b. Web Browser

Assessment
Teachers will be continuously assessing students with various tests, and also their responses to
questions during class. Feel free to book an appointment with the teacher to discuss the
student’s progress. The teacher will also contact you 3 sessions before the end of the Student’s
course, to discuss the child’s next course based on his interests and goals.

You might also like