-
Course
- 1
- 2
- 3
- 4
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
- 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 is what forms the structure of a web page, CSS is what we use to style the HTML with colors, backgrounds, font sizes, layout, and more. As you'll soon learn, CSS is one of the core technologies for designing and building websites.
-
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’s lots of HTML elements for displaying data and producing output, and conversely, there’s 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, list 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
CSS Layout Basics
Learn to work with common layout and positioning methods used in web design. In this course, you'll get hands-on practice with basic CSS layout techniques like display modes and floats. You'll use your new CSS layout skills to build the layout for a simple web page. Then learn to enhance the layout using relative, absolute and fixed positioning.
-
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
Design Foundations
Have you ever wanted to understand and create aesthetic designs for the web? In this Deep Dive we will learn what design is and how to harness its power. Breakdown the components that conjure the perfect aesthetic. Also create and fix a design of your own.
-
Course
- 1
- 2
- 3
- 4
- 5
- 6
- 7
Photoshop Foundations
Photoshop Foundations teaches the knowledge and skills relating to Adobe Photoshop that are most relevant for a web design professional. The lessons learned here provide a solid foundation for studying more advanced Photoshop topics.
-
Course
- 1
- 2
- 3
- 4
- 5
Adobe Illustrator for Web Design
Using a project-based learning approach to Illustrator’s core features, walk through the process of designing a simple website beginning with making a wireframe, and then using that wireframe as the basis for creating a page mock up for mobile and desktop platforms. Along the way, use the basic drawing and shape tools to create an illustrated graphic logo. And with responsive web design in mind, we’ll utilize the benefits of both scalable vector graphics (SVGs) and CSS export capabilities.
-
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
Logo Design Basics
This course will not only cover the basics of logo design but will also walk through the process of creating a logo from start to finish. Follow Mat Helme in his pursuit to create a logo for a task manager app called ODOT, while using his process known as the "Logo Sprint".
-
Course
- 1
- 2
- 3
- 4
Brand Identity Basics
In this course, we’ll take an in-depth look at the brand identity design process: from planning, strategizing and research, all the way through design and finalizing the project. We’ll also explore what exactly makes a brand image and why process is so important. Branding can be challenging, but with preparation and expectations, we can create amazing work and continue to hone in on what generates the best results. By the end of this course, you will have the tools and knowledge to create meaningful and comprehensive brand identities.
-
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.
-
Track Completion
Web Design
In this track, you’ll learn how to design and build beautiful websites by learning the basic principles of design like branding, color theory, and typography which are all instrumental in the design process of a website. You’ll also learn HTML and CSS, which are the common code languages that all modern websites are built on. These are useful skills to acquire as they are needed by nearly every single business in the world to communicate to customers. By the end of this track, you’ll have all the skills required to design and build your own websites or even start a career with one of the thousands of companies that have a website.
-
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