Advanced HTML and CSS

Subjects

HTML

In this module, you will deepen your understanding of semantic HTML and modern browser-native elements for building accessible, structured and maintainable webpages.

Lessons

• Semantic and sectional elements
• Definition lists and figures
• Media elements such as audio and video
• SVG and canvas
• Dialogs and templates
• Modern form elements and validation
• Script loading strategies and DOM interaction

Lab: Build semantic webpages
Lab: Build validated forms
Lab: Implement modal dialogs and reusable templates

After completing this module, students will be able to:

• Structure webpages using semantic HTML
• Use modern HTML elements appropriately
• Build accessible forms with built-in validation
• Work with reusable browser-native templating features

---

CSS basics

In this module, you will learn the foundations of modern CSS styling techniques and selectors.

Lessons

• Selectors and specificity
• Attribute selectors
• Logical selectors such as :not(), :has() and :is()
• Colors, typography and custom fonts
• CSS custom properties (variables)
• CSS nesting

Lab: Style webpages and forms
Lab: Apply selectors and reusable styling techniques

After completing this module, students will be able to:

• Apply CSS selectors effectively
• Understand specificity and selector precedence
• Work with CSS variables and nested styling
• Create maintainable CSS stylesheets

---

CSS pseudo-classes and elements

In this module, you will learn how to style user interaction states and element fragments.

Lessons

• Pseudo-classes such as :hover, :focus, :valid and :invalid
• Structural pseudo-classes such as :nth-child() and :first-of-type
• Pseudo-elements such as ::before, ::after and ::backdrop
• Styling form validation states

Lab: Add hover and focus effects
Lab: Style form validation states

After completing this module, students will be able to:

• Style interactive states of elements
• Use pseudo-elements for visual enhancements
• Improve form usability and feedback
• Apply advanced structural selectors

---

CSS box model

In this module, you will explore how browsers render and size elements on a webpage.

Lessons

• Block and inline elements
• Margin, padding and borders
• Width and height calculations
• box-sizing
• Handling overflow and sizing issues

After completing this module, students will be able to:

• Understand the CSS box model
• Correctly size and align elements
• Prevent common layout overflow issues
• Apply border-box sizing effectively

---

CSS positioning

In this module, you will learn modern layout and positioning systems for building responsive interfaces.

Lessons

• Flexbox
• CSS Grid and subgrid
• Absolute and relative positioning
• Anchor positioning
• Layout strategies and positioning trade-offs

Lab: Position navigation menus
Lab: Create responsive card layouts
Lab: Position forms and context menus

After completing this module, students will be able to:

• Build layouts using Flexbox and Grid
• Choose appropriate positioning techniques
• Create structured and responsive page layouts
• Position interactive UI elements effectively

---

CSS preprocessors

In this module, you will be introduced to preprocessors for improving CSS maintainability and scalability.

Lessons

• Introduction to Sass/SCSS
• Nested styling
• Variables and operations
• Mixins and reusable styles
• Build tool integration

Lab: Convert CSS to SCSS
Lab: Reuse and organize styles with Sass

After completing this module, students will be able to:

• Use Sass features to simplify CSS development
• Organize reusable styles efficiently
• Integrate preprocessors into a frontend workflow
• Understand the role of build tools

---

CSS responsiveness

In this module, you will learn techniques for building responsive and adaptive user interfaces.

Lessons

• Responsive units (rem, em, vh, vw)
• Media queries
• Container queries
• Responsive layouts
• Accessibility considerations for responsiveness

Lab: Make webpages mobile-friendly
Lab: Create responsive card layouts
Lab: Implement a hamburger menu

After completing this module, students will be able to:

• Build responsive user interfaces
• Use media and container queries effectively
• Choose appropriate CSS units
• Improve accessibility on different devices

---

CSS animations and transitions

In this module, you will learn how to create smooth and performant animations for web applications.

Lessons

• CSS transitions
• Keyframe animations
• Timing functions and easing
• View transitions
• Performance considerations and GPU acceleration

Lab: Add transitions and animations to the application

After completing this module, students will be able to:

• Create animations using CSS
• Apply smooth transitions to UI interactions
• Understand animation performance considerations
• Use modern browser animation capabilities

---

CSS organization

In this module, you will learn strategies for organizing and scaling CSS in larger applications.

Lessons

• CSS architecture approaches
• BEM methodology
• Scoped CSS
• Tailwind CSS
• Utility-first CSS concepts
• Comparing CSS organization strategies

Lab: Style pages using Tailwind CSS
Lab: Create responsive layouts using utility classes

After completing this module, students will be able to:

• Organize CSS for maintainability
• Understand common CSS architecture patterns
• Work with utility-first CSS frameworks
• Apply scalable styling strategies

---

Web API: Storage

In this module, you will learn how browsers can persist data locally.

Lessons

• Local Storage
• Session Storage
• JSON serialization and deserialization
• Introduction to IndexedDB

Lab: Store and retrieve application data
Lab: Persist data locally

After completing this module, students will be able to:

• Store data in the browser
• Work with JSON in JavaScript
• Understand browser storage capabilities
• Choose appropriate storage approaches

---

Web API: fetch

In this module, you will learn how web applications communicate with backend services.

Lessons

• Using fetch() for HTTP requests
• GET, POST and DELETE requests
• Working with JSON APIs
• Error handling
• Loading indicators and user feedback

Lab: Build a small backend using json-server
Lab: Retrieve and persist data using fetch()
Lab: Implement loading and error states

After completing this module, students will be able to:

• Communicate with backend services
• Use fetch() effectively
• Handle asynchronous operations
• Improve application usability during network operations

---

Realtime communication

In this module, you will learn how modern web applications implement realtime features.

Lessons

• Polling and long polling
• WebSockets
• Introduction to WebRTC and Server-Sent Events
• Realtime communication patterns

Lab: Create a WebSocket server
Lab: Broadcast updates between browser tabs
Lab: Update the UI in realtime

After completing this module, students will be able to:

• Understand realtime communication techniques
• Work with WebSockets
• Implement realtime updates in web applications
• Handle WebSocket lifecycle events

---

Intro to testing

In this module, you will be introduced to modern frontend testing tools and strategies.

Lessons

• Unit, integration and end-to-end testing
• Vitest
• Playwright
• Mocking and test doubles
• Testing user interactions and accessibility

Lab: Create integration tests with Vitest
Lab: Create end-to-end tests with Playwright

After completing this module, students will be able to:

• Understand frontend testing strategies
• Write automated tests for web applications
• Test user interactions and browser behavior
• Use modern testing tools effectively