Learn Responsive Web Design with 4 Live Projects (2023)

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

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

1 - Getting Started with HTML5 CSS3

1 - Introduction to HTML5 CSS3

2 - What you will need

3 - Install Code Editor for Development

4 - Hello World

2 - HTML5 Tags

5 - HTML5 Document Structure

6 - HTML5 Basics

7 - Headings Paragraphs

8 - Text Formatting

9 - Links in HTML5

10 - Working with Nested Links

11 - Lists in HTML5

12 - Working with Images

13 - Tables in HTML5

3 - Forms in HTML5

14 - Forms in HTML5

15 - Creating a Contact Form

16 - Creating a Login Form

17 - Creating a Registration Form

4 - Media in HTML5

18 - Grouping Elements

19 - HTML5 Media Tags

20 - IFrames in HTML5

21 - Figure Tag in HTML5

22 - Collapse Elements with Details Tag

5 - Creating a Simple Website Structure

23 - Creating The Header

24 - Creating Nav Menu

25 - Creating The Banner

26 - Adding Content to Page

27 - Creating The Sidebar

28 - Building Page Footer

29 - Adding Copyright

6 - Essentials of CSS CSS

30 - Inline CSS

31 - Internal CSS

32 - External CSS

33 - Box Model in CSS

34 - Targeting Elements in CSS

35 - Designing with Box Model

7 - HTML5 CSS3 Website Project

36 - Building The Container

37 - Building The Website Header

38 - Creating The Nav Bar

39 - Making DropDown Menu

40 - Creating Image Slider

41 - Making Content Holder

42 - Creating Sidebar

43 - Making Footer

44 - Creating Aboutus Page

45 - Creating Services Pages

46 - Building The Products Page

47 - Building Contact Page

48 - Adding NavMenu

49 - Responsive Design RWD Explained

50 - Animation with CSS3

8 - Getting Started with Bootstrap v5

51 - Bootstrap v5 Introduction

52 - What you will need

52 - bootstrap 52 exercise files.zip

53 - Hello World

54 - Bootstrap v5 Document Structure

9 - Bootstrap v5 Layout

55 - Breakpoints

56 - Containers

57 - Grid

58 - Grid Options

59 - Nesting Rows and Columns

60 - Column Vertical Alignment

61 - Column Horizontal Alignment

62 - Column Wrapping and Column Breaks

63 - Reordering and Offsetting Columns

64 - Margin Utilities

65 - Gutters

66 - Horizontal Gutters

67 - Vertical Gutters

68 - Horizontal and Vertical Gutters

10 - Bootstrap v5 Contents

69 - Typography

70 - Inline Text Elements

71 - Abbreviations and Blockquotes

72 - Working with Lists

73 - Images in Bootstrap

74 - Tables in Bootstrap

75 - Table Alignment Nesting and Anatomy

76 - Figures in Bootstrap

11 - Bootstrap v5 Forms

77 - Forms in Bootstrap

78 - Form Control

79 - Checks and Radios

80 - Range

81 - Input Groups

82 - Floating Labels

83 - Form Layout

84 - Horizontal Forms

85 - Auto Sizing Forms

86 - Inline Forms

87 - Form Validation

12 - Bootstrap v5 Components

88 - Accordions

89 - Alerts

90 - Dismissing Alerts

91 - Badges

92 - Breadcrumb

93 - Buttons

94 - Button Group

95 - Button Toolbar

96 - Button Group Alteration

97 - Card

98 - Card Sizing

99 - Card Navigation

100 - Card Images

101 - Card Styles

102 - Carousel

103 - Carousel Controls

104 - Carousel Indicators

105 - Carousel Caption

106 - Carousel Fade Effect

107 - Carousel Timing

108 - Disable Carousel Touch Swiping

109 - Carousel Dark Variant

110 - Close Button

111 - Collapse

112 - Horizontal Collapse

113 - Multiple Targets

114 - Dropdowns

115 - Split Button

116 - Dropdown Sizing

117 - Dark Dropdowns

118 - Dropdown Directions

119 - Dropup and Dropdown Alignment

120 - Menu Items

121 - Menu Alignment

122 - Dropdown Alignment Options

123 - Menu Contents

124 - Dropdown Forms

125 - Dropdown Options

126 - Dropdown Auto Close

127 - List Group

128 - List Group Links and Buttons

129 - List Group Flush

130 - Numbered List

131 - Horizontal List Groups

132 - Contextual List Group Classes

133 - List Group with Badges

134 - List Group with Custom Content

135 - Group Checkboxes and Radios

136 - List Group JavaScript Tabs

137 - Modals

138 - Static Backdrop

139 - Scrolling Long Content

140 - Vertically Centered

141 - Modal Tooltips and Popovers

142 - Using Grid system in Modal

143 - Varying Modal Content

144 - Toggle Between Modals

145 - Optional Modal Sizes

146 - Navbar

147 - Navigation Links

148 - Navbar Dropdown

149 - Navbar Nested Dropdown

150 - Navbar Forms

151 - Navbar Input Group

152 - Navbar Plain Text

153 - Navbar Colors

154 - Navbar Containers

155 - Navbar Placement

156 - Navbar Scrolling

157 - Off Canvas Navbar

158 - Navs and Tabs

159 - Nav Flex Utilities

160 - Nav Tabs and Pills with Dropdown

161 - Tabs and Pills Behaviors

162 - Offcanvas InDepth

163 - Offcanvas Scrolling

164 - Offcanvas Placement

165 - Pagination

166 - Placeholders

167 - Popovers InDepth

168 - Popover Direction

169 - Custom Popovers

170 - Dismiss on next click

171 - Enable Popover on Hover

172 - Progress Bars

173 - Progress bar height and Background

174 - Stripes and Animation

175 - Scrollspy

176 - Spinners

177 - Growing Spinner

178 - Spinner Alignment

179 - Spinner Sizes

180 - Spinner in Buttons

181 - Toasts

182 - Toast Alignment

183 - Tooltips InDepth

184 - Custom Tooltip

185 - Tooltip Directions

186 - HTML in Tooltip

187 - Tooltip on Disabled Elements

13 - Bootstrap v5 Helpers

188 - Clearfix

189 - Colors and Background

190 - Colored Links

191 - Ratios

192 - Positions

193 - Stacks

194 - Visually Hidden

195 - Stretched Link

196 - Text Truncate

197 - Vertical Rule

14 - Bootstrap v5 Utilities

198 - Backgrounds

199 - Background Gradients

200 - Background Opacity

201 - Borders

202 - Border Color

203 - Border Opacity

204 - Border Width

205 - Border Radius

206 - Rounded Border Sizes

207 - Text Colors

208 - Text Opacity

209 - Display Inline and Block

210 - Hiding Elements

211 - Display in Print

212 - Flex

213 - Flex Direction

214 - Flex Justify Content

215 - Flex Align Items

216 - Flex Align Self

217 - Flex Fill

218 - Flex Grow and Shrink

219 - Flex Auto Margins

220 - Flex with Align Items

221 - Flex Wrap

222 - Flex Order

223 - Flex Align Content

224 - Flex Media Object

225 - Responsive Float

226 - Interactions

227 - Opacity

228 - Overflow

229 - Position

230 - Position Center Elements

231 - Position Center Elements within Edges

232 - Position Examples Part 1

233 - Position Example Part 2

234 - Shadow

235 - Sizing

236 - Spacing

237 - Gap

238 - Text Alignment

239 - Text Wrap

240 - Text Break

241 - Text Transform

242 - Font Size

243 - Font weights and italics

244 - Line Height

245 - Monoscope

246 - Reset Color

247 - Text Decoration

248 - Vertical Alignment

249 - Visibility

250 - Bootstrap Icons

15 - Project 1 EMS Employee Management App

251 - Introduction to EMS20 Application Project

251 - ems20 project.zip

252 - Creating The Login Page

253 - Creating Dash Nav and Brand Logo

254 - Creating The Navbar Toggler

255 - Creating Navbar Items

256 - Creating Form Fields for Navbar

257 - Creating Cards for Dashboard

258 - Creating Employees List Page

259 - Creating Employees Page Sidebar

260 - Creating Employees List Table

261 - Creating Add Employee Modal

262 - Creating Add Employee Modal Form

263 - Creating Details Modal for Employee List

264 - Creating Edit Details for Employee List

265 - Creating Delete Modal for Employees List

266 - Creating Jobs List Page

267 - Updating The Job List Page

268 - Creating Job List Table

269 - Creating Add Job Modal

270 - Creating Details Modal for Job

271 - Creating Edit Details for Job Modal

272 - Creating Delete Modal for Job List

16 - Project 2 Blog App with Bootstrap v5

273 - Blog Project Introduction

273 - blog20 project.zip

274 - Whats Required For Template Building

275 - Creating The Index File

276 - Creating The Navbar and Brand Logo

277 - Creating Navbar Toggler

278 - Creating Navbar Items

279 - Creating The Search Field

280 - Creating The Home Banner

281 - Creating The Subscribe Modal

282 - Creating Home Posts Section

283 - Creating Blog Footer

284 - Adding Custom Effects to Navbar

285 - Creating Default Page Header

286 - Creating Post Loop For Default Page

287 - Creating Sidebar Subscribe Form

288 - Creating Categories and Archive Widgets

289 - Creating Page and Post Content Area

290 - Creating Comment Form For Posts

291 - Creating The Search Page

292 - Linking Everything Together

17 - Project 3 Educational Website with Bootstrap v5

293 - Introduction To Project

293 - professional website project.zip

294 - Setting Up Project Folder

295 - Creating Navbar and Brand

296 - Creating Navbar Toggler

297 - Creating Nav Items

298 - Creating Navbar Search Field

299 - Creating Navbar SignUp And Login Buttons

300 - Creating The Banner Text

301 - Adding Banner Image

302 - Creating Site Feature Set

303 - Creating Course Loop Header

304 - Creating Course Loop Filter

305 - Creating Course Loop Header

306 - Creating Single Course List Item

307 - Creating Duplicates Of Course Items

308 - Creating Home Page Content

309 - Adding Home Content Image

310 - Creating Subscribe Area

311 - Creating Main Footer

312 - Creating Footer Address

313 - Creating Link Items For Footer

314 - Creating Social Icons

315 - Creating Copyright Info

316 - Creating Sticky Footer

317 - Creating About Page Header

318 - Creating About Content Section

319 - Creating The Courses Page

320 - Creating Single Course Page and Breadcrumb

321 - Creating Course Header Description and Meta Data

322 - Creating Course Meta Data

323 - Adding Icons To Course Meta Data

324 - Adding Course Buttons

325 - Creating Single Course Image

326 - Creating Single Course Contents

327 - Creating FAQ Header

328 - Creating FAQ List

329 - Creating Post Question Form

330 - Creating Blog Page and Header

331 - Creating Blog Posts List

332 - Creating Blog Sidebar

333 - Creating Subscribe Modal

334 - Creating The Subscribe Form

335 - Creating Single Post Page

336 - Creating Contact Page Header

337 - Creating Contact Page Cards

338 - Creating Contact Modal

339 - Linking Everything Together

53,700 تومان

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

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

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

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