Design real-world and responsive websites
Basics to advanced HTML including Web accessibility
CSS Advanced Layout including flex, grid layout
Advanced CSS including Specificity calculation, BEM Architecture
How to design e-commerce and blog website
Best practices for coding
Essential extensions for saving time
Requirements
A detailed effective course on HTML & CSS for beginners or even students with intermediate HTML & CSS knowledge. You will have all the real-life experience you should have when starting your journey to become a software developer or web developer.
Is this course suitable for you?
Yes, If you already know the basics of computers, you can start this course. If you are interested in learning HTML and CSS, you can start your journey with this course. This course will also help if someone wants to build real-world projects such as e-commerce and blog projects to improve their skills.
Get Instant Notification of New Courses on our
Telegram channel.
What makes this course special?
In this course, I have spent a lot of time on the theoretical explanation, which will support you in understanding the practical implementations of many topics easily. I have added many challenges for you so that you can test your learning immediately after completing a lecture. You will learn about many extensions, saving 50% of the time when coding. This course will make sure to make you advance in this field.
What are some of the course highlights?
There are so many exciting features covered in this one course; you will be blown away by excitement and joy. Here are some of the exciting features you will learn about HTML & CSS:
- HTML Typography
- HTML Lists, Link, Media
- HTML Table, Form
- Web Accessibility
- CSS Selectors, combinators
- CSS Box Model
- CSS Layout design – float, positioning, flex, grid
- CSS Responsive Web Design (RWD)
- CSS Transform, Transition, Animation
- CSS BEM Architecture
- Blog Project
- E-commerce Project
HTML5 (Basics)
Environment setup – Visual Studio Code
Markdown Language
What is HTML? Why HTML?
HTML Tags & their types
HTML Attributes
Basic Structure of HTML File
HTML Quiz 1
Head Tag’s Basic Usage
Head Tag’s Advanced Usage & SEO Checking
How To Validate HTML File
HTML Comments
HTML Headings
HTML Line Break & Paragraph
HTML Text Formatting Tags
HTML Entity & Symbol
Font Awesome Icon & Icon Font Extension
HTML Quiz 2
HTML List (Part-1)
HTML List (Part-2)
HTML List (Part-3)
HTML List (Part-4) Description List
HTML Link
How To Create Clickable Icon
How To Add Image
How To Get Images From Unsplash
How To Host Image On Server
How To Add A Map Using iframe
HTML Quiz 3
HTML5 (Advanced)
How To Add Any Website Using iframe
How To Add A YouTube Video Using iframe
How to Add Audio & Video
HTML Table
HTML Form (Part-1) – Basic Form
HTML Form (Part-2) – Accessible Form
HTML Form (Part-3) – Radio Button, Text Area
Send Form Data To Email Address
Web Accessibility (Part-1) – Testing Web Accessibility
Web Accessibility (Part-2) – Semantic vs Non-Semantic HTML
Web Accessibility (Part-3)
Web Accessibility (Part-4) – role, aria-label
HTML Quiz 4
CSS (Basics)
CSS Module Outline
Why CSS? CSS Rules Syntax
Inline CSS
Internal CSS
External CSS
CSS Selectors & Combinators
Element & Grouping Selectors
Nested & Universal Selectors
ID Selectors
Class Selectors
HTML To CSS Auto Completion extension
Attribute Selectors
Pseudo class & Pseudo element Selector
Descendant, Child, Adjacent & general sibling Selectors
CSS Quiz 1
Typography | Font Properties
Typography | How to add google font
Typography | How to add color
Typography | How to format Text
Box Model | Content, Padding
Box Model | border, Margin
box-sizing properties
Typography | How to add & style icons
inline vs inline-block vs block elements
width vs max-width properties
opacity & overflow properties
background properties
CSS Quiz 2
CSS (Advanced)
Variables & Filter
shadows & card design
Layout design – float
Layout design – Positioning
Layout design – fixed navbar & z-index
layout design – without flex layout
layout design – with flex layout
layout design – (Task 1)
layout design – flex item
layout design – (Task 2 & Task 3)
layout design – (Task 4)
Layout design – CSS FlexBox cheatsheet
Layout design – Grid layout and refactoring codes
Layout design – flex layout again
Layout design – Grid Layout example
Layout design – grid item
CSS Quiz 3
Responsive web design – basics
Responsive web design – media query
Responsive web design – final part
how to create circle
Transition property
Transition (Task 6)
Transform property part-1
Transform property part-2 (Task 7)
Animation part-1
Create a circle (Task 8)
Animation part-2
Selectors priority
Specificity / priority score calculation
Problems without BEM Architecture
BEM Architecture – Block, Element, Modifier
BEM practice & extension
CSS Quiz 4
Project 1: Blog Website
blog project demo
basic setup for the blog project
Navbar design
Responsive Navbar design
Banner design
Responsive Banner Section Design
Design About Section
Responsive About Section Design
Design Archive Section
Responsive Archives Section Design
Design Blog Post Section
Responsive Blog Post Section
Design Contact Section
Responsive Contact Section Design
Design Footer section
Add Collapsible menu
Deploy Website On Netlify
Project 2: E-commerce website
Project demo
Project setup
Create Navbar
Design Navbar
Responsive Navbar
Collapsible Navbar
Create & Design Footer
Setup All Other Pages
Create Banner
Design Banner
Create Sidebar
Design Sidebar
Crate & Design Action Section
Create A Single Product
Design A Single Product
Create & Design The Badge
Create Multiple Products
Create Pagination
Design Pagination
Create Product Details Page
Design Product Details Page
Create Cart Items Section
Design Cart Items Section
Create Cart Payment Section
Design Cart Payment Section
Create & Design Profile Page
Create Register Page
Design Register Page
Create & Design Login Page
Create Contact Page
Design Contact Page
Deploy The Project On Netlify
