Front End Development Tutorial | Complete HTML and CSS Tutorial for Beginners (9 Hours🔥)

In today’s era, web development offers a promising job. If you are willing to enter this field, then start with learning front-end development. In this HTML and CSS tutorial for beginners, we have covered all aspects of front-end web development in 9+ hours.

Timestamps:
00:00:00 | Introdcution to HTML | Structure of HTML
00:06:33 | Types of Tags in HTML | Open Tags | Close Tags
00:11:30 | Heading Tags in HTML | Imporatance of Heading Tags
00:15:54 | Basic Tags in HTML | Practical Implementation
00:23:50 | List Tags in HTML | Ordered List | Unordered List
00:31:52 | Nested list in HTML | How to make a nested list ?
00:37:52 | Image Tag in HTML | Image Tag Attributes
00:45:05 | Anchor Tag in HTML | How to use Anchor Tag ?
00:52:56 | Super script, sub script and meter tags in HTML
01:00:03 | Table tags and its children tags
01:09:21 | Table tag attributes.
01:21:57 | Introduction to Form in HTML.
01:27:06 | rom tag and form elements (Textbox, Textarea, Radio Button , Submit and Reset)
01:37:31 | Form elements (Select Box, Check Box, File Input), Fieldset and Legend Tag
01:46:57 | HTML 5 Form elements (Color, Email, Password, Number and Hidden)
01:55:28 | HTML 5 Calendar Form elements (Date, Datetime Local, Time, Month, Week, Range)
02:02:45 | HTML 5 Form attribues (Required, Placeholder, Autofocus, Read Only, Disabled, Min, Max, Maxlength, Checked )
02:14:47 | Introduction to the concept of div tag in HTML. | What is div tag ? | How div tag works ?
02:24:46 | Introduction to CSS | What is CSS ? | Types of CSS
02:29:01 | How does CSS works ? | CSS selectors | What is Class and Id ?
02:34:22 | Working with internal CSS | CSS Properties (width , height, background, float)
02:49:06 | How to count div tags using desgins
02:55:38 | CSS Properties (font-size , color, font-weight, font-style )
03:02:23 | CSS Properties (text-align, text-decoration, text-transform , word-spacing, letter-spacing)
03:09:39 | One page design using HTML and CSS
03:36:01 | How to embed video to the web page ? Video tag and its attributes
03:48:44 | How to embed audio to the web page ? Audio tag and its attributes
03:57:26 | What is iframe tag ? How to use iframe tag in HTML 5
04:02:38 | How to add Youtube video using iframe tag
04:06:23 | How to add Google map video using iframe tag
04:08:56 | Implement Auto suggestion on web page using data list tag in HTML 5
04:14:40 | Detail and Summary Widget using HTML 5 Tags
04:19:24 | Web Page layout | How does the HTML 5 layout works | Tags in HTML 5
04:25:26 | HTML 5 special characters codes | How to insert sepcial chacters in HTML
04:30:41 | What is external CSS ? | Why use external CSS ? | How to link external CSS with a page
04:39:44 | What is inline CSS ? How to use inline CSS ?
04:44:25 | CSS Hover Effect. How to use hover effect ?
04:49:30 | Border properties in CSS. | How border works ?
05:02:16 | Margin properties in CSS. | How margin works ?
05:10:32 | Padding properties in CSS. | How margin works ?
05:21:22 | Background image and background repeat | CSS Properties
05:27:49 | Background position , size and attachment | CSS Properties
05:35:51 | Background color using rbg and rbga function | CSS Properties
05:45:50 | Box shadow | CSS Property
05:54:42 | Text shadow | CSS Property
06:01:10 | Overflow , overflow-x and overflow-y | CSS Properties
06:08:49 | CSS transform Property | translate function
06:15:37 | CSS transform Property | skew function
06:23:27 | CSS transform Property | rotate function
06:29:20 | CSS transform Property | scale function
06:34:54 | CSS Property | Position | Absolute and Relative
06:45:33 | CSS Property | Position | Fixed and Sticky
06:52:42 | CSS Column Properties (Column-count, Column-fill, Column-gap)
06:58:28 | CSS Column Properties (Column-rule, Column-span, Column-width)
07:05:04 | CSS Opacity and Transition Property with Example
07:11:45 | Add to cart botton pop up over image using HTML and CSS
07:19:21| Display Property | None | Block | Inline | Part 1
07:25:44 | Display Property | Inline-block | Flex | List-item | Part 2
07:33:42 | CSS Properties | Resize | Text-indent
07:38:31 | What is CSS 3 Animation ? Properties of CSS 3 Animation
07:43:51 | keyframes , animation-name , animation-duration . animation-delay | CSS 3 properties
07:53:07 | animation-iteration-count, animation-direction, animation-timing-function, animation-fill-mode | CSS 3 properties
07:59:07 | animation CSS 3 Property animation-timing-function.
08:04:08 | Animation using CSS3 Properties
08:21:03 | CSS Properties Grid Part 1 display- grid, grid-row-gap, grid-column-gap, grid-gap , grid-template-columns
08:31:12 | CSS Properties Grid Part 2 grid-column-start, grid-column-end, grid-row-start, grid-row-end,
08:33:35 | CSS Properties, Min and Max Height & Min and Max Width
————————————–| Thanks |—————————
#FrontEndDevelopment #WebDevelopment

You May Also Like