Learn Responsive Web Design with 4 Live Projects (2023)

Focused View

Fatah Gabrial

22:33:46

169 View

1 - Getting Started with HTML5 CSS3

1 - Introduction to HTML5 CSS3.mp4

00:59

2 - What you will need.mp4

00:53

3 - Install Code Editor for Development.mp4

01:27

4 - Hello World.mp4

01:56

2 - HTML5 Tags

5 - HTML5 Document Structure.mp4

03:17

6 - HTML5 Basics.mp4

01:53

7 - Headings Paragraphs.mp4

01:39

8 - Text Formatting.mp4

03:37

9 - Links in HTML5.mp4

02:13

10 - Working with Nested Links.mp4

03:20

11 - Lists in HTML5.mp4

02:33

12 - Working with Images.mp4

02:49

13 - Tables in HTML5.mp4

03:42

3 - Forms in HTML5

14 - Forms in HTML5.mp4

03:14

15 - Creating a Contact Form.mp4

02:54

16 - Creating a Login Form.mp4

02:30

17 - Creating a Registration Form.mp4

05:11

4 - Media in HTML5

18 - Grouping Elements.mp4

02:13

19 - HTML5 Media Tags.mp4

02:01

20 - IFrames in HTML5.mp4

04:08

21 - Figure Tag in HTML5.mp4

00:53

22 - Collapse Elements with Details Tag.mp4

02:02

5 - Creating a Simple Website Structure

23 - Creating The Header.mp4

02:36

24 - Creating Nav Menu.mp4

01:21

25 - Creating The Banner.mp4

01:35

26 - Adding Content to Page.mp4

01:38

27 - Creating The Sidebar.mp4

01:36

28 - Building Page Footer.mp4

03:24

29 - Adding Copyright.mp4

00:55

6 - Essentials of CSS CSS

30 - Inline CSS.mp4

02:41

31 - Internal CSS.mp4

02:04

32 - External CSS.mp4

01:31

33 - Box Model in CSS.mp4

03:07

34 - Targeting Elements in CSS.mp4

06:10

35 - Designing with Box Model.mp4

04:47

7 - HTML5 CSS3 Website Project

36 - Building The Container.mp4

04:00

37 - Building The Website Header.mp4

03:38

38 - Creating The Nav Bar.mp4

04:24

39 - Making DropDown Menu.mp4

03:17

40 - Creating Image Slider.mp4

04:04

41 - Making Content Holder.mp4

03:23

42 - Creating Sidebar.mp4

03:21

43 - Making Footer.mp4

08:49

44 - Creating Aboutus Page.mp4

02:16

45 - Creating Services Pages.mp4

03:50

46 - Building The Products Page.mp4

08:57

47 - Building Contact Page.mp4

04:27

48 - Adding NavMenu.mp4

03:43

49 - Responsive Design RWD Explained.mp4

03:54

50 - Animation with CSS3.mp4

06:51

8 - Getting Started with Bootstrap v5

51 - Bootstrap v5 Introduction.mp4

02:55

52 - What you will need.mp4

02:16

52 - bootstrap 52 exercise files.zip

53 - Hello World.mp4

06:30

54 - Bootstrap v5 Document Structure.mp4

01:20

9 - Bootstrap v5 Layout

55 - Breakpoints.mp4

04:02

56 - Containers.mp4

02:28

57 - Grid.mp4

06:01

58 - Grid Options.mp4

05:32

59 - Nesting Rows and Columns.mp4

03:17

60 - Column Vertical Alignment.mp4

06:22

61 - Column Horizontal Alignment.mp4

05:30

62 - Column Wrapping and Column Breaks.mp4

03:27

63 - Reordering and Offsetting Columns.mp4

05:38

64 - Margin Utilities.mp4

06:34

65 - Gutters.mp4

00:49

66 - Horizontal Gutters.mp4

05:17

67 - Vertical Gutters.mp4

02:06

68 - Horizontal and Vertical Gutters.mp4

02:47

10 - Bootstrap v5 Contents

69 - Typography.mp4

04:42

70 - Inline Text Elements.mp4

05:46

71 - Abbreviations and Blockquotes.mp4

05:03

72 - Working with Lists.mp4

05:40

73 - Images in Bootstrap.mp4

06:20

74 - Tables in Bootstrap.mp4

15:36

75 - Table Alignment Nesting and Anatomy.mp4

06:23

76 - Figures in Bootstrap.mp4

03:06

11 - Bootstrap v5 Forms

77 - Forms in Bootstrap.mp4

05:58

78 - Form Control.mp4

13:38

79 - Checks and Radios.mp4

11:38

80 - Range.mp4

03:33

81 - Input Groups.mp4

23:14

82 - Floating Labels.mp4

05:07

83 - Form Layout.mp4

10:11

84 - Horizontal Forms.mp4

06:06

85 - Auto Sizing Forms.mp4

07:28

86 - Inline Forms.mp4

07:10

87 - Form Validation.mp4

08:50

12 - Bootstrap v5 Components

88 - Accordions.mp4

10:04

89 - Alerts.mp4

06:28

90 - Dismissing Alerts.mp4

02:32

91 - Badges.mp4

11:37

92 - Breadcrumb.mp4

06:45

93 - Buttons.mp4

20:54

94 - Button Group.mp4

08:14

95 - Button Toolbar.mp4

04:59

96 - Button Group Alteration.mp4

06:06

97 - Card.mp4

12:39

98 - Card Sizing.mp4

03:05

99 - Card Navigation.mp4

03:44

100 - Card Images.mp4

07:38

101 - Card Styles.mp4

08:48

102 - Carousel.mp4

03:41

103 - Carousel Controls.mp4

03:20

104 - Carousel Indicators.mp4

03:01

105 - Carousel Caption.mp4

03:46

106 - Carousel Fade Effect.mp4

02:12

107 - Carousel Timing.mp4

02:09

108 - Disable Carousel Touch Swiping.mp4

01:13

109 - Carousel Dark Variant.mp4

00:49

110 - Close Button.mp4

02:52

111 - Collapse.mp4

04:19

112 - Horizontal Collapse.mp4

02:47

113 - Multiple Targets.mp4

04:34

114 - Dropdowns.mp4

04:54

115 - Split Button.mp4

03:14

116 - Dropdown Sizing.mp4

02:19

117 - Dark Dropdowns.mp4

01:20

118 - Dropdown Directions.mp4

06:09

119 - Dropup and Dropdown Alignment.mp4

07:22

120 - Menu Items.mp4

06:25

121 - Menu Alignment.mp4

04:40

122 - Dropdown Alignment Options.mp4

06:43

123 - Menu Contents.mp4

03:36

124 - Dropdown Forms.mp4

04:01

125 - Dropdown Options.mp4

04:03

126 - Dropdown Auto Close.mp4

02:42

127 - List Group.mp4

02:24

128 - List Group Links and Buttons.mp4

03:31

129 - List Group Flush.mp4

00:51

130 - Numbered List.mp4

02:36

131 - Horizontal List Groups.mp4

03:05

132 - Contextual List Group Classes.mp4

03:11

133 - List Group with Badges.mp4

02:08

134 - List Group with Custom Content.mp4

02:58

135 - Group Checkboxes and Radios.mp4

02:46

136 - List Group JavaScript Tabs.mp4

09:17

137 - Modals.mp4

06:08

138 - Static Backdrop.mp4

02:02

139 - Scrolling Long Content.mp4

01:53

140 - Vertically Centered.mp4

00:46

141 - Modal Tooltips and Popovers.mp4

06:37

142 - Using Grid system in Modal.mp4

01:28

143 - Varying Modal Content.mp4

09:47

144 - Toggle Between Modals.mp4

06:50

145 - Optional Modal Sizes.mp4

03:06

146 - Navbar.mp4

04:05

147 - Navigation Links.mp4

06:05

148 - Navbar Dropdown.mp4

03:17

149 - Navbar Nested Dropdown.mp4

05:22

150 - Navbar Forms.mp4

01:54

151 - Navbar Input Group.mp4

00:57

152 - Navbar Plain Text.mp4

01:03

153 - Navbar Colors.mp4

02:01

154 - Navbar Containers.mp4

04:00

155 - Navbar Placement.mp4

05:02

156 - Navbar Scrolling.mp4

02:15

157 - Off Canvas Navbar.mp4

10:57

158 - Navs and Tabs.mp4

10:10

159 - Nav Flex Utilities.mp4

02:09

160 - Nav Tabs and Pills with Dropdown.mp4

04:15

161 - Tabs and Pills Behaviors.mp4

12:10

162 - Offcanvas InDepth.mp4

06:58

163 - Offcanvas Scrolling.mp4

02:35

164 - Offcanvas Placement.mp4

02:33

165 - Pagination.mp4

06:15

166 - Placeholders.mp4

08:44

167 - Popovers InDepth.mp4

05:46

168 - Popover Direction.mp4

01:37

169 - Custom Popovers.mp4

03:02

170 - Dismiss on next click.mp4

01:09

171 - Enable Popover on Hover.mp4

00:48

172 - Progress Bars.mp4

03:30

173 - Progress bar height and Background.mp4

01:48

174 - Stripes and Animation.mp4

01:10

175 - Scrollspy.mp4

11:16

176 - Spinners.mp4

01:37

177 - Growing Spinner.mp4

01:03

178 - Spinner Alignment.mp4

04:40

179 - Spinner Sizes.mp4

01:54

180 - Spinner in Buttons.mp4

02:54

181 - Toasts.mp4

16:53

182 - Toast Alignment.mp4

02:46

183 - Tooltips InDepth.mp4

03:40

184 - Custom Tooltip.mp4

02:32

185 - Tooltip Directions.mp4

01:49

186 - HTML in Tooltip.mp4

01:41

187 - Tooltip on Disabled Elements.mp4

01:45

13 - Bootstrap v5 Helpers

188 - Clearfix.mp4

01:41

189 - Colors and Background.mp4

03:41

190 - Colored Links.mp4

01:17

191 - Ratios.mp4

02:42

192 - Positions.mp4

04:18

193 - Stacks.mp4

07:23

194 - Visually Hidden.mp4

00:46

195 - Stretched Link.mp4

02:39

196 - Text Truncate.mp4

02:19

197 - Vertical Rule.mp4

02:13

14 - Bootstrap v5 Utilities

198 - Backgrounds.mp4

01:48

199 - Background Gradients.mp4

00:59

200 - Background Opacity.mp4

02:22

201 - Borders.mp4

03:53

202 - Border Color.mp4

03:06

203 - Border Opacity.mp4

01:56

204 - Border Width.mp4

01:10

205 - Border Radius.mp4

01:49

206 - Rounded Border Sizes.mp4

02:15

207 - Text Colors.mp4

01:34

208 - Text Opacity.mp4

01:39

209 - Display Inline and Block.mp4

02:44

210 - Hiding Elements.mp4

03:31

211 - Display in Print.mp4

02:30

212 - Flex.mp4

02:03

213 - Flex Direction.mp4

05:41

214 - Flex Justify Content.mp4

02:37

215 - Flex Align Items.mp4

03:44

216 - Flex Align Self.mp4

03:58

217 - Flex Fill.mp4

02:39

218 - Flex Grow and Shrink.mp4

03:26

219 - Flex Auto Margins.mp4

01:17

220 - Flex with Align Items.mp4

01:53

221 - Flex Wrap.mp4

02:18

222 - Flex Order.mp4

03:44

223 - Flex Align Content.mp4

03:57

224 - Flex Media Object.mp4

03:36

225 - Responsive Float.mp4

02:35

226 - Interactions.mp4

04:49

227 - Opacity.mp4

01:17

228 - Overflow.mp4

03:02

229 - Position.mp4

02:32

230 - Position Center Elements.mp4

02:23

231 - Position Center Elements within Edges.mp4

03:39

232 - Position Examples Part 1.mp4

08:31

233 - Position Example Part 2.mp4

05:17

234 - Shadow.mp4

02:01

235 - Sizing.mp4

05:28

236 - Spacing.mp4

03:55

237 - Gap.mp4

01:40

238 - Text Alignment.mp4

02:45

239 - Text Wrap.mp4

01:30

240 - Text Break.mp4

01:04

241 - Text Transform.mp4

01:47

242 - Font Size.mp4

01:05

243 - Font weights and italics.mp4

02:31

244 - Line Height.mp4

01:34

245 - Monoscope.mp4

01:06

246 - Reset Color.mp4

01:26

247 - Text Decoration.mp4

01:57

248 - Vertical Alignment.mp4

03:52

249 - Visibility.mp4

00:56

250 - Bootstrap Icons.mp4

06:29

15 - Project 1 EMS Employee Management App

251 - Introduction to EMS20 Application Project.mp4

03:08

251 - ems20 project.zip

252 - Creating The Login Page.mp4

09:04

253 - Creating Dash Nav and Brand Logo.mp4

05:59

254 - Creating The Navbar Toggler.mp4

02:08

255 - Creating Navbar Items.mp4

02:40

256 - Creating Form Fields for Navbar.mp4

04:56

257 - Creating Cards for Dashboard.mp4

03:32

258 - Creating Employees List Page.mp4

01:59

259 - Creating Employees Page Sidebar.mp4

03:37

260 - Creating Employees List Table.mp4

07:15

261 - Creating Add Employee Modal.mp4

04:49

262 - Creating Add Employee Modal Form.mp4

06:49

263 - Creating Details Modal for Employee List.mp4

07:07

264 - Creating Edit Details for Employee List.mp4

05:04

265 - Creating Delete Modal for Employees List.mp4

05:14

266 - Creating Jobs List Page.mp4

01:42

267 - Updating The Job List Page.mp4

03:27

268 - Creating Job List Table.mp4

01:31

269 - Creating Add Job Modal.mp4

02:17

270 - Creating Details Modal for Job.mp4

02:05

271 - Creating Edit Details for Job Modal.mp4

02:52

272 - Creating Delete Modal for Job List.mp4

03:43

16 - Project 2 Blog App with Bootstrap v5

273 - Blog Project Introduction.mp4

01:21

273 - blog20 project.zip

274 - Whats Required For Template Building.mp4

03:03

275 - Creating The Index File.mp4

02:18

276 - Creating The Navbar and Brand Logo.mp4

02:31

277 - Creating Navbar Toggler.mp4

01:27

278 - Creating Navbar Items.mp4

03:00

279 - Creating The Search Field.mp4

02:02

280 - Creating The Home Banner.mp4

06:29

281 - Creating The Subscribe Modal.mp4

06:42

282 - Creating Home Posts Section.mp4

05:48

283 - Creating Blog Footer.mp4

01:19

284 - Adding Custom Effects to Navbar.mp4

02:28

285 - Creating Default Page Header.mp4

03:33

286 - Creating Post Loop For Default Page.mp4

05:40

287 - Creating Sidebar Subscribe Form.mp4

03:00

288 - Creating Categories and Archive Widgets.mp4

02:35

289 - Creating Page and Post Content Area.mp4

05:00

290 - Creating Comment Form For Posts.mp4

03:23

291 - Creating The Search Page.mp4

02:06

292 - Linking Everything Together.mp4

02:43

17 - Project 3 Educational Website with Bootstrap v5

293 - Introduction To Project.mp4

01:51

293 - professional website project.zip

294 - Setting Up Project Folder.mp4

01:16

295 - Creating Navbar and Brand.mp4

02:56

296 - Creating Navbar Toggler.mp4

01:45

297 - Creating Nav Items.mp4

03:12

298 - Creating Navbar Search Field.mp4

01:42

299 - Creating Navbar SignUp And Login Buttons.mp4

06:50

300 - Creating The Banner Text.mp4

05:44

301 - Adding Banner Image.mp4

02:24

302 - Creating Site Feature Set.mp4

06:43

303 - Creating Course Loop Header.mp4

04:38

304 - Creating Course Loop Filter.mp4

04:10

305 - Creating Course Loop Header.mp4

02:01

306 - Creating Single Course List Item.mp4

07:19

307 - Creating Duplicates Of Course Items.mp4

00:39

308 - Creating Home Page Content.mp4

04:18

309 - Adding Home Content Image.mp4

00:47

310 - Creating Subscribe Area.mp4

07:23

311 - Creating Main Footer.mp4

01:43

312 - Creating Footer Address.mp4

02:44

313 - Creating Link Items For Footer.mp4

01:42

314 - Creating Social Icons.mp4

04:45

315 - Creating Copyright Info.mp4

01:44

316 - Creating Sticky Footer.mp4

06:19

317 - Creating About Page Header.mp4

05:52

318 - Creating About Content Section.mp4

03:11

319 - Creating The Courses Page.mp4

04:20

320 - Creating Single Course Page and Breadcrumb.mp4

05:44

321 - Creating Course Header Description and Meta Data.mp4

06:12

322 - Creating Course Meta Data.mp4

03:26

323 - Adding Icons To Course Meta Data.mp4

05:18

324 - Adding Course Buttons.mp4

03:28

325 - Creating Single Course Image.mp4

01:33

326 - Creating Single Course Contents.mp4

07:02

327 - Creating FAQ Header.mp4

02:14

328 - Creating FAQ List.mp4

03:18

329 - Creating Post Question Form.mp4

04:26

330 - Creating Blog Page and Header.mp4

02:17

331 - Creating Blog Posts List.mp4

05:01

332 - Creating Blog Sidebar.mp4

02:16

333 - Creating Subscribe Modal.mp4

05:22

334 - Creating The Subscribe Form.mp4

02:23

335 - Creating Single Post Page.mp4

04:38

336 - Creating Contact Page Header.mp4

05:07

337 - Creating Contact Page Cards.mp4

06:12

338 - Creating Contact Modal.mp4

02:39

339 - Linking Everything Together.mp4

04:09

Description

Build Responsive Web Design with Advanced HTML5 CSS3 & Bootstrap 5. Build 4 Live Projects with Step by Step Instructions

What You'll Learn?

Build Complete Responsive Websites from Scratch with HTML5 & CSS3
Build 3 Live Projects with HTML5, CSS3 & Bootstrap v5 (Downloadable Project Files)
Build Responsive Bootstrap v5 Dashboard for EMS (Employee Management System) Web App
Buid Bootstrap v5 Based Responsive Blog Application
Build Educational Website Theme with Bootstrap v5
Integrate Custom Advanced Responsive jQuery Carousel within the Website

Who is this for?

Anyone who wants to learn Web designing from Scratch

Anyone who wants to learn Web development from Scratch

Anyone who wants to learn HTML5 & CSS3 latest standards

Anyone who wants to learn Latest Bootstrap v5

More details

Description
The internet is growing every second, millions of people browse websites on mobile devices more than on desktops. It is now time to get started building Responsive Web Design, which is fast fluent, and clean.
In this course, you will learn the most advanced techniques to Build Responsive, mobile-friendly Web Sites. You will learn how to improve the website performance with CSS frameworks like Bootstrap 5.
By the end of the course, you will be able to create any website, whether it may be a Blog, Professional Website, or Even a Web app.
As a beginning of the course, letâ€™s say a path to web design or responsive web design, we will start with some basics of HTML5 and CSS3. Although even if you are a beginner or an experienced user, you would still be surprised how many new skills you can build up.
So, as the contents of the course, you will first learn some important and essential HTML5 Tags, through which you will learn how to create headings, paragraphs, links, lists, images, and tables.
In the second section of the course, you will learn how to design and build HTML5 web forms. You will learn how to create contact forms, login forms, and sign-up forms or registration forms.
Then we will get into the media section, where you will learn how to work with media elements like media tags, audio tags, video tags, Iframes, figures, and details tags.
Once the essentials are covered you will learn how to structure your website with these tags. Then we will get into the CSS, this is where the web designing comes in.
Later we will build a complete project from scratch just with HTML5 and CSS3.
Once that is done, we will then work on the most popular CSS framework Bootstrap. We will also see how we can build 4 Live projects with HTML5 CSS3, and Bootstrap

Who this course is for:
Anyone who wants to learn Web designing from Scratch
Anyone who wants to learn Web development from Scratch
Anyone who wants to learn HTML5 & CSS3 latest standards
Anyone who wants to learn Latest Bootstrap v5

User Reviews

Rating

average 0

Total votes0

Focused display

Hi, my name is Fatah Gabrial and I am a Graphic Designer, Web Designer, Web Developer, and SEO Enthusiast. I have been teaching Graphic Design, Web Design, and Web Development to my students since 2010, and I have helped more than 1000’s students to build their careers, and I have helped more than 100’s students to set up their businesses.I am a Freelancer and I work on many projects from time to time. I share my projects with my students with my client's consent of course so that my students can have a Real-Time experience of how the Real-World Projects work. This helps my students to crack almost any interviews.I love to code, and I love to design more than anything. I also love to adapt to new technologies, which also helps me in learning some new stuff, which I can share with my students later on.In addition, I have worked with many technologies, like WordPress, Adobe Photoshop, HTML5, CSS3, JavaScript, ES6+, jQuery, Angular, React, Python, and Django. I also work with some marketing and optimization techniques like SEO – Search Engine Optimization, Digital Marketing, and Social Media Marketing.Here at Udemy, I am going to share all my skills with you guys. I love to create courses for you so that you guys can master all the technologies as I have done throughout my experience.I am always here and available in the Q & A Section, so you can get in touch with me anytime on Udemy, My Social Media Profiles, or my Website.

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.