View all Tracks
Web Design
This 40-hour Track will fully equip you in the fundamentals of web design! You’ll learn how to design and build beautiful websites via the basic principles of design like branding, color theory, and typography. You’ll also learn HTML and CSS, which are the common code languages that all modern websites are built on. From coding to in-browser work and animation, your web design career starts here.
We'll start with a foundation in HTML and CSS, covered in the first few courses of the Track. Next, you'll move into more intermediate topics like CSS Selectors and HTML Forms and Tables. The Typography for Designers course will give you the skills you need to choose beautiful type for your site.
Next, we'll cover CSS Layouts, starting with Display Modules, the Float property, and positioning page content. The Responsive Layouts course will teach you to use the foundational principles of responsive design as a framework for thinking about page layout for different types of screens. Then, you'll master Flexbox, a set of CSS properties that give you a flexible way to lay out content.
The next part of the Track takes us through Bootstrap, an open source front end framework, as well as in-browser prototyping. Next, you'll cover how to work with CSS Transforms and Transitions, to bring your visual content to life.
Our SVG Basics and SVG and CSS courses will give you a good understanding of creating graphics and animations using these methods. Finally, to wrap up the Track, we'll cover how to use Sass to boost your front end workflow, and using CSS Grid Layout.
Start your web design journey today with this in-depth Track!
-
An entry-level salary for the technologies covered in this track is about $42,000 / yr on average.
-
Some companies that use these technologies regularly include: Google, Facebook, Yahoo, eBay, Amazon, and Treehouse
Ready to start learning?
Treehouse offers a 7 day free trial for new students. Get access to 1000s of hours of content. Learn to code, land your dream job.
Start Your Free Trial
-
Course
- 1
- 2
- 3
Introduction to HTML and CSS
Get started creating web pages with HTML and CSS, the basic building blocks of web development. HTML, or HyperText Markup Language, is a standard set of tags you will use to tell the web browser how the content of your web pages and applications are structured. Use CSS, or Cascading Style Sheets, to select HTML tags and tell the browser what your content should look like. Whether you are coding for fun or planning to start a career in web development, learning HTML and CSS is a great place to start.
-
Course
- 1
- 2
- 3
- 4
HTML Basics
Learn HTML (HyperText Markup Language), the language common to every website. HTML describes the basic structure and content of a web page. If you want to build a website or web application, you'll need to know HTML.
-
Course
- 1
- 2
Web Design Process
Going from a blank screen to a finished website can be daunting. In this course, you'll learn about the major steps involved in designing websites. We'll learn how to gather information, explore potential concepts, and iterate on a design. By the end, you'll have the foundation you need to continue your design journey.
-
Course
- 1
- 2
- 3
- 4
CSS Basics
In this course, we're going to learn the basics of CSS, one of the core technologies for designing and building websites and applications. No matter what kind of website or web application you want to build, you'll have to use CSS. If you haven't written much CSS, or even if you’ve never written CSS at all, don’t worry. That's what this course is for. We’ll start with basic CSS concepts, then gradually progress to more advanced topics and lessons.
-
Course
- 1
- 2
- 3
- 4
CSS Layout
In this course, we're going to learn techniques for better control over our CSS layouts. We’ll cover how the CSS Box Model impacts the presentation of each HTML element, learn to control the position of each element onscreen, and even begin to adjust our layouts for different screen sizes and environments.
-
Course
- 1
- 2
- 3
- 4
Enhancing Design with CSS
In this course, we're going to learn CSS properties for enhancing visual design. We’ll cover various properties for styling text, including loading web fonts from external resources. We’ll learn techniques for turning our CSS boxes into more than just rectangles. And finally, we’ll learn some really cool visual effects using CSS filters and gradients.
-
Course
- 1
- 2
- 3
CSS Selectors
In this short course, we're going to go beyond the basic selector concepts covered in CSS Basics. Besides the common ways to select elements with type, ID and class selectors, we're able to target elements based on their attributes, position in the HTML document, even their relation to other elements. By the end of this course, you'll have gained a better understanding of the power and flexibility behind CSS selectors. You'll have a new set of valuable tools in your CSS toolkit to use on your next project.
-
Course
- 1
- 2
- 3
HTML Forms
The web is a two-way communication medium. There are lots of HTML elements for displaying data and producing output, and conversely, there are also lots of HTML elements for accepting input. Accepting input from the user means creating web forms. In this course, we’ll learn about all the most important form elements that web professionals use on a daily basis.
-
Course
- 1
- 2
HTML Tables
The web is filled with text and images, but it's also filled with information like sports scores throughout the years, lists of employee names and email addresses, or nutrition facts for your favorite foods. HTML tables enable the display information in what is commonly known as tabular data, which is information that's stored in a table-like structure of columns and rows. In general, anything that you might put into a spreadsheet could go in a table. There are many use cases for a table, so it's important to add them to your skills because it's a very common method for displaying information.
-
Course
- 1
- 2
- 3
- 4
- 5
Typography for Designers
Typography is one of the most important aspects of good design. In this course, you'll learn all you need to know about creating good typography as a UX Designer: how to choose a typeface; what to look for when laying out type, how to create typographic hierarchy, laying out type, and creating responsive typography.
-
Course
- 1
Mobile-First CSS Layout
In this course, you'll get hands-on practice using CSS layout techniques such as a CSS Reset with Normalize, a layout wrapper, a sticky footer, and centered content with a full-width header. In addition, you'll learn principles that will help you approach your next project with a mobile-first mindset.
-
Course
- 1
- 2
- 3
Responsive Layouts
Responsive web design is a collection of techniques for building websites that work on multiple screen sizes. In these lessons, we're going to use the foundational principles of responsive design as a framework for thinking about page layout. By the end, you should have a better understanding of how to approach common decisions in responsive design.
-
Course
- 1
- 2
- 3
CSS Flexbox Layout
Flexbox is a set of CSS properties that give you a flexible way to lay out content. With flexbox you can change the direction, alignment, size and order of elements, regardless of their original size and order in the HTML. You can even stretch and shrink elements and distribute space, all with just a few lines of CSS!
-
Course
- 1
- 2
- 3
- 4
Bootstrap Basics
Learn to build with Bootstrap, one of the most popular open source front end frameworks, to help you build a functional design and layout in little time.
-
Course
- 1
- 2
Prototyping in the Browser
Before you design a website, it's important to have some kind of a plan or a wireframe to guide your efforts. But sometimes when you go from a simple sketch to digital pixels, the results aren't exactly what you expect. When you work with real HTML and CSS, and you're able to see your site on a real screens, you're able to see a more accurate representation of the final result. In this course, we're going to build a website prototype using the Bootstrap web framework.
-
Course
- 1
- 2
- 3
- 4
CSS Transitions and Transforms
CSS transitions and transforms can create simple animations that enhance user interactions in websites and apps. In this course, you'll build an interactive image gallery using CSS transitions and transforms. You'll use transition properties to define durations, delays, and easing functions. Then, you'll learn how to rotate, scale, and move elements in 2D and 3D space, with CSS transforms.
-
Course
- 1
- 2
SVG Basics
Scalable Vector Graphics (SVG) is an XML markup language for creating two-dimensional images using vectors. This is different from traditional raster-based image formats that use pixels, like JPEG and PNG. When used on web pages, SVG images provide an infinite level of detail, so they look sharp regardless of screen size or pixel density. In this course, we'll look at situations where SVGs are better than PNG and JPEG files, as well as when an SVG might not be the best choice. Finally, we'll learn how to modify SVGs using CSS.
-
Course
- 1
- 2
Animating SVG with CSS
SVG (Scalable Vector Graphics) also supports interactivity and animation, so you can animate and interact with SVG like you're able to do with HTML. This short course covers the most common methods for animating SVG: CSS transitions, transforms, and keyframe animations.
-
Course
- 1
- 2
- 3
- 4
Sass Basics
Sass is a stylesheet language that extends CSS with features like variables, nested rules, mixins, and functions, in a CSS-compatible syntax. In this course, you'll learn to use the powers of Sass to boost your front end workflow. The examples will teach you why you should use Sass in your projects. By the end, you will be writing more efficient CSS using code that is easy to read and maintain.
-
Course
- 1
- 2
- 3
CSS Grid Layout
CSS Grid Layout provides a built-in, more efficient way of designing grid-based layouts in the browser. It brings a new set of properties, functions and flexible units that let you control the exact placement and sizing of grid components.
-
Track Completion
This course includes:
- Introduction to HTML and CSS 2 hours
- HTML Basics 3 hours
- Web Design Process 43 min
- CSS Basics 3 hours
- CSS Layout 2 hours
- Enhancing Design with CSS 2 hours
- CSS Selectors 2 hours
- HTML Forms 2 hours
- HTML Tables 59 min
- Typography for Designers 3 hours
- Mobile-First CSS Layout 38 min
- Responsive Layouts 47 min
- CSS Flexbox Layout 105 min
- Bootstrap Basics 2 hours
- Prototyping in the Browser 59 min
- CSS Transitions and Transforms 3 hours
- SVG Basics 46 min
- Animating SVG with CSS 85 min
- Sass Basics 4 hours
- CSS Grid Layout 111 min