Master HTML and CSS by building real world projects

Focused View

Anisul Islam

16:10:40

146 View

1 - HTML5 Basics

1 - Environment setup Visual Studio Code.mp4

01:56

1 - HTML Quiz 1.html

1 - My GitHub Link.txt

2 - HTML Quiz 2.html

2 - Markdown Language.mp4

01:57

2 - learn more about markdown syntax.zip

3 - HTML Quiz 3.html

3 - What is HTML Why HTML.mp4

02:32

4 - HTML Tags their types.mp4

04:20

5 - HTML Attributes.mp4

02:23

6 - Basic Structure of HTML File.mp4

04:20

7 - Head Tags Basic Usage.mp4

03:31

8 - Head Tags Advanced Usage SEO Checking.mp4

10:13

9 - How To Validate HTML File.mp4

03:44

10 - HTML Comments.mp4

04:08

11 - HTML Headings.mp4

06:33

12 - HTML Line Break Paragraph.mp4

04:47

13 - HTML Text Formatting Tags.mp4

04:38

14 - HTML Entity Symbol.mp4

03:32

15 - Font Awesome Icon Icon Font Extension.mp4

05:46

16 - HTML List Part1.mp4

06:15

17 - HTML List Part2.mp4

05:07

18 - HTML List Part3.mp4

02:16

19 - HTML List Part4 Description List.mp4

02:03

20 - HTML Link.mp4

06:48

21 - How To Create Clickable Icon.mp4

02:57

22 - How To Add Image.mp4

04:39

23 - How To Get Images From Unsplash.mp4

01:15

24 - How To Host Image On Server.mp4

02:08

25 - How To Add A Map Using iframe.mp4

03:47

2 - HTML5 Advanced

4 - HTML Quiz 4.html

26 - How To Add Any Website Using iframe.mp4

01:00

27 - How To Add A YouTube Video Using iframe.mp4

01:48

28 - How to Add Audio Video.mp4

02:00

29 - HTML Table.mp4

07:51

30 - HTML Form Part1 Basic Form.mp4

07:09

31 - HTML Form Part2 Accessible Form.mp4

04:22

32 - HTML Form Part3 Radio Button Text Area.mp4

04:56

33 - Send Form Data To Email Address.mp4

04:25

34 - Web Accessibility Part1 Testing Web Accessibility.mp4

03:53

35 - Web Accessibility Part2 Semantic vs NonSemantic HTML.mp4

07:26

36 - Web Accessibility Part3.mp4

02:39

37 - Web Accessibility Part4 role arialabel.mp4

03:45

3 - CSS Basics

38 - CSS Module Outline.mp4

01:34

39 - Why CSS CSS Rules Syntax.mp4

04:25

40 - Inline CSS.mp4

04:55

41 - Internal CSS.mp4

03:03

42 - External CSS.mp4

04:43

43 - CSS Selectors Combinators.mp4

02:24

44 - Element Grouping Selectors.mp4

04:46

45 - Nested Universal Selectors.mp4

07:39

46 - ID Selectors.mp4

04:32

47 - Class Selectors.mp4

05:12

48 - HTML To CSS Auto Completion extension.mp4

02:45

49 - Attribute Selectors.mp4

05:33

50 - Pseudo class Pseudo element Selector.mp4

14:05

51 - Descendant Child Adjacent general sibling Selectors.mp4

06:51

52 - Typography Font Properties.mp4

07:17

53 - Typography How to add google font.mp4

04:58

54 - Typography How to add color.mp4

06:48

55 - Typography How to format Text.mp4

08:24

56 - Box Model Content Padding.mp4

07:26

57 - Box Model border Margin.mp4

05:31

58 - boxsizing properties.mp4

07:57

59 - Typography How to add style icons.mp4

05:27

60 - inline vs inlineblock vs block elements.mp4

09:08

61 - width vs maxwidth properties.mp4

04:46

62 - opacity overflow properties.mp4

07:05

63 - background properties.mp4

08:20

4 - CSS Advanced

64 - Variables Filter.mp4

08:44

65 - shadows card design.mp4

11:11

66 - Layout design float.mp4

15:52

67 - Layout design Positioning.mp4

12:24

68 - Layout design fixed navbar zindex.mp4

06:56

69 - layout design without flex layout.mp4

12:16

70 - layout design with flex layout.mp4

10:16

71 - layout design Task 1.mp4

02:07

72 - layout design flex item.mp4

07:26

73 - layout design Task 2 Task 3.mp4

05:26

74 - layout design Task 4.mp4

05:56

75 - Layout design CSS FlexBox cheatsheet.mp4

01:57

76 - Layout design Grid layout and refactoring codes.mp4

04:35

77 - Layout design flex layout again.mp4

07:30

78 - Layout design Grid Layout example.mp4

08:44

79 - Layout design grid item.mp4

05:28

80 - Responsive web design basics.mp4

03:47

81 - Responsive web design media query.mp4

15:13

82 - Responsive web design final part.mp4

14:10

83 - how to create circle.mp4

04:43

84 - Transition property.mp4

10:05

85 - Transition Task 6.mp4

02:00

86 - Transform property part1.mp4

05:01

87 - Transform property part2 Task 7.mp4

07:51

88 - Animation part1.mp4

05:51

89 - Create a circle Task 8.mp4

01:31

90 - Animation part2.mp4

11:29

91 - Selectors priority.mp4

11:02

92 - Specificity priority score calculation.mp4

05:26

93 - Problems without BEM Architecture.mp4

15:28

94 - BEM Architecture Block Element Modifier.mp4

14:12

95 - BEM practice extension.mp4

06:31

5 - Project 1 Blog Website

96 - blog project demo.mp4

01:41

97 - basic setup for the blog project.mp4

11:32

98 - Navbar design.mp4

14:42

99 - Responsive Navbar design.mp4

05:55

100 - Banner design.mp4

14:36

100 - blog project github repository.zip

101 - Responsive Banner Section Design.mp4

09:55

102 - Design About Section.mp4

19:49

103 - Responsive About Section Design.mp4

03:38

104 - Design Archive Section.mp4

13:30

105 - Responsive Archives Section Design.mp4

03:16

106 - Design Blog Post Section.mp4

19:02

107 - Responsive Blog Post Section.mp4

03:32

108 - Design Contact Section.mp4

13:18

109 - Responsive Contact Section Design.mp4

02:38

110 - Design Footer section.mp4

21:39

111 - Add Collapsible menu.mp4

11:19

112 - Deploy Website On Netlify.mp4

04:55

6 - Project 2 Ecommerce website

113 - Project demo.mp4

04:59

114 - Project setup.mp4

07:45

115 - Create Navbar.mp4

09:25

116 - Design Navbar.mp4

11:02

117 - Responsive Navbar.mp4

06:46

118 - Collapsible Navbar.mp4

05:08

119 - Create Design Footer.mp4

05:45

120 - Setup All Other Pages.mp4

04:12

121 - Create Banner.mp4

08:24

122 - Design Banner.mp4

10:23

123 - Create Sidebar.mp4

12:58

124 - Design Sidebar.mp4

03:21

125 - Crate Design Action Section.mp4

08:40

126 - Create A Single Product.mp4

06:57

127 - Design A Single Product.mp4

10:00

128 - Create Design The Badge.mp4

06:04

129 - Create Multiple Products.mp4

05:51

130 - Create Pagination.mp4

03:46

131 - Design Pagination.mp4

05:21

132 - Create Product Details Page.mp4

08:26

133 - Design Product Details Page.mp4

03:08

134 - Create Cart Items Section.mp4

12:53

135 - Design Cart Items Section.mp4

07:55

136 - Create Cart Payment Section.mp4

04:29

137 - Design Cart Payment Section.mp4

05:30

138 - Create Design Profile Page.mp4

10:24

139 - Create Register Page.mp4

07:11

140 - Design Register Page.mp4

07:57

141 - Create Design Login Page.mp4

04:27

142 - Create Contact Page.mp4

08:16

143 - Design Contact Page.mp4

04:08

144 - Deploy The Project On Netlify.mp4

04:41

Description

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

Who is this for?

All Level

Very friendly for Beginners

Anyone who wants to be a web designer / web developer

More details

Description
Requirements
Basic computer skills
A 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 Typography
HTML Lists, Link, Media
HTML Table, Form
Web Accessibility
CSS Selectors, combinators
CSS Box Model
CSS Layout design - float, positioning, flex, grid
CSS Responsive Web DesignÂ Â (RWD)
CSS Transform, Transition, Animation
CSS BEM Architecture
Blog Project
E-commerce Project
Who this course is for:
All Level
Very friendly for Beginners
Anyone who wants to be a web designer / web developer

User Reviews

Rating

average 0

Total votes0

Focused display

I have taught millions online and offline for the last ten years. I am a passionate computer programming teacher. I have worked in a few software companies as well. I have worked as a software developer trainer. I have done my bachelor's in Computer Science and Engineering, and a master's in Software, Web and Cloud.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.