README.MD

Course Curriculum

1. Introduction

• 1.1 Welcome - Web Design Master Class

• 1.2 Important Announcement | Upload Schedule | Support | GitHub Contribution

2. Environment Setup

• 2.1 Environment Setup Introduction
• 2.2 Install Google Chrome Browser
• 2.3 Chrome Extensions for Web Designers
  • 2.3.1 WhatFont
  • 2.3.1 (Issue Solved) Issue Fixed - Google Chrome CSS Overview
  • 2.3.2 ColorZilla
  • 2.3.3 Page Ruler Redux
  • 2.3.4 CSS Viewer
• 2.4 Install Visual Studio Code
• 2.5 Important VSCode Extensions
  • 2.5.1 Auto Close Tag
  • 2.5.2 Auto Rename Tag
  • 2.5.3 Bootstrap 4, Font awesome 4 or (for Bootstrap 5) Bootstrap 5 & Font awesome Snippets
  • 2.5.4 Code Runner
  • 2.5.5 Code Spell Checker
  • 2.5.6 Color Highlight
  • 2.5.7 Git History
  • 2.5.8 GitLens - Git supercharged
  • 2.5.9 IntelliSense for CSS class names in HTML
  • 2.5.10 Live Server
  • 2.5.11 Lorem ipsum VScode(Emmet) already has this feature. Type lorem and number of word and hit tab. Example. lorem100
  • 2.5.12 (File Icon Theme) Material Icon Theme
  • 2.5.13 Open in Browser
  • 2.5.14 Prettier - Code formatter
  • 2.5.15 (File Icon Theme) vscode-icons
  • 2.5.16 (Theme) Dracula Official
  • 2.5.17 (Font) Fira Code
  • 2.5.18 Goto Settings > search "font family" > set font to "Fira Code" (without quote)
  • 2.5.19 Goto Settings > search "font ligature" > open in json > set "editor.fontLigatures": true
• 2.6 Install Git to Your Machine
• 2.7 Install NodeJS to Your Machine
• 2.8 Install Windows Terminal 1.0
• 2.9 Install Postman - A REST API Client

3. Play with HTML & CSS

• 3.1 Introduction of play with HTML and CSS chapter
• 3.2 What is html
• 3.3 How to write html code
• 3.4 HTML attribute
• 3.5 What is CSS
• 3.6 How to style HTML using CSS
• 3.7 How to link external CSS file
• 3.8 Common CSS selectors
• 3.9 How to link Google Font
• 3.10 Create a section using div tag

4. HTML Common Tags

• 4.1 Two Types of HTML Elements
• 4.2 HTML Inline Elements
• 4.3 HTML Block Elements
• 4.4 HTML5 Semantic Elements

5. CSS Units

• 5.1 Type of CSS Units
• 5.2 CSS Absolute Length Units
• 5.3 CSS Relative Length Units

6. CSS Box Model

• 6.1 What is box model
• 6.2 Box model in action
• 6.3 Box sizing border box

7. CSS Layout using Floats

• 7.1 How to Place Two Divs Side by Side
• 7.2 Float Creates an Invisible Layers
• 7.3 Understand Floats and Clearfix
• 7.4 How to Position Image Inside Text

8. CSS Flexbox

• 8.1 Understand CSS Flexbox
• 8.2 Understand CSS Flex Container
• 8.3 CSS Flex Container Properties
• 8.4 Explore CSS Flex Items

9. CSS Grid Layout

• 9.1 Understand CSS Grid Layout in Bangla

10. CSS Display Properties

• 10.1 What Is Display Property
• 10.2 Understand Inline Element And Block Element In CSS
• 10.3 Understand CSS Inline Block In Details
• 10.4 Display None And Visibility Hidden Property In CSS

11. CSS Positions

• 11.1 What Is Position In CSS
• 11.2 Understand Fixed Position In CSS
• 11.3 Understand Relative Position In CSS
• 11.4 Absolute Position In CSS
• 11.5 Z-Index In CSS
• 11.6 Z - Index Problem Resolved
• 11.7 Sticky Position In CSS
• 11.8 Understand CSS Overflow Property

12. CSS Pseudo Classes and Elements

• 12.1 Understand Pseudo Classes & Pseudo Elements
• 12.2 CSS Common Pseudo Classes In Bangla
• 12.3 CSS Before & After Pseudo Elements In Bangla
• 12.4 CSS First Letter, First Line, Marker & Selection

13. CSS Advanced Common Topics

• 13.1 CSS Rounded Corner | Advance CSS Common Topic
• 13.2 CSS Background | Advance CSS Common Topic
• 13.3 CSS Colors | Advance CSS Common Topic
• 13.4 CSS Gradients | Advance CSS Common Topic
• 13.5 CSS Box Shadow | Advance CSS Common Topic
• 13.6 CSS Object Fit Property | Advance CSS Common Topic

14. CSS Transformations

• 14.1 What is CSS Transform
• 14.2 Position Element With CSS Translate Property
• 14.3 Understand CSS Rotation
• 14.4 Understand CSS Scale Property
• 14.5 Skew Element With CSS Skew Property
• 14.6 Understand CSS Matrix Property
• 14.7 Transform Element With CSS 3D Transformation Property

15. CSS Transitions

• 15.1 CSS Transition Property
• 15.2 CSS Transition Timing Function
• 15.3 Cubic Bazier Function

16. CSS Animations

• 16.1 Let's Explore CSS Animations
• 16.2 Iteration And Direction In CSS Animation
• 16.3 Fill Mode In CSS Animation
• 16.4 CSS Animation Shorthand

17. HTML Head

• 17.1 HTML Head & Meta Tags

18. HTML Link

• Different States of HTML Links

19. HTML List

• 19.1 Understand HTML Lists
• 19.2 Understand HTML Ordered Lists
• 19.3 Understand HTML Unordered Lists
• 19.4 Understand HTML Description Lists

20. Project 1 - Navigation Bar

• 20.1 Create Navigation Bar Markup
• 20.2 Add Style To navbar
• 20.3 Create Navigation Bar Brand Design
• 20.4 Create Navbar Left Side Menu
• 20.5 Create Navbar Right Side Menu

21. Project 2 - HTML Dropdown Design

• 21.1 Create Dropdown Markup
• 21.2 Create Dropdown Base Design
• 21.3 Dropdown Item Design

22. Project 3 - HTML Mega

• 22.1 Setup Dropdown Menu
• 22.2 Structure Mega Menu
• 22.3 Style Mega Menu

23. Project 4 - HTML Table Design

• 23.1 Understand HTML Table
• 23.2 Markup Table Element
• 23.3 Style Table Element

24. Project 5 - HTML Form Design

• 24.1 HTML Form And Attributes
• 24.2 HTML Form Elements
• 24.3 Explore HTML Input Types
• 24.4 Let's Create A Simple Form
• 24.5 Let's Markup A Complex Form
• 24.6 Complex Form Design

25. Project 6 - Image Gallery

• 25.1 Let's Create Simple Image Gallery Project
• 25.2 Center Align The Gallery
• 25.3 Stretch Gallery Images
• 25.4 Masonry Image Gallery

26. Project 7 - Single Page Portfolio

• 26.1 Single Page Portfolio Project Intro
• 26.2 Project Part 1 - Planing On Figma
• 26.3 Single Page Portfolio Project Part 2
• 26.4 Single Page Portfolio Project Part 3
• 26.5 Single Page Portfolio Project Part 4

27. Project 8 - Multi Page Blog

• 27.1 Multi Page Blog Navigation Bar
• 27.2 Multi Page Blog Project Footer & Layout
• 27.3 Multi Page Blog- Home Page & Blog Page
• 27.4 Multi-Page Blog Project Details page
• 27.5 Multi Page Blog Project Contact Form

28. CSS Responsive Design

• 28.1 What is Responsive Web Design
• 28.2 How To Design Responsive Website
• 28.3 Let’s Understand Viewport
• 28.4 Understand CSS Media Query
• 28.5 Understand Responsive Flexbox

29. CSS Frameworks

• 29.1 Our Own CSS Framework
• 29.2 What is CSS Framework
• 29.3 Top 5 CSS Frameworks
• 29.4 Let’s Understand Bootstrap

30. Bootstrap 5 Layouts

• 30.1 Bootstrap 5 Breakpoint
• 30.2 Bootstrap 5 Containers
• 30.3 Bootstrap Grid System
• 30.4 Responsive Grid Design

31. Bootstrap 5 Components

• 31.1 Bootstrap 5 Navbar Components
• 31.2 Bootstrap 5 Card Components
• 31.3 Bootstrap 5 List Group Component
• 31.4 Bootstrap 5 Table Component
• 31.5 Bootstrap 5 Form Component

32. Bootstrap 5 Utilities

• 32.1 Overview of Bootstrap Utilities

33. Project 9 - Bootstrap 5 Blog Design

• 33.1 Blog Design With Bootstrap 5 - Project Overview
• 33.2 Blog Design With Bootstrap 5 - Project Scaffolding
• 33.3 Blog Design With Bootstrap 5 - Creating Navbar
• 33.4 Blog Design With Bootstrap 5 - Creating Footer

34. CSS Programming using SCSS
35. Project 10 - Corporate Website
36. Project 11 - ECommerce Website