Web Development I

Course Information

Course Information

Week 1

Introduction & Setup By the end of this week, students will demonstrate:

- installing and configuring the tools that will be used throughout the term.

- identifying the client server relationship and how webpages are requested and displayed in a browser.

Topics

Week 2

Git and GitHub By the end of this week, students will demonstrate:

- creating a basic webpage using HTML

- basic commands related to working with Git.

- creating GitHub account and a remote repository.

- creating GitHub Pages Website

Topics

Week 3

HTML Text and Semantics By the end of this week, students will demonstrate:

- writing HTML semantics and different mockup elements

- using HTML semantic tags for lists

Topics

Week 4

HTML Images, Links, Browser Dev Tools, HTML Forms and Tables By the end of this week, students will demonstrate:

- adding images to the web page

- linking HTML pages, external sites and internally on a page

- adding forms to the webpage

- displaying information in a table

- using browser developer tools to troubleshoot the webpage

- using HTML validator to validate HTML code

Topics

Week 5

CSS, HTML Attributes, CSS Selectors, CSS Cascading and Specificity By the end of this week, students will demonstrate:

- using CSS to add styles to the web page

- targeting HTML elements in CSS

- adding attributes to HTML elements

- using different CSS Selectors

- styling Forms and Tables

- using CSS cascade and specificity to add and overwrite styles

- using different color values

Topics

Week 6

Styling Text, Adding Backgrounds, CSS Validation abd CSS Units By the end of this week, students will demonstrate:

- styling text

- adding background to elements

- validating CSS code using an online CSS Validator

- using different units of measurement

Topics

Week 7

Box Model, Display, CSS Float, Position and overflow By the end of this week, students will demonstrate:

- resizing an HTML element using box model

- changing the element box-sizing

- displaying an element as block, inline or hidden

- floating HTML elements to create a layout

- positioning HTML elements on the page

- controlling the display of overflowing elements

Topics

Week 8

Midterm Week There will be no class this week.

Week 9

CSS Responsiveness By the end of this week, students will demonstrate:

- setting up responsiveness of a webpage

- using media queries to change the styles based on screen size

Topics

Week 10

CSS Flexbox By the end of this week, students will demonstrate:

- building layouts using CSS Flexbox model

Topics

Week 11

CSS Grid By the end of this week, students will demonstrate:

- building layouts using CSS Grid model

Topics

Week 12

HTML Page Mockup By the end of this week, students will demonstrate:

- breaking down a design to create HTML page mockup using different the structure and styling techniques

- embedding YouTube videos and Google maps to the webpage

- adding custom fonts using Google fonts

- adding background styles to HTML elements

Topics

Week 13

Material Review Students will work on their final assignment and the class time will be used as a work lab

Any topics will be reviewed as per student questions

Week 14

Work Period Students will work on their final assignment and the class time will be used as a work lab

Topics

Week 15

Work Lab There will be no classes this week.

Completing the final assignment