Master HTML and CSS by building real world projects

سرفصل های دوره

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

1 - HTML5 Basics

1 - Environment setup Visual Studio Code

1 - HTML Quiz 1.html

1 - My GitHub Link.txt

2 - HTML Quiz 2.html

2 - Markdown Language

2 - learn more about markdown syntax.zip

3 - HTML Quiz 3.html

3 - What is HTML Why HTML

4 - HTML Tags their types

5 - HTML Attributes

6 - Basic Structure of HTML File

7 - Head Tags Basic Usage

8 - Head Tags Advanced Usage SEO Checking

9 - How To Validate HTML File

10 - HTML Comments

11 - HTML Headings

12 - HTML Line Break Paragraph

13 - HTML Text Formatting Tags

14 - HTML Entity Symbol

15 - Font Awesome Icon Icon Font Extension

16 - HTML List Part1

17 - HTML List Part2

18 - HTML List Part3

19 - HTML List Part4 Description List

20 - HTML Link

21 - How To Create Clickable Icon

22 - How To Add Image

23 - How To Get Images From Unsplash

24 - How To Host Image On Server

25 - How To Add A Map Using iframe

2 - HTML5 Advanced

4 - HTML Quiz 4.html

26 - How To Add Any Website Using iframe

27 - How To Add A YouTube Video Using iframe

28 - How to Add Audio Video

29 - HTML Table

30 - HTML Form Part1 Basic Form

31 - HTML Form Part2 Accessible Form

32 - HTML Form Part3 Radio Button Text Area

33 - Send Form Data To Email Address

34 - Web Accessibility Part1 Testing Web Accessibility

35 - Web Accessibility Part2 Semantic vs NonSemantic HTML

36 - Web Accessibility Part3

37 - Web Accessibility Part4 role arialabel

3 - CSS Basics

38 - CSS Module Outline

39 - Why CSS CSS Rules Syntax

40 - Inline CSS

41 - Internal CSS

42 - External CSS

43 - CSS Selectors Combinators

44 - Element Grouping Selectors

45 - Nested Universal Selectors

46 - ID Selectors

47 - Class Selectors

48 - HTML To CSS Auto Completion extension

49 - Attribute Selectors

50 - Pseudo class Pseudo element Selector

51 - Descendant Child Adjacent general sibling Selectors

52 - Typography Font Properties

53 - Typography How to add google font

54 - Typography How to add color

55 - Typography How to format Text

56 - Box Model Content Padding

57 - Box Model border Margin

58 - boxsizing properties

59 - Typography How to add style icons

60 - inline vs inlineblock vs block elements

61 - width vs maxwidth properties

62 - opacity overflow properties

63 - background properties

4 - CSS Advanced

64 - Variables Filter

65 - shadows card design

66 - Layout design float

67 - Layout design Positioning

68 - Layout design fixed navbar zindex

69 - layout design without flex layout

70 - layout design with flex layout

71 - layout design Task 1

72 - layout design flex item

73 - layout design Task 2 Task 3

74 - layout design Task 4

75 - Layout design CSS FlexBox cheatsheet

76 - Layout design Grid layout and refactoring codes

77 - Layout design flex layout again

78 - Layout design Grid Layout example

79 - Layout design grid item

80 - Responsive web design basics

81 - Responsive web design media query

82 - Responsive web design final part

83 - how to create circle

84 - Transition property

85 - Transition Task 6

86 - Transform property part1

87 - Transform property part2 Task 7

88 - Animation part1

89 - Create a circle Task 8

90 - Animation part2

91 - Selectors priority

92 - Specificity priority score calculation

93 - Problems without BEM Architecture

94 - BEM Architecture Block Element Modifier

95 - BEM practice extension

5 - Project 1 Blog Website

96 - blog project demo

97 - basic setup for the blog project

98 - Navbar design

99 - Responsive Navbar design

100 - Banner design

100 - blog project github repository.zip

101 - Responsive Banner Section Design

102 - Design About Section

103 - Responsive About Section Design

104 - Design Archive Section

105 - Responsive Archives Section Design

106 - Design Blog Post Section

107 - Responsive Blog Post Section

108 - Design Contact Section

109 - Responsive Contact Section Design

110 - Design Footer section

111 - Add Collapsible menu

112 - Deploy Website On Netlify

6 - Project 2 Ecommerce website

113 - Project demo

114 - Project setup

115 - Create Navbar

116 - Design Navbar

117 - Responsive Navbar

118 - Collapsible Navbar

119 - Create Design Footer

120 - Setup All Other Pages

121 - Create Banner

122 - Design Banner

123 - Create Sidebar

124 - Design Sidebar

125 - Crate Design Action Section

126 - Create A Single Product

127 - Design A Single Product

128 - Create Design The Badge

129 - Create Multiple Products

130 - Create Pagination

131 - Design Pagination

132 - Create Product Details Page

133 - Design Product Details Page

134 - Create Cart Items Section

135 - Design Cart Items Section

136 - Create Cart Payment Section

137 - Design Cart Payment Section

138 - Create Design Profile Page

139 - Create Register Page

140 - Design Register Page

141 - Create Design Login Page

142 - Create Contact Page

143 - Design Contact Page

144 - Deploy The Project On Netlify

139,000 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy-Training