Learn the fundamentals of HTML and web document structure.

• What is HTML?
• HTML document structure
• HTML5 overview
• Setting up development environment
• Basic HTML syntax
• HTML tags and elements
• Attributes and values
• First HTML page

Master the essential structure of HTML documents.

• DOCTYPE declaration
• HTML root element
• Head section
• Meta tags
• Title element
• Body section
• Document outline
• Valid HTML structure

Work with text elements and typography in HTML.

• Headings (h1-h6)
• Paragraphs and text
• Bold and italic text
• Line breaks and spaces
• Preformatted text
• Quotations
• Text formatting elements
• Special characters

Create hyperlinks and navigation systems.

• Anchor tags
• External links
• Internal links
• Email links
• Phone links
• Link attributes
• Navigation menus
• Link accessibility

Embed images, videos, and other media content.

• Image elements
• Image attributes
• Image formats
• Responsive images
• Figure and figcaption
• Video elements
• Audio elements
• Media accessibility

Organize content with lists and tabular data.

• Unordered lists
• Ordered lists
• Definition lists
• Nested lists
• Table structure
• Table headers
• Table styling
• Accessible tables

Create interactive forms and handle user input.

• Form structure
• Input types
• Form validation
• Labels and accessibility
• Fieldsets and legends
• Form submission
• Form styling basics
• HTML5 form features

Learn the fundamentals of CSS and styling web pages.

• What is CSS?
• CSS syntax and structure
• Adding CSS to HTML
• CSS selectors
• CSS properties
• CSS cascade and specificity
• CSS inheritance
• CSS debugging

Master CSS selectors and fundamental properties.

• Element selectors
• Class and ID selectors
• Attribute selectors
• Pseudo-classes
• Pseudo-elements
• Combinators
• Selector specificity
• CSS variables

Understand the CSS box model and layout fundamentals.

• Box model concept
• Content, padding, border, margin
• Box-sizing property
• Display properties
• Width and height
• Min/max dimensions
• Overflow property
• Box model debugging

Style text and work with colors in CSS.

• Font properties
• Text properties
• Web fonts
• Color values
• Background properties
• Gradients
• Text shadows
• Typography best practices

Master flexible layouts with CSS Flexbox.

• Flexbox concepts
• Flex container properties
• Flex item properties
• Main axis and cross axis
• Flex direction and wrap
• Justify content and align items
• Flex grow, shrink, basis
• Flexbox patterns

Create complex layouts with CSS Grid.

• Grid concepts
• Grid container properties
• Grid item properties
• Grid lines and tracks
• Grid areas and templates
• Implicit vs explicit grids
• Grid alignment
• Grid responsive design

Control element positioning and layout flow.

• Position property values
• Static positioning
• Relative positioning
• Absolute positioning
• Fixed positioning
• Sticky positioning
• Z-index and stacking
• Positioning best practices

Create responsive websites that work on all devices.

• Responsive design principles
• Viewport meta tag
• Media queries
• Flexible grids
• Flexible images
• Mobile-first approach
• Breakpoint strategies
• Testing responsive designs

Add motion and interactivity with CSS animations.

• CSS transitions
• Transform property
• CSS animations
• Keyframes
• Animation properties
• Performance considerations
• Hover effects
• Animation best practices

Enhance CSS with preprocessors like Sass and Less.

• CSS preprocessor benefits
• Sass/SCSS syntax
• Variables and nesting
• Mixins and functions
• Partials and imports
• Inheritance and extends
• CSS compilation
• Build tool integration

Explore modern CSS features and professional practices.

• CSS custom properties
• CSS modules
• Container queries
• CSS-in-JS overview
• Performance optimization
• CSS architecture
• Accessibility in CSS
• Future CSS features