-
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 web sites and applications faster and easier.
Viewed -
Course
- 1
- 2
- 3
- 4
- 5
- 6
- 7
CSS Basics
CSS (Cascading Style Sheets) is a style sheet language that describes the presentation of web pages. Whereas HTML forms the structure of a web page, CSS is what developers use to style HTML with colors, backgrounds, font sizes, layout, and more. As you'll learn, CSS is one of the core technologies for designing and building websites.
-
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 -
Instruction
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.
Viewed -
Track Completion
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 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.