Become a Web Designer – HTML & CSS for Beginners

Introduction

Introduction

What you will learn?

Learning Approach

Setting up your course

Install Chrome

Install Brackets Editor

How Internet Works

Introduction

Open Command Prompt

Find Server IP Address

Ping Explained

Internet data flow explained

Submarine cables for internet

HTML – Web Page that displays “Hello World”

Hello World

Create project folder

Open project folder in Brackets

Create HTML File

Key in HTML Code – Step 1

Key in HTML Code – Step 2

HTML is a text file

Launch HTML file in browser

Launch HTML using Live Preview

Understanding hello.html

About HTML

HTML in the Internet

Practice Exercise on Heading

HTML – Title

Title

Implement Title

Title Explained

Practice Exercises on Title

HTML – Paragraph

Paragraph

Implement news article – Download content

Coding HTML

Implementing news article content

Practice Exercises on Paragraph

HTML – Comments

About HTML Comments

HTML – Link

Link

Implementing a Link

Understanding Anchor tag

Understanding HTML Attributes

Practice Exercises on Link

HTML – External Link

External Link

Implement External Link

External Link Explained

HTML – Image

Image

Create folder for images

Displaying Brackets and Chrome side by side

Download Image

Implement image display

Practice Exercises on Image

HTML – List

List

Implement Unordered List

Implement Ordered List

Practice Exercises on List

HTML – Table

Table

Implement Table Header

Implement Table Cells

Implement Table Borders

Understanding Table tags

Practice Exercises on Table

HTML – Form

How does a Form look like?

Input Text

Implement Input Text

How Input Text works?

Implement Input Text Placeholder and Value

Implement Input Text Label

Implement Input Text Email

Implement Input Password

Implement Select

How does a Radio Button look like?

Implement Radio Button

Implement Radio Button Grouping

Implement Radio Button Labels

Implement Radio Button selection

Implement Check Box

Implement Check Box Selection

Implement Text Area

Implement Form Submission

How Form Submission works?

Submitting a Form to Server

Submit form with name attribute

Submit form using POST method

Submit Select Element value

Submit Radio Button value

Submit Check Box value

HTML5 Form Elements

Practice Exercises on Form

HTML – Block and Inline Elements

Block and Inline introduction

Block Elements Explained

Inline Elements Explained

HTML – Understanding <div> and <span>

Changes to news article display

Grouping new article elements using <div>

Applying styles on <div>

Implementing <span> for highlighting news article content

Practice Exercises on <div>

HTML – Semantic Tags

Semantic Tags Explained

HTML – Conclusion

HTML Conclusion

CSS – Cascading Style Sheet

Introduction

Reuse of HTML files

CSS – Applying Styles

Styling the “Hello World” display

Create “css-learn” folder

Open “css-learn” in Brackets

Copy “hello.html” from “html-learn” to “css-learn” folder

Implement Styles

Understanding Inline Styles

Implement Internal Style

Create folder and file for styles

Implement External Style

Link External Style

Applying CSS Styles

CSS – Selectors

Element Selector

Id Selector

Class Selector

Significance of Class Selector

CSS Selectors

CSS – Format with Font, Border and Spacing

Requirement Definition

Implement HTML

Apply Font and Color

Apply Border

Apply Spacing (Padding and Margin)

Font, Color, Border, Width, Padding and Margin

CSS – Font

Font Basics

Pre-defined CSS Font names

A company’s website requirement

Installed Fonts

Font File Types

Finding Fonts in Internet

Download Font

Create folder for Font

Copy Font File

Apply downloaded font using @font-face

Apply font using @import

Font Size

Font Size value classification

Default Font Size

Absolute Size Keywords

Relative Size Keywords

Defining Font Size using Length

Defining Font Size using Percentage

Font Weight

Practice Exercise on Profile

Practice Exercise on Strat Hawk

CSS – Color

Color Basics

Apply Color using RGB

Color definition using Hexadecimal

Apply Color using Hexadecimal

Named Colors

Alternate color definition options (RGBA, HSL, HSLA)

Color Picker

Practice Exercise – Colors for Profile Page

Practice Exercise – Colors for Strat Hawk

CSS – Borders

Border Style Options

Border Radius

CSS – Width and Padding

How Width and Padding works?

Applying Width

Applying Padding

CSS – Margin

How Margin works?

Applying Margin

CSS – Styling news article web page

Style definition for news article

Copy news article HTML file

Preparatory steps to style news article

Apply Font for news article

Enclose article content within <div>

Apply styling for news article

Align Image

Apply Color

Text align news article

CSS – Box Model

Box Model demo activity

Understand space occupied by each HTML element

Box Model Explained

CSS – Page Layout Design

News Home Page Layout Definition

News Home Page Layout Design

Create skeleton HTML

Apply Font

Skeleton Class Definition

Define column width

Apply Floating

Apply Background Color

Clear Float

Style cleanup

Include content for Category section

Include <div> for each headline

Include title for headlines

Include content for Weather section

Fix footer issue

Style logo in the navigation header

Identifying a Color Palette

Apply color in navigation header

Apply padding in navigation header

Remove unnecessary margin before navigation header

Apply background color

Apply color to headings

Border for content sections

Content Padding and Margin

Spacing between news titles

Color for news titles

Styles for weather content

Styles for footer

Add hover effect to news titles

Recall Box Model understanding

Width property and Box Model

Recall existing section definitions

Modify section spacing using padding

Box Model demonstration

Alternate Box Model – Border Box

Implement Border Box

Margin Collapsing

Summary about float, clear and border box

Practice Exercise – Profile Layout

Practice Exercise – Strat Hawk Navigation Bar

Practice Exercise – Strat Hawk Destinations

CSS – Display Property

Display Property

Create HTML file

Create CSS file

Understanding none, block and inline

Multiple Inline and Block Elements

How inline-block works?

Flex

Flex for News Home

Copy News Home files

Implement News Home for Flex (HTML changes)

Implement News Home for Flex (CSS changes)

Grid

Implement Grid Example – HTML changes

Implement Grid Example – CSS changes

Implement Grid Example

Fractional Units Explained

Implement Grid for News Home – Create HTML and CSS files

Implement Grid for News Home – Apply Styles

Practice Exercise: Strat Hawk – Recommended Flights Layout

CSS – Form

Signup Form Layout

Navigation Link – HTML changes

Navigation Link – CSS changes

Create HTML file

Check Navigation Links

Get the Signup HTML content

Create Signup Form container in HTML

Apply styles for Signup container

Apply styles for Signup heading

HTML code cleanup for Signup form page

Container for Signup Form Elements

Style for Labels

Form Element Layout

Signup Form Element Width

Signup Form Element Styles

Signup Form Element Styles for focus

Additional styles for Signup Form Labels

Fix Gender Radio Button Layout

Fix Layout for Text Area and Signup Button

Styling the Signup Button

Reduce Font Size for Input Elements

Summary of Form Element Styling

CSS – Position

Introduction

Position Demo – Create HTML and CSS files

Position Demo – Item specific class definition

Position Demo – Relative

Position Demo – Absolute

Position Demo – Fixed

Position Demo – Sticky

Car Shop

Car Shop – Understanding Image Copyright

Car Shop – Download Image

Car Shop – Include Image

Car Shop – Set Image Width

Car Shop – Include Navigation Items

Car Shop – Align Navigation Items using Flex

Car Shop – Get the Font

Car Shop – Apply Font

Car Shop – Convert Navigation Items to Upper Case

Car Shop – Position Navigation Items on top

Car Shop – Approach to applying shading

Car Shop – Applying Color Shading above image

Car Shop – Reason for Shading above Navigation Items

Car Shop – Ordering elements using z-index

Car Shop – Positioning the Navigation Items

Car Shop – Hover effect in Navigation Items

Car Shop – Including the tag line

Car Shop – Styling the tag line

Car Shop – Applying Font Weight to tag line

Car Shop – Fix Shading Height

Practice Exercise – Strat Hawk Landing Page

CSS – Styling List and Table

Styling List

Styling Table

Styling Table – Get HTML File

Styling Table – Create CSS

Styling Table – Apply Font and Border

Styling Table – Apply Border Collapse

Styling Table – Apply alternate row background color

Styling Table – Apply padding on cell content

CSS – Icons

Benefits of using Icons

Including Icons in News Home

About Material Icons

Include Material Icon CSS

Apply Material Icon for a News Category

Modify Material Icon Size

Apply font color and align spacing

Implement Icon for all News Category

CSS – Responsive Web Design

Significance of Responsive Web Design

Example for Non Responsive Web Design

Example for Responsive Web Design

Emulating devices in Chrome browser

Open News Article page

Making News Article page Responsive

Create HTML for News Article

Implement viewport meta tag

Understanding Viewport

Modify width for mobile devices

Apply style for mobile devices using Media Query

Apply style for tablets using Media Query

How to identify device width range for Media Query?

Conclusion for Responsive Web Design

CSS – Launch your learning web pages to GitHub Pages

Introduction

Git Workflow

Steps to setup GitHub Pages

Signup into GitHub

Create GitHub repository

Download Git Client

Install Git Client

Verify Git Client Installation

Git Push

Launch Git User Interface

Create Local Repository

Stage the files

Commit the files

Push the files

Enable GitHub Pages

View page in GitHub Pages

Conclusion

Miscellaneous CSS Topics

What to learn next?