Upgrade your skills with Codecademy's Pro Intensive, Build Web UIs from Scratch.
This unique intensive covers design principles and concepts while simultaneously teaching you how to implement these principles in code, using HTML and CSS. In just 8 weeks, we’ll cover the fundamentals of usability, accessibility, color theory, typography, layout and more.
After completing Building Website UIs, you’ll have the foundation to incorporate best practices of visual design and user interface design to confidently create Website UIs that are polished and usable.
The capstone project consists of you integrating user research and all of the design principles that you learn throughout the intensive to write a proposal to improve the UI of an e-commerce website. In the second half of the capstone project, you will then make these design changes that you recommended, based on your advanced HTML and CSS knowledge.
Unit 1: Intro to User-Centered Design
This unit covers the process and guiding principles of user-centered design.
Topics:
- User Personas
- Interpreting User Research
- SWOT Analysis
- Website Usability Conventions
Project:
- Fresh Deals E-Commerce Website
UNIT 2: HTML & CSS Foundations
This unit covers the basics of HTML and CSS. Learners who are already comfortable with HTML and CSS are encouraged to skip to the projects and quizzes before moving on.
Topics:
- Introduction to HTML
- Common HTML Elements
- HTML Tags
- CSS Setup and Selectors
- CSS Visual Rules
Projects:
- Fashion Blog
- Healthy Recipes
- Olivia Woodruff
Unit 3: Intro to Usability
This unit covers the main principles of usability (learnability, efficiency, memorability, errors, satisfaction) and how to write and use user stories.
Topics:
- Nielsen’s Principles of Usability
- Writing User Stories
- Assessing the Goodreads.com User Interface
Project:
- Baker’s Bike Shop: User Stories
Unit 4: Accessibility
This unit covers basic visual design principles, that will make your site more attractive and visible to all of your users, as well as semantic HTML, which makes your site navigable via screen readers.
Topics:
- Visual Design for Accessibility
- Semantic HTML for Accessibility
- Setting Up and Using Screenreaders
Projects:
- Gigantic Workflow Website
- Accessibility Off-Platform Screenreader Project
Unit 5: Color Theory
This unit covers color theory, and color for UI Design.
Topics:
- Color Theory (color wheel, complementary colors, contrasting colors, etc)
- Color For User Interfaces (Semantic use of color for UI)
Projects:
- Cumulative Project
Unit 6: Text and Typography
This unit covers how to use text and typography in an efficient and highly visible way.
Topics:
- Intro to Typography
- Best Practices for Text Design
- Lessons Learned From Eye Tracking Research
- Link fonts, Font-face, and Fallback fonts
Project:
- Cumulative Project
Unit 7: UI Layout Concepts
This unit covers CSS Grid, a powerful way of organizing the content and images on your website, in a way that creates symmetry and visual balance.
Topics:
- Whitespace and Symmetry
- Scrolling and Placement
- CSS Grid
Projects:
- Pup-Spa
- Grid Architecture
- Cumulative Project
Unit 8: Navigation
This unit covers the principles of website navigation, or, how to help your users find the content that they are looking for in as few clicks as possible!
Topics:
- HTML Buttons
- CSS Animations
- CSS Navigation
Projects:
- Cumulative Project
Unit 9: Capstone Project:
The capstone project consists of you integrating user research and all of the design principles that you learn throughout the intensive to write a proposal to improve the UI of an e-commerce website. In the second half of the capstone project, you will then make these design changes that you recommended, based on your advanced HTML and CSS knowledge.