HTML & CSS Introduction
HTML & CSS Course for Beginners - Learn HTML & CSS Basics
HTML & CSS for Beginners: A Comprehensive Course Guide
Who is this HTML & CSS Course for?
- Complete beginners in HTML and CSS coding
- Learners who want to build a solid foundation in HTML and CSS
- Anyone who wants to build and publish websites from scratch with their own code
Introduction to HTML & CSS Course
HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are essential website building tools. HTML forms the foundation of a website's content and structure. CSS adds the visual presentation – think colors, layout, and responsiveness.
Learning these languages is the first step in becoming a front-end engineer. After going through this course, you'll be able to build and publish your own website. This course also covers basic website mechanisms and provides many examples, so that you can immediately use the suggested techniques.
Throughout this course, you will learn:
- Basic website mechanism
- HTML coding (HTML 5)
- CSS coding (CSS 3)
- How to build and publish websites
How to learn HTML & CSS with this course?
Complete Website Development Journey
Master website development and publishing with ease! Our detailed step-by-step guide makes the process simple and straightforward.
By the end of this course, you’ll have built your own HTML and CSS practice website with practice demos for key HTML elements and CSS properties. You can use the website to review what you learned.
HTML and CSS practice website
You can check the website example here.
Demo SiteA GitHub repository is also available for the demo website code. Check the link below to access the repository.
Demo CodeDesigned for Complete Beginners
This course is designed for a complete beginner. By simply copying and pasting the code snippets into your text file, you can build your own practice website very easily.
Easily copy lengthy code snippets! Simply click the copy icon on the top right of the code section.
Theory and Practice
We believe in a hands-on approach. Our course combines clear explanations of HTML and CSS concepts with step-by-step code snippets.
This lets you learn the theory and immediately apply it through practical exercises, solidifying your understanding and building your skills effectively.
Chapter 1. Overview of Website Development
10 lessons
Chapter Information
Chapter 1. Overview of Website Development
How Websites Work?
Designing, Building and Publishing Websites
Designing Websites
Building Websites – Frontend and Backend Coding
Web App vs. Website
Frontend Coding
Web Framework and CMS
Publishing Websites (Hosting Services)
What Is HTML?
Chapter 2. Preparing for Website Coding
6 lessons
Chapter Information
Chapter 2. Preparing for Website Coding
Two Key Tools to Start Coding Websites
How Browsers Display Web Pages
File Name Rules
Website Directory Structure
Absolute Path vs. Relative Path
Chapter 3. HTML Basics
9 lessons
Chapter Information
Chapter 3. HTML Basics
HTML Element
Attribute
HTML Document Structure
Layout Semantics
Heading and Paragraph Tag
Text-Level Semantics
Space, Line-break and Tag in Content
Comments in HTML Document
Chapter 4. HTML: Add Links and Images
9 lessons
Chapter Information
Chapter 4. HTML: Add Links and Images
Overview of Adding Links and Images
Embed Images – <img>
Image File Format
Add Hyperlinks – <a>
Add Hyperlinks to Images
Add Hyperlinks to Specific Location on Web Page
Link Tag – <link>
Script Tag – <script>
Chapter 5. HTML: Create Lists and Tables
4 lessons
Chapter Information
Chapter 5. HTML: Create Lists and Tables
Create Lists
Create Tables
Combine Table Cells
Chapter 6. HTML: Create Forms
7 lessons
Chapter Information
Chapter 6. HTML: Create Forms
Create Forms
Create Text Input Forms and Submit Button
Radio Button and Checkbox
Select Box
Labels
Auto Complete and Disabled
Chapter 7. Bridging HTML and CSS
6 lessons
Chapter Information
Chapter 7. Bridging HTML and CSS
Block Element vs. Inline Element
Nesting Elements – Parent Elements and Child Elements
Div vs. Span
Global Attribute – Class, ID and Style
Accordion – <Details> and <Summary>
Chapter 8. CSS Basics
11 lessons
Chapter Information
Chapter 8. CSS Basics
What Is CSS?
CSS Syntax
Where To Type CSS?
CSS Basic Selectors
Descendant Selector
Inheritance
Specificity
Reset CSS
Browser Developer Tools for CSS
Comments in CSS Document
Chapter 9. Web Design Basics
6 lessons
Chapter Information
Chapter 9. Web Design Basics
Design Element Representation in HTML and CSS
Key Design Points by CSS
Length
Color Code – HEX and RGB
Color Theme
Chapter 10. CSS: Sizing and Spacing
8 lessons
Chapter Information
Chapter 10. CSS: Sizing and Spacing
CSS Box Model
width and height
padding
margin
Margin and Padding for Specific Side
margin: auto
box-sizing
Chapter 11. CSS: Styling Text and Images
13 lessons
Chapter Information
Chapter 11. CSS: Styling Text and Images
Text Styling Properties
font-size
color
font-family
Web Font and Google Font
font-weight and font-style
text-decoration
line-height and letter-spacing
text-align
vertical-align
Styling Images
float: left and right
Chapter 12. CSS: Styling Backgrounds
8 lessons
Chapter Information
Chapter 12. CSS: Styling Backgrounds
background-color
background-image
background-size
background-repeat
background-position
background-attachment
background (Multiple Properties)
Chapter 13. CSS: Styling Borders and Drawing Lines
8 lessons
Chapter Information
Chapter 13. CSS: Styling Borders and Drawing Lines
border-style
border-color
border-width
border-radius
Border (Multiple Properties)
Borders on Specific Side
Border Radius on Specific Side
Chapter 14. CSS: Layout – Display Property
6 lessons
Chapter Information
Chapter 14. CSS: Layout – Key Concepts and Display Property
Layout Before and After
Layout Key Design Points
Display Property
inline, block and inline-block
display: none
Chapter 15. CSS: Layout – Flex Box
15 lessons
Chapter Information
Chapter 15. CSS: Layout – Flex Box
Flex Box – display: flex
flex-direction
Main Axis and Cross Axis
flex-wrap
justify-content
align-items
align-content
align-self
flex-grow
flex-shrink
flex-basis
margin: auto with Flex Box
Inline Flex Box
Nested Flex Box
Chapter 16. CSS: Styling Lists
5 lessons
Chapter Information
Chapter 16. CSS: Styling Lists
List Styling Properties
list-style-type
list-style-image
list-style-position
Chapter 17. CSS: Styling Components
6 lessons
Chapter Information
Chapter 17. Creating and Styling Components
Components and Layout
Buttons
Cards
Top Bar
Footer and Bottom Bar
Chapter 18. Creating Websites
6 lessons
Chapter Information
Chapter 18. Completing Website Development
Website Structure Design
Live Server
Home (Landing) Page Development
Main (List) Page Development
Content (Detail) Page Development
Chapter 19. Publishing Websites
5 lessons
Chapter Information
Chapter 19. Publishing Websites
Key Steps to Publish Websites
Domain and DNS Server
Favicon
GitHub Pages
Chapter 20. Supplemental Topics
5 lessons
Chapter Information
Chapter 20. Supplemental Topics
Horizontal Rule – <hr>
Line Break – <br>
Reserved Characters and HTML Entities
