Master Html And Css By Building Real World Projects

Learn css, flex, grid, web accessibility, responsiveness, BEM architecture, animation by building e-commerce project

What you'll learn

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

No coding experience is required

A computer

Description

RequirementsBasic computer skillsA 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.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 TypographyHTML Lists, Link, MediaHTML Table, FormWeb AccessibilityCSS Selectors, combinatorsCSS Box ModelCSS Layout design - float, positioning, flex, gridCSS Responsive Web Design   (RWD)CSS Transform, Transition, AnimationCSS BEM Architecture Blog ProjectE-commerce Project

Overview

Section 1: HTML5 (Basics)

Lecture 1 Environment setup - Visual Studio Code

Lecture 2 Markdown Language

Lecture 3 What is HTML? Why HTML?

Lecture 4 HTML Tags & their types

Lecture 5 HTML Attributes

Lecture 6 Basic Structure of HTML File

Lecture 7 Head Tag's Basic Usage

Lecture 8 Head Tag's Advanced Usage & SEO Checking

Lecture 9 How To Validate HTML File

Lecture 10 HTML Comments

Lecture 11 HTML Headings

Lecture 12 HTML Line Break & Paragraph

Lecture 13 HTML Text Formatting Tags

Lecture 14 HTML Entity & Symbol

Lecture 15 Font Awesome Icon & Icon Font Extension

Lecture 16 HTML List (Part-1)

Lecture 17 HTML List (Part-2)

Lecture 18 HTML List (Part-3)

Lecture 19 HTML List (Part-4) Description List

Lecture 20 HTML Link

Lecture 21 How To Create Clickable Icon

Lecture 22 How To Add Image

Lecture 23 How To Get Images From Unsplash

Lecture 24 How To Host Image On Server

Lecture 25 How To Add A Map Using iframe

Section 2: HTML5 (Advanced)

Lecture 26 How To Add Any Website Using iframe

Lecture 27 How To Add A YouTube Video Using iframe

Lecture 28 How to Add Audio & Video

Lecture 29 HTML Table

Lecture 30 HTML Form (Part-1) - Basic Form

Lecture 31 HTML Form (Part-2) - Accessible Form

Lecture 32 HTML Form (Part-3) - Radio Button, Text Area

Lecture 33 Send Form Data To Email Address

Lecture 34 Web Accessibility (Part-1) - Testing Web Accessibility

Lecture 35 Web Accessibility (Part-2) - Semantic vs Non-Semantic HTML

Lecture 36 Web Accessibility (Part-3)

Lecture 37 Web Accessibility (Part-4) - role, aria-label

Section 3: CSS (Basics)

Lecture 38 CSS Module Outline

Lecture 39 Why CSS? CSS Rules Syntax

Lecture 40 Inline CSS

Lecture 41 Internal CSS

Lecture 42 External CSS

Lecture 43 CSS Selectors & Combinators

Lecture 44 Element & Grouping Selectors

Lecture 45 Nested & Universal Selectors

Lecture 46 ID Selectors

Lecture 47 Class Selectors

Lecture 48 HTML To CSS Auto Completion extension

Lecture 49 Attribute Selectors

Lecture 50 Pseudo class & Pseudo element Selector

Lecture 51 Descendant, Child, Adjacent & general sibling Selectors

Lecture 52 Typography | Font Properties

Lecture 53 Typography | How to add google font

Lecture 54 Typography | How to add color

Lecture 55 Typography | How to format Text

Lecture 56 Box Model | Content, Padding

Lecture 57 Box Model | border, Margin

Lecture 58 box-sizing properties

Lecture 59 Typography | How to add & style icons

Lecture 60 inline vs inline-block vs block elements

Lecture 61 width vs max-width properties

Lecture 62 opacity & overflow properties

Lecture 63 background properties

Section 4: CSS (Advanced)

Lecture 64 Variables & Filter

Lecture 65 shadows & card design

Lecture 66 Layout design - float

Lecture 67 Layout design - Positioning

Lecture 68 Layout design - fixed navbar & z-index

Lecture 69 layout design - without flex layout

Lecture 70 layout design - with flex layout

Lecture 71 layout design - (Task 1)

Lecture 72 layout design - flex item

Lecture 73 layout design - (Task 2 & Task 3)

Lecture 74 layout design - (Task 4)

Lecture 75 Layout design - CSS FlexBox cheatsheet

Lecture 76 Layout design - Grid layout and refactoring codes

Lecture 77 Layout design - flex layout again

Lecture 78 Layout design - Grid Layout example

Lecture 79 Layout design - grid item

Lecture 80 Responsive web design - basics

Lecture 81 Responsive web design - media query

Lecture 82 Responsive web design - final part

Lecture 83 how to create circle

Lecture 84 Transition property

Lecture 85 Transition (Task 6)

Lecture 86 Transform property part-1

Lecture 87 Transform property part-2 (Task 7)

Lecture 88 Animation part-1

Lecture 89 Create a circle (Task 8)

Lecture 90 Animation part-2

Lecture 91 Selectors priority

Lecture 92 Specificity / priority score calculation

Lecture 93 Problems without BEM Architecture

Lecture 94 BEM Architecture - Block, Element, Modifier

Lecture 95 BEM practice & extension

Section 5: Project 1: Blog Website

Lecture 96 blog project demo

Lecture 97 basic setup for the blog project

Lecture 98 Navbar design

Lecture 99 Responsive Navbar design

Lecture 100 Banner design

Lecture 101 Responsive Banner Section Design

Lecture 102 Design About Section

Lecture 103 Responsive About Section Design

Lecture 104 Design Archive Section

Lecture 105 Responsive Archives Section Design

Lecture 106 Design Blog Post Section

Lecture 107 Responsive Blog Post Section

Lecture 108 Design Contact Section

Lecture 109 Responsive Contact Section Design

Lecture 110 Design Footer section

Lecture 111 Add Collapsible menu

Lecture 112 Deploy Website On Netlify

Section 6: Project 2: E-commerce website

Lecture 113 Project demo

Lecture 114 Project setup

Lecture 115 Create Navbar

Lecture 116 Design Navbar

Lecture 117 Responsive Navbar

Lecture 118 Collapsible Navbar

Lecture 119 Create & Design Footer

Lecture 120 Setup All Other Pages

Lecture 121 Create Banner

Lecture 122 Design Banner

Lecture 123 Create Sidebar

Lecture 124 Design Sidebar

Lecture 125 Crate & Design Action Section

Lecture 126 Create A Single Product

Lecture 127 Design A Single Product

Lecture 128 Create & Design The Badge

Lecture 129 Create Multiple Products

Lecture 130 Create Pagination

Lecture 131 Design Pagination

Lecture 132 Create Product Details Page

Lecture 133 Design Product Details Page

Lecture 134 Create Cart Items Section

Lecture 135 Design Cart Items Section

Lecture 136 Create Cart Payment Section

Lecture 137 Design Cart Payment Section

Lecture 138 Create & Design Profile Page

Lecture 139 Create Register Page

Lecture 140 Design Register Page

Lecture 141 Create & Design Login Page

Lecture 142 Create Contact Page

Lecture 143 Design Contact Page

Lecture 144 Deploy The Project On Netlify

All Level,Very friendly for Beginners,Anyone who wants to be a web designer / web developer