jorjishasan/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
7. CSS Layout using Floats
8. CSS Flexbox
9. CSS Grid Layout
10. CSS Display Properties
11. CSS Positions
12. CSS Pseudo Classes and Elements
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