HTML and CSS Online Course

HTML and CSS Online Course

This course is a complete guide to mastering HTML and CSS, the core technologies of web development. You’ll start by learning to structure content with HTML and style it with CSS, then progress to forms, tables, dropdowns, grids, and responsive layouts. Key topics include text formatting, positioning, typography, and Emmet for faster coding. By the end, you’ll be able to design and build beautiful, fully functional websites from scratch, equipped with the skills to bring your creative ideas to life on the web.

Who should take this Course?

The HTML and CSS Online Course is ideal for beginners, students, and aspiring web developers who want to build a strong foundation in front-end web development. It is also suitable for designers, hobbyists, and professionals from non-technical backgrounds looking to create and style responsive, visually appealing websites using HTML and CSS.

What you will learn

• Acquire a strong foundation in HTML tags and CSS selectors
• Use Visual Studio Code and EMMET to streamline coding workflow
• Understand attributes, meta tags, and image integration in CSS
• Create links, format text, and design user-friendly forms/tables
• Explore CSS display, positioning techniques, and text formatting
• Manipulate layout with CSS for precise control on webpage structure

Course Outline 

Introduction

• Introduction

Installing Tools

• Download and Installing Visual Studio Code
• Setting Your First Project

HTML Basics

• What Is HTML? What Is Tag?
• Basic HTML Document
• Nested Tags and Fast Wrapping Existing Text with Tags Using EMMET
• Creating Paragraphs <p> | What Are Whitespaces?
• Void Tag and Breaking the Line <br>
• What Are Attributes? [title] and [lang]
• Neutral Tag <span>
• Installing Extensions in VSC: AutoRenameTag
• Change Background Without Color Generator
• Awesome Color Selection Tools for Your Website!
• Adding Image to Your Site <img>
• Bonus: Where to Get Free Pictures on Your Site?
• Getting img Size Using VSC Shortcut
• How to Link to Different Folders? Creating PATH Theory

HTML | Improving Document and Workflow

• Viewing the Source Code of Any Site. What Are Comments?
• Meta Tags
• Charset - Proper Encoding on Your Site
• HTML Doctype
• Live Server and Auto-Saving Code Feature
• Entities and HTML Validation
• How to Properly Name Your Files? Why Is the Main Page Called index.html?
• Extension: Sweet Icons in Your VSC

HTML | Listing Things

• <ol> Versus <ul>
• Fast Tricks with Emmet to Use with Lists
• <dl> - Definition List
• EMMET: Creating Siblings and Treating Two Elements as One

HTML | Links

• Creating Internal Links
• External Links | _blank
• #labels
• How to Create a Link to Email?
• Telephone Link

HTML | Text Formatting

• Headers - <h1> to <h6>
• <cite> Versus <blockquote> Versus <q> - How to Cite Others
• <abbr> | <dfn>
• Semantic Tags <strong>, <em> and <mark> vs <b>, <i>, <u>, <s>
• <sub> Versus <sup>
• Preformatted Text, Tags: <pre>, <code>, <var>
• Multicursor | Searching and Replacing Text in VSC

Forms | Basics

• What Is Form and Input? How to Create a Basic Form with Login and Password
• How to Properly Submit Form and Name Its Inputs
• Radio and Form Labels and Legend
• Checkboxes
• Most Frequently Used Form Attributes
• Exercise: How to Create a Contact Form on Your Site?
• Getting Date and Time from the User

Tables

• Basics of Creating Tables
• How to Stretch Cells Using rowspan and colspan?

CSS | Basics

• What Is CSS?
• CSS Placement and CSS Priority (Cascade)
• Class Versus ID
• Useful CSS Extensions

CSS | Formatting

• div Versus span - Grouping More Elements
• Display: Block/Inline/Inline Block
• EMMET | Tricks Creating Tags with ID and Class
• Selector Rehearsal
• Rules of Selecting Tags - Important Lecture to Avoid Problems in CSS
• Border
• Rounded Corners - Border-Radius
• Tables and Padding
• How to Create Horizontal Menu? States of Links: link, visited, hover, active
• Changing Default List Icons | :: before Selector
• How to Make Elements Transparent? Opacity Versus rgba
• Changing Cursor | Creating Hint Box
• Attribute Selector | Custom Named Attributes In HTML

CSS | Text

• Text Formatting and Decoration
• Paragraph Indentation and ::first-letter Selector
• CSS Units: em Versus px Versus %
• Line-Height | Letter-Spacing | Word-Spacing
• Playing with Fonts
• Custom Fonts from Web - Google Fonts

CSS Background

• Changing Background of Your Website: Set It to Image or Pattern

CSS Element Placement

• Box Model - Margin, Padding, Border, Content Differences, Centering Elements
• Fitting Elements Inside a Container - Properly Counting Width
• calc() - Automate the Calculations on Your Site
• Custom Properties (Variables)
• Box-Sizing - A Solution for Counting Width Faster
• Positioning of Elements - Static Versus Relative Versus Absolute Versus Fixed
• Relative and Absolute: Practical Example
• Container Inside Another Container - Let's Make a Template for Website
• Exercise: Create a Button That Moves the User to the Top of Website
• Float and Clear: Floating Text Around the Image
• How to Stick Element Like Menu in One Place?
• Exercise: Create Drop Down Menu (Second Level) for Your Main Menu
• z-index - Setting the Order of Overlapping Elements
• Exercise: Create Box Informing about Cookie Usage at the Bottom of Page
• How to React to Trolls That '˜Overflow' Your Content?
• Aligning SVG Icons with Text Using display: flex;
• Centering Element Vertically and Horizontally - Modal Box

HTML

• Semantic Tags: article, aside, section, nav, main, header

CSS 3 Grid

• Grid Template, Row and Column, Gaps, and Auto Expanding
• Grid Areas - Name Areas for Your Grid
• Exercise: Change the Place of 'nav' Bar Using Grid Area and @media Queries