View all Tracks
Design and Build a Website
Have you ever thought to yourself, I have a great idea for a website, but I don’t have the technical knowledge to pull it off? This 16-hour Track will take your website idea from concept to reality!
This course covers some of the basics you'll need to get your website up and running. Gather design inspiration, learn to wireframe and mock up your layout ideas, and tackle the basics of HTML and CSS.
You'll start with two conceptual design courses to teach you fundamental ideas: Visual Design Foundations, and Collecting Design Inspiration.
Next, you'll take a few hands-on UX (user experience) courses: Introduction to Wireframing, Designing Layouts, and Creating Mockups. After you're finished with these, your website will have started to take shape visually! You'll follow these up with a practice session on color, and a practice session on layout.
The next part of the Track focuses on basic web development. You'll cover HTML, CSS, and how to implement them on your new site. Finally, you'll learn how to debug your CSS and finish things up.
Make your site a reality with this web design Track, perfect for beginners!
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
Visual Design Foundations
In this course, you'll build your design vocabulary and learn how to describe the basic building blocks of any visual image. We'll start by learning about the elements of design, like line, shape, and form. Then we'll move on to the principles of design, like balance, harmony, and movement. By the end, you'll have a better foundation for discussing design with other team members and you'll be able to make objective observations about what is often subjective subject matter.
-
3 minWorkshop
Collecting Design Inspiration
Collecting design inspiration is a fun way to get fresh ideas! It also helps you stay current with design trends and become aware of emerging design patterns. The goal is to collect designs that spark your own creative ideas.
Viewed -
Course
- 1
- 2
- 3
- 5
Introduction to Wireframing
Wireframing is a useful part of the design process. Throughout a website or mobile app project, you will have a lot of ideas and the best way to sort through those ideas is to brainstorm. Wireframes are a visual artifact of brainstorming, and the goal is to make them with minimal effort, as to encourage ideation. Whether you're a designer or not, wireframing is an important skill to have in your toolkit. It's beneficial for product managers, marketers, or anyone else with ideas for a website or mobile app. Wireframes are a valuable tool for visualizing user experiences, iterating on ideas, and sharing ideas with others.
-
Course
- 1
- 2
Designing Layouts
In this course, you'll learn how to apply design principles through a series of examples. Each example will include some component that can be improved, and by making the improvement, you'll develop strong aesthetic sensibilities about things like visual and typographic hierarchy, the use of grids and alignment in layouts, and how to choose colors.
-
37 minWorkshop
Creating Mockups
Learn how mockups are used in the design process, and discover techniques for bringing them into your workflow. Practice transforming a set of wireframes into realistic depictions of the app by applying visual design styling and using Apple’s UI Kit for Adobe XD.
Viewed -
7 minPractice
Before and After: Color
Practice designing with color.
Viewed -
5 minPractice
Before and After: Layout
Improve the layout of an existing mobile iOS app.
Viewed -
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.
-
22 minWorkshop
Introducing the VS Code Text Editor
Text editors provide important tools that help developers write code. Get a feel for text editors and what they do by learning the basics of Visual Studio Code, a popular text editor with many tools and shortcuts to help to speed up development and make building websites and applications faster and easier.
Viewed -
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.
-
35 minWorkshop
Debugging CSS with Chrome DevTools
In this workshop, we'll explore the most useful and efficient tool for debugging CSS: Chrome Developer Tools.
Viewed -
2 minInstruction
Continue Learning about Web Design
Now that you've finished the Design and Build a Website Track, you may wish to continue learning more about web design....(continue reading)
Viewed -
Track Completion
This course includes:
- Visual Design Foundations 35 min
- Collecting Design Inspiration 3 min
- Introduction to Wireframing 104 min
- Designing Layouts 52 min
- Creating Mockups 37 min
- Before and After: Color 7 min
- Before and After: Layout 5 min
- HTML Basics 3 hours
- Introducing the VS Code Text Editor 22 min
- CSS Basics 3 hours
- CSS Layout 2 hours
- Enhancing Design with CSS 2 hours
- Debugging CSS with Chrome DevTools 35 min
- Continue Learning about Web Design 2 min