Academy

76 lessons · free

Advanced Level: HTML and CSS

For people who already build pages with HTML and CSS and want the code to hold up as a site grows.

Start the first lesson

CSS Grid Advanced Features

  1. CSS Grid: Advanced Layouts
  2. Advanced Grid Track Sizing with minmax() and auto
  3. Grid Template Areas for Intuitive Layouts
  4. Explicit vs. Implicit Grids
  5. Aligning Grid Items with align-items, justify-items, align-self, and justify-self
  6. Auto-Placement and Dense Packing with grid-auto-flow
  7. Grid Item Ordering with grid-row and grid-column
  8. Nested Grids for Complex Layouts
  9. Responsive Grids with repeat(), auto-fill, and auto-fit
  10. Key Takeaways

Advanced Responsive Web Design Techniques

  1. Advanced Responsive Web Design
  2. Viewport Units (vw, vh, vmin, vmax)
  3. The calc() Function for Dynamic Layouts
  4. Fluid Typography
  5. Responsive Images with srcset and sizes
  6. CSS Grid and Flexbox for Responsive Layouts
  7. Mobile-First Design Approach
  8. Using CSS clamp() for Fluid Sizing
  9. Responsive Design Patterns
  10. Key Takeaways

CSS Variables (Custom Properties)

  1. CSS Variables (Custom Properties)
  2. What Are CSS Variables?
  3. How to Define and Use CSS Variables
  4. Global vs. Local Variables
  5. Overriding and Cascading CSS Variables
  6. Fallback Values for CSS Variables
  7. Advanced Techniques: Theming with CSS Variables
  8. Dynamic CSS Variables with JavaScript
  9. Performance and Best Practices
  10. Key Takeaways

CSS Preprocessors: SASS/SCSS

  1. CSS Preprocessors: SASS/SCSS
  2. What are SASS and SCSS?
  3. Variables in SASS/SCSS
  4. Nesting for Cleaner Code
  5. Partials and Imports for Modular CSS
  6. Mixins for Reusable Code Blocks
  7. Inheritance with @extend
  8. Conditionals and Loops in SCSS
  9. Compiling SASS/SCSS to CSS
  10. Best Practices with SASS/SCSS
  11. Key Takeaways

Web Performance Optimization

  1. Web Performance Optimization
  2. Why Web Performance Matters
  3. Minifying CSS, JavaScript, and HTML
  4. Optimizing Images and Fonts
  5. Lazy Loading and Asynchronous Loading
  6. Caching and Content Delivery Networks (CDNs)
  7. Optimizing Web Fonts
  8. Reducing HTTP Requests
  9. Using Browser DevTools for Performance Auditing
  10. Optimizing JavaScript for Performance
  11. Modern Performance Techniques: HTTP/2, WebP, and Server-Side Rendering (SSR)
  12. Key Takeaways

CSS Architecture and Methodologies

  1. CSS Architecture and Methodologies
  2. Why CSS Architecture Matters
  3. BEM (Block Element Modifier) Methodology
  4. OOCSS (Object-Oriented CSS)
  5. SMACSS (Scalable and Modular Architecture for CSS)
  6. Atomic CSS
  7. ITCSS (Inverted Triangle CSS)
  8. CSS-in-JS: Styled Components and Emotion
  9. Best Practices for Scalable CSS
  10. Key Takeaways

Accessibility and SEO Best Practices

  1. Accessibility and SEO Best Practices
  2. Why Accessibility and SEO Matter
  3. Web Content Accessibility Guidelines (WCAG) Overview
  4. Using Semantic HTML for Accessibility and SEO
  5. Accessible Navigation and ARIA Roles
  6. Optimizing Images with Alt Text
  7. SEO-Friendly URLs and Meta Tags
  8. Heading Structure and Content Hierarchy
  9. Optimizing Page Speed for Accessibility and SEO
  10. Mobile Optimization and Responsive Design
  11. Keyboard Navigation and Focus Management
  12. Testing Tools for Accessibility and SEO
  13. Key Takeaways