Curriculum

1. Introduction to Web Development
Learning Objectives
Discover HTML and its purpose, and understand how CSS works with HTML to produce beautiful web pages. Learn about setting up a development environment including the use of a code editor like Microsoft VS Code and the use of utilities that promote efficiency by providing shortcuts and snippets to quickly produce code blocks and layouts. You then get to create your very first web page.

Topics

• What is HTML
• What is CSS
• Setting up the environment
• Hello World!
• Using VS Code with Live reload
• Using Emmet and online tools
• Using Chrome developer tools

2. Introduction to HTML
Learning Objectives
Learn about tags – the building blocks of HTML as you deep dive into different types of tags that help you craft the structure and content of a web page along with its attributes and their syntax before learning to work with images, hyperlinks, lists, and tables in HTML. Thereafter, take your first steps at writing CSS using the style attribute as you to proceed to work with colors. Finally, learn all about HTML5 semantic tags as well as audio and video tags as you build up a strong foundation for the more advanced features to follow.

Topics

• HTML elements and Tags
• Singular and Paired tags
• Structure of an HTML page
• Heading and Paragraph Tags
• Attributes in HTML
• Images
• Links – Internal and External
• Lists
• Tables
• The style attribute
• Colors in HTML
• HTML5 semantic tags
• HTML5 audio and video tags

Hands-on

• Basic HTML Tags and Attributes
• Image Tag and Attributes
• Links- Internal and External
• Lists – Ordered and unordered
• Tables in HTML
• The style attribute
• Colors in HTML
• HTML5 Semantic Elements
• HTML Audio and Video elements

3. Forms and Inputs
Learning Objectives
Learn to use forms to capture user data as you work with the form tag and various input elements. Then implement your learning to create a contact form.

Topics

• The Form tag
• Using the label tag
• HTML Input tag
• Select and TextArea
• Buttons
• Datalist
• Building a contact form

Hands-on

• Simple Form Element
• Labels and Inputs
• Basic HTML Tags and Attributes
• Selects and Options
• Email, Password Inputs, and buttons
• Datalists in HTML

4. Introduction to CSS
Learning Objectives
Discover Cascading Style Sheets (CSS) and its role in visually styling HTML documents. Learn about the use of CSS selectors to target HTML elements, creating external stylesheets for use across multiple pages, and the lowdown on overriding styles. You’ll work with CSS properties and rulesets including units for position and size, the ever-important box model, and its features and pseudo-classes.

Topics

• Using the style tag
• Targeting HTML elements
• Targeting nested HTML elements
• Using external stylesheets
• Overriding CSS Styles
• Common CSS Properties
• CSS units
• The CSS Box Model
• More CSS Properties
• CSS Pseudo-classes

Hands-on

• Using the Style element
• Targeting HTML elements in CSS
• Targeting nested HTML elements
• Using external stylesheet
• Styling using external stylesheets
• Common CSS properties
• More CSS Properties for CSS Box
• CSS Pseudo-classes

5. Advanced CSS
Learning Objectives
Step up with CSS as you learn about positioning elements followed by advanced features such as using pseudo-elements, variables, custom web fonts, and importing and composing stylesheets.

Topics

• CSS Positioning- Static, Relative and Absolute
• CSS Positioning – Fixed and Sticky
• CSS Pseudo-elements ::before and ::after
• CSS Variables
• Custom fonts in CSS
• Importing external stylesheets

Hands-on

• CSS Positioning
• CSS Positioning 2
• CSS Pseudo-elements
• CSS Variables
• Custom fonts in CSS
• Using the @import Keyword

6. Transitions and Animations
Learning Objectives
Learn all about CSS transitions and animation as you bring movement and life to your web pages. You’ll learn to work the transition property as well as create keyframe animation using CSS.

Topics

• What are CSS Transitions
• Basic Transitions and CSS properties
• CSS Animations and CSS properties
• Defining in Keyframes

Hands-on

• CSS transitions Properties
• CSS Animations

7. Responsive Web Design
Learning Objectives
Responsive web design allows you to design websites that visually adapt to a multitude of device screen sizes and layouts such as desktop, mobile phones, and tablets. Learn to implement media queries that target various screen sizes and work with CSS Flexbox to create adaptive layouts with ease. You will also learn about CSS Grid layout and its features before building a responsive image gallery.

Topics

• Media queries
• What is CSS Flexbox?
• Creating rows and columns
• More flexbox properties
• What is CSS Grid Layout?
• Rows and Columns in Grid
• Allocating cells
• Grid template areas
• Building a responsive image gallery

Hands-on

• Media Queries
• CSS Flexbox Properties
• More CSS Flexbox properties
• CSS Grid
• CSS Grid properties
• Grid areas in CSS Grid