Front-End Development with HTML & CSS
- Format: Instructor-Led
- Duration: 4 Days • 32 Hours
Overview
Front-end development is the foundation of how users experience the web—and it’s evolving rapidly with the rise of AI-assisted workflows. In this course, the learner will bring designs to life using HTML and CSS while developing the structure, style, and responsiveness that make modern websites engaging and accessible. The learner will also explore how AI tools can support development—helping to debug code, enhance accessibility, and accelerate the creative process—without replacing the core problem-solving and technical skills that define a front-end developer.
Across four units, the course progresses from the fundamentals of web structure and styling to responsive design, accessibility, and production-ready practices. Through hands-on labs and guided projects, learners apply their skills to real-world scenarios, culminating in a capstone project: a responsive, accessible portfolio website that demonstrates mastery of front-end principles. Along the way, learners practice writing clean, semantic code, using AI responsibly for feedback and improvement, and developing a professional workflow that reflects current industry standards.
By the end of the course, learners will have both the technical foundation and the confidence to design, build, and optimize websites in a front-end ecosystem shaped by AI-enhanced innovation.
Outcomes
- Design and structure accessible, standards-based web pages using semantic HTML to ensure clarity, inclusivity, and compliance with modern web best practices.
- Apply CSS styling and responsive design techniques to create visually consistent, mobile-friendly layouts that adapt seamlessly across devices and screen sizes.
- Leverage AI tools to support debugging, code validation, and accessibility reviews while maintaining full authorship and understanding of your HTML and CSS.
- Develop and implement cohesive design systems that apply typography, color, and layout principles to achieve visual harmony and scalability in front-end projects.
- Evaluate website performance and accessibility through testing, optimization, and iterative refinement using both manual and AI-assisted methods.
- Communicate design decisions and technical implementations effectively through documentation, annotated code, and visual storytelling.
- Collaborate professionally within a front-end workflow, applying ethical and responsible use of AI to enhance problem-solving, creativity, and learning efficiency.
- Demonstrate mastery of front-end development by designing, building, and optimizing a responsive, accessible portfolio website that reflects professional standards and AI-informed craftsmanship.
Prerequisites
None.
This is a beginner level-friendly course with no technical prerequisites. Learners should bring curiosity about how websites are built and a willingness to experiment with visual design and problem-solving. Comfort with basic computer operations—such as organizing files, navigating browsers, and using online tools—will increase speed in learning new concepts.
System Requirements
Front-End Development with HTML & CSS systems and tools
Below are details covering the course systems and accounts you need on Day 1. You’ll receive additional information about the rest of the required tools when the course begins. Your instructor may add or remove tools from your course. You will receive a full setup document as part of your course materials.
| System used | Needed on day 1 | How to download access |
|---|---|---|
| Canvas | Yes | You will receive access to Canvas after enrollment. |
| Google Chrome | Yes | Download Chrome here. |
| Slack | Yes | Download the Slack app here. |
| Zoom | Yes | Download the Zoom Desktop Client here. |
| LLM | Yes | It is up to you what LLM you choose. Some options you can consider include: ChatGPT by OpenAI / Claude by Anthropic / Gemini by Google. You only need one LLM to be successful in this course. |
| GitHub | Yes | Visit https://github.com/ to sign up for a free account. |
| Visual Studio Code | Yes | Follow the instructions found here to download Visual Studio Code. |
Module Repos
| # | Module Name | Module Overview | Associated Labs |
|---|---|---|---|
| 1 | Introduction to the Web and Developer Workflow | Examine how the web operates through the client-server model, HTML rendering, and browser tools. Explore how AI can summarize or visualize code execution to accelerate conceptual understanding. | Exploring the Web Ecosystem |
| 2 | HTML Fundamentals and Document Structure | Construct semantic web pages using HTML elements and logical hierarchy. Practice using AI to validate structure and suggest accessibility improvements. | Building Your First Web Page |
| 3 | Forms, Media, and Accessibility | Explore HTML forms and multimedia while applying accessibility principles and WCAG standards. Use AI tools to analyze and enhance inclusive design. | Accessible Forms and Media Integration |
| 4 | Version Control | Practice collaborative workflows. Use AI to assist with documentation and commit message generation. | Collaborative Version Control |
| 5 | CSS Foundations: Selectors, Properties, and the Cascade | Apply foundational CSS concepts to style HTML elements effectively. Use AI as a debugging companion for resolving conflicts and understanding the cascade. | Styling a Personal Profile Page |
| 6 | Layout Technique: Flexbox and Grid | Utilize modern layout systems to design structured, responsive page compositions. Leverage AI for comparative visualization and layout troubleshooting. | Building a Multi-Section Layout |
| 7 | Responsive Design and Media Queries | Design mobile-first, adaptable interfaces using media queries and scalable components. Integrate AI to test responsiveness and identify optimization opportunities. | Designing for Every Device |
| 8 | Design Systems and Visual Hierarchy | Apply consistent styling principles and establish design patterns to ensure visual harmony. Use AI to critique aesthetics and improve design coherence. | Creating a Visual Design System |
| 9 | JavaScript for Front-End Developers | Introduce interactivity using JavaScript fundamentals and DOM manipulation. Explore AI for debugging syntax and explaining function behavior. | Adding Interactivity to a Web Page |
| 10 | DOM Events, User Interaction, and Asynchronous Data Integration | Build dynamic interfaces that respond to user input and retrieve data from APIs using asynchronous methods. Use AI to visualize events and data flow, identify bottlenecks, and suggest logic improvements. | Building a Responsive Interface |
| 11 | Performance and Accessibility Optimization | Assess web page performance and inclusivity through testing and optimization techniques. Integrate AI to generate checklists and summarize audit results. | Auditing for Speed and Inclusion |
| 12 | Cross-Browser Testing and Debugging | Compare rendering behaviors across major browsers and resolve compatibility issues. Use AI to explain discrepancies and propose solutions. | Debugging Across Platforms |
| 13 | Advanced CSS and Modular Design | Refine styling systems using CSS variables and modular architecture. Use AI to evaluate reusability and maintainability of styles. | Refactoring Modular CSS Architecture |
| 14 | Type-Safe Styling and LLM Code Reviews | Practice AI-assisted code reviews to improve readability and maintain quality. Use structured feedback to revise and enhance project codebases. | Creating Reusable Style Components |
| 15 | Front-End Testing and Quality Assurance | Explore manual and automated approaches to web testing and QA workflows. Use AI to help write test cases and describe bugs with precision. | Simulating a QA Review Process |
| 16 | Capstone Project: Accessible Portfolio Website | Synthesize all competencies to design and deploy a professional, multi-page portfolio. Use AI as a mentor for design critique and deployment guidance. | Accessible Portfolio Website |
Instructional Resources
For teaching notes, preparation steps, and facilitation guidance, see: