Master HTML and CSS In 30 Days
➽ Day 01 – Basics of How Websites works
➩ Client Server architecture in detail.
➩ What is the role of HTML in Picture and why is it used?
➽ Day 02 -Basics of HTML
➩ Introduction to HTML.
➩ HTML Syntax and Structure.
➩ HTML Elements and Tags.
➩ HTML Attributes.
➽ Day 03 -Text Formatting and Typography
➩ Headings and Paragraphs.
➩ Text Formatting Elements.
➩ Lists.
➩ Quotations.
➽ Day 04 – Links and Navigation
➩ Creating Hyperlinks.
➩ Anchor Links.
➩ Email Links.
➩ Opening Links in a New Tab or Window.
➽ Day 05 – Media Elements
➩ Images.
➩ Audio.
➩ Video.
➽ Day 06 – Tables
➩ Creating Tables.
➩ Table Captions and Headings.
➩ Row and Column Spanning.
➽ Day 07 – Forms and Input Elements
➩ Introduction to HTML Forms.
➩ Input Types: `<textarea>`, `<select>` and `<option>`.
➩ Form Attributes: action, method, enctype.
➽ Day 08 – Inline and block elements
➩ Inline Vs Block elements.
➽ Day 09 – Id & Classes in HTML
➩ Id Vs Classes.
➽ Day 10 – Entities, Code Tag and more
➩ Entities.
➩ Code tag.
➽ Day 11 – HTML5 Semantic Elements
➩ Understanding Semantic Elements.
➩ Common Semantic Tags.
➩ Benefits of Using Semantic Elements.
➩ Best Practices and Validation.
➽ Day 12 – Projects
➩ Build 3-5 Best Projects.
➽ Day 13 : Introduction to CSS
➩ What is CSS?
➩ How CSS works with HTML.
➩ How to add CSS ?
➽ Day 14 : CSS Syntax,Selectors ,Comments, and Colors
➩ Selectors, properties, and values.
➩ Basic selectors (element, class, and ID).
➩ CSS Comments.
➩ Color formats (HEX, RGB, RGBA, HSL, HSLA).
➽ Day 15 : Backgrounds, Borders, and Layout Essentials,Height and it’s properties
➩ Background properties.
➩ CSS Borders.
➩ CSS Height and its Properties.
➽ Day 16 : Box Model
➩ Margin, border, padding, content.
➽ Day 17 : Box-sizing, Text Styles, and Links
➩ Box-sizing property.
➩ CSS Text: Decoration, Transformation, Spacing.
➩ Links.
➽ Day 18 : Fonts, Icons, Units, and Cursor Property
➩ Fonts.
➩ Icons.
➩ Units.
➩ CSS Cursor Property.
➽ Day 19 : Important Rules, Shadows, Opacity, and Filters
➩ CSS The !important Rule.
➩ CSS Shadow Effects.
➩ CSS Opacity / Transparency.
➩ CSS filter Property.
➽ Day 20 : Image Sprites, Gradients, Forms, and Overflow
➩ CSS Image Sprites.
➩ CSS Gradients.
➩ CSS Forms.
➩ CSS Layout – Overflow.
➽ Day 21 : Resize, Lists, Tables, and Functions
➩ CSS resize Property.
➩ CSS Lists.
➩ CSS Tables.
➩ CSS Functions.
➽ Day 22 : Box Sizing, Inheritance, and Object-fit
➩ CSS Box Sizing.
➩ CSS initial vs inherit.
➩ CSS Object-fit Property.
➽ Day 23 : Pseudos, Display, and Positioning
➩ CSS Pseudo-classes.
➩ CSS Pseudo-Elements.
➩ CSS display Property.
➩ CSS Position Property.
➽ Day 24 : Miscellaneous Properties and Floats
➩ CSS Tooltip.
➩ CSS Pagination.
➩ CSS Z-index Property.
➩ CSS float and clear.
➽ Day 25 : Transforms, Transitions, and Animations
➩ CSS 2D Transforms.
➩ CSS 3D Transforms.
➩ CSS Transitions.
➩ CSS Animations.
➽ Day 26 : Responsive Web Design
➩ Responsive Web Design.
➩ The Viewport.
➩ Media Queries.
➽ Day 27 : Advanced Topics and Flex Layouts
➩ CSS Advance Selector.
➩ CSS Specificity.
➩ CSS Multiple Columns.
➩ CSS Flexbox Model (Flex Container).
➩ CSS Flex Items.
➽ Day 28 : Grid Layouts and Validation
➩ CSS Grid Introduction.
➩ CSS Grid Container.
➩ CSS Grid Item.
➩ Naming Grid Items.
➩ CSS Website Layout.
➩ CSS Validation.
➽ Day 29 : Projects – Planning and Initiation
➩ Selection of projects, brainstorming, and design planning.
➽ Day 30 : Projects – Execution
➩ Building projects.
NOTE: Learning and practicing on a daily basis is crucial. Doing certain challenges related to the concepts presented day by day will help you develop the projects easier.
That’s a wrap.
