ittehadzumar/web-design-master-class

Stack Learner - Web Design Master Class

In this repository, you will find source codes, explanations, and other resources for Web Design Master Class. It is an open-source repository and feels free to add documentation, examples, and other references when necessary. Please create issues when you get confused or if something does not work. Other members will help you to solve your issues.

Quick Links:

Youtube Playlist Link

Source Codes

Community Driven Examples

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
14. CSS Transformations
15. CSS Transitions
16. CSS Animations
17. HTML Head
18. HTML Link
19. HTML List
20. Project 1 - Navigation Bar
21. Project 2 - HTML Dropdown Design
22. Project 3 - HTML Mega
23. Project 4 - HTML Table Design
24. Project 5 - HTML Form Design
25. Project 6 - Image Gallery
26. Project 7 - Single Page Portfolio
27. Project 8 - Multi Page Blog
28. CSS Responsive Design
29. CSS Frameworks
30. Bootstrap 5 Layouts
31. Bootstrap 5 Components
32. Bootstrap 5 Utilities
33. Project - 9 Bootstrap 5 Blog Design
34. CSS Programming using SCSS
35. Project 10 - Corporate Website
36. Project 11 - ECommerce Website