Roadmaps

HTML & CSS

  1. HTML Fundamentals

    1. What HTML is and how websites work
    2. HTML elements, tags, and attributes
    3. Basic HTML document structure (DOCTYPE, html, head, body)
    4. Headings (h1–h6) and paragraphs
    5. Text formatting (strong, em, mark, small, del, ins, sub, sup)
    6. Links and anchor tags
    7. Absolute and relative URLs
    8. Images and image attributes
    9. Lists (ul, ol, li)
    10. HTML comments
    11. Nesting elements correctly
    12. HTML entities and special characters
    13. File paths for images, links, and other resources

  2. HTML Document Structure and Metadata

    1. The purpose of the head element
    2. Page titles and meta descriptions
    3. Character encoding (UTF-8)
    4. Viewport meta tag
    5. Favicons
    6. Linking external CSS files
    7. Organizing files and folders
    8. Introduction to SEO basics

  3. CSS Fundamentals

    1. What CSS is and how it works
    2. CSS syntax, rules, and declarations
    3. Connecting CSS to HTML
    4. Inline, internal, and external CSS
    5. Element, class, and ID selectors
    6. Writing reusable CSS classes
    7. CSS comments
    8. The CSS cascade
    9. Browser default styles
    10. Understanding CSS properties and values
    11. Introduction to browser DevTools

  4. CSS Colors and Typography

    1. Named colors, HEX, RGB, and HSL
    2. Background colors
    3. Text color
    4. Font family and font stacks
    5. Font size, weight, and style
    6. Line height
    7. Text alignment
    8. Text decoration
    9. Text transformation
    10. Letter spacing and word spacing
    11. Google Fonts
    12. Using @font-face
    13. Fallback fonts
    14. Readable line length
    15. Typography hierarchy
    16. Spacing between headings and paragraphs

  5. CSS Box Model and Sizing

    1. Understanding content, padding, border, and margin
    2. The box-sizing property
    3. Using box-sizing: border-box
    4. Width and height
    5. Min-width, max-width, min-height, and max-height
    6. Margin collapsing
    7. Padding and margin shorthand
    8. Borders and border styles
    9. Border radius
    10. Overflow (visible, hidden, auto, scroll)
    11. Outline versus border
    12. CSS units (px, %, em, rem, vh, vw)
    13. The calc(), min(), max(), and clamp() functions

  6. CSS Selectors, Specificity, and Cascade

    1. Element, class, and ID selectors
    2. Grouping selectors
    3. Descendant selectors
    4. Child selectors
    5. Adjacent sibling selectors
    6. General sibling selectors
    7. Attribute selectors
    8. Pseudo-classes (hover, focus, active, checked, first-child, nth-child)
    9. Pseudo-elements (::before, ::after, ::first-letter, ::selection)
    10. Selector specificity
    11. Inheritance
    12. The cascade and source order
    13. The !important declaration and why to avoid overusing it
    14. Combining selectors effectively
    15. Writing maintainable CSS

  7. CSS Backgrounds, Borders, and Visual Effects

    1. Background colors and images
    2. Background-size, background-position, background-repeat, and background-attachment
    3. Linear and radial gradients
    4. Border radius
    5. Box shadow and text shadow
    6. Opacity
    7. CSS filters
    8. Outline and focus indicators
    9. Creating visual hierarchy
    10. Modern CSS color functions

  8. CSS Display and Positioning

    1. Block, inline, and inline-block elements
    2. The display property
    3. Display none versus visibility hidden
    4. Understanding normal document flow
    5. Position static, relative, absolute, fixed, and sticky
    6. Positioning elements inside containers
    7. Top, right, bottom, and left
    8. Inset properties
    9. Z-index and stacking contexts
    10. Overflow and positioned elements
    11. Float and clear (legacy basics)
    12. Common positioning problems
    13. When to use positioning versus Flexbox or Grid

  9. CSS Flexbox

    1. Understanding one-dimensional layouts
    2. Flex containers and flex items
    3. Display flex
    4. Flex direction
    5. Main axis and cross axis
    6. Justify-content
    7. Align-items and align-content
    8. Align-self
    9. Flex-wrap
    10. Gap
    11. Flex-grow, flex-shrink, and flex-basis
    12. The flex shorthand
    13. Order and its accessibility implications
    14. Horizontal and vertical centering
    15. Building navigation bars
    16. Creating equal-height cards
    17. Common Flexbox layout patterns

  10. CSS Grid

    1. Understanding two-dimensional layouts
    2. Display grid
    3. Grid-template-columns and grid-template-rows
    4. The fr unit
    5. Row gap and column gap
    6. Grid lines and grid placement
    7. Grid-column and grid-row
    8. Span and automatic placement
    9. Grid-template-areas
    10. Named grid areas
    11. Repeat function
    12. Minmax function
    13. Auto-fit versus auto-fill
    14. Implicit and explicit grids
    15. Responsive card grids
    16. Choosing between Grid and Flexbox

  11. Responsive Web Design

    1. What responsive design means
    2. Mobile-first development
    3. Viewport meta tag
    4. Relative versus fixed units
    5. Media queries
    6. Breakpoints and common screen sizes
    7. Responsive layouts with Flexbox
    8. Responsive layouts with Grid
    9. Fluid widths and max-width
    10. Responsive images
    11. Object-fit and object-position
    12. Picture and srcset
    13. Fluid typography with clamp()
    14. Responsive spacing
    15. Preventing horizontal overflow
    16. Testing layouts at different screen sizes
    17. Designing for mobile, tablet, and desktop
    18. Touch-friendly interactive elements

  12. HTML Forms

    1. Understanding the form element
    2. Form action and method
    3. Input types (text, email, password, number, tel, url, date)
    4. Checkboxes and radio buttons
    5. Connecting labels to inputs using for and id
    6. Placeholder, required, minlength, maxlength, min, and max
    7. Pattern validation
    8. Select, option, textarea, and button
    9. Fieldset and legend
    10. Name and value attributes
    11. Submit and reset buttons
    12. Grouping related form controls
    13. HTML built-in form validation
    14. Accessible form labels and error messages
    15. Introduction to GET and POST methods
    16. Client-side versus server-side validation

  13. Semantic HTML and Accessibility

    1. What semantic HTML means and why it matters
    2. Header, nav, main, section, article, aside, and footer
    3. Choosing between div, span, and semantic elements
    4. Creating a logical page structure
    5. Understanding heading hierarchy
    6. The importance of the lang attribute
    7. Writing descriptive link text
    8. Meaningful alt text for images
    9. Decorative images and empty alt attributes
    10. Introduction to screen readers
    11. Keyboard navigation
    12. Accessible buttons and links
    13. Color contrast
    14. Visible focus indicators
    15. Introduction to ARIA
    16. Using native HTML elements before ARIA
    17. Respecting reduced-motion preferences

  14. CSS Variables and Code Organization

    1. Understanding CSS custom properties
    2. Declaring variables with --variable-name
    3. Using var() and fallback values
    4. Defining variables in :root
    5. Creating color palettes
    6. Managing typography and spacing variables
    7. Reusing design values across components
    8. Organizing CSS files
    9. Naming classes consistently
    10. Introduction to BEM naming
    11. Avoiding unnecessary duplication
    12. Writing reusable styles
    13. Maintainable CSS architecture
    14. Introduction to CSS nesting
    15. Introduction to cascade layers with @layer

  15. CSS Transitions, Transforms, and Animations

    1. Understanding CSS transitions
    2. Transition property, duration, delay, and timing function
    3. Hover and focus effects
    4. Transform translate, scale, rotate, and skew
    5. Transform origin
    6. Creating interactive buttons
    7. Introduction to @keyframes
    8. Animation name, duration, delay, iteration count, and direction
    9. Animation fill mode and timing functions
    10. Combining multiple animations
    11. Animating transform and opacity efficiently
    12. Avoiding excessive animations
    13. The prefers-reduced-motion media query

  16. Advanced CSS Features

    1. CSS logical properties
    2. Aspect-ratio property
    3. Object-fit and object-position
    4. Text overflow and wrapping
    5. Advanced use of minmax() and repeat()
    6. Using gap across layout systems
    7. Advanced use of calc(), min(), max(), and clamp()
    8. Introduction to container queries
    9. Introduction to :is(), :where(), and :has()
    10. Introduction to @supports
    11. Understanding stacking contexts
    12. Advanced Grid layouts
    13. Advanced Flexbox patterns
    14. Snapping
    15. Feature support and graceful fallbacks

  17. CSS Debugging and Developer Tools

    1. CSS DEBUGGING AND DEVELOPER TOOLS
    2. Inspecting HTML and CSS using browser DevTools
    3. Inspecting and editing elements
    4. Understanding the Styles and Computed panels
    5. Finding overridden CSS rules
    6. Debugging specificity issues
    7. Identifying inherited styles
    8. Testing CSS changes in real time
    9. Using the device toolbar
    10. Testing responsive layouts
    11. Checking console errors
    12. Understanding common layout bugs
    13. Debugging Flexbox and Grid
    14. Using the box model inspector
    15. Validating HTML and CSS
    16. Testing keyboard navigation
    17. Using browser tools to measure performance

  18. HTML and CSS Best Practices

    1. Writing clean and semantic HTML
    2. Maintaining consistent indentation and formatting
    3. Using meaningful class names
    4. Avoiding unnecessary HTML elements
    5. Writing reusable CSS
    6. Avoiding excessive specificity
    7. Using consistent spacing and typography
    8. Organizing stylesheets
    9. Optimizing images
    10. Maintaining responsive layouts
    11. Following accessibility guidelines
    12. Avoiding unnecessary animations
    13. Testing across different browsers
    14. Checking mobile and desktop layouts
    15. Reviewing code for duplication and maintainability