Web Programming for Graphic Design -Tracks

1
2
3

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.

HTML
Beginner

1
2
3
4

3 hours

Course

HTML Basics

| 51725 students

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.

HTML
Beginner

1
2
3
4

3 hours

Course

CSS Basics

| 10507 students

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.

CSS
Beginner

1
2
3
4

2 hours

Course

CSS Layout

| 8254 students

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.

CSS
Beginner

1
2
3
4

2 hours

Course

Enhancing Design with CSS

| 6232 students

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.

CSS
Beginner

1
2
3
4

97 min

Course

JavaScript Quickstart

| 5029 students

Get up to speed with the basics of JavaScript. In this course, you'll learn the fundamental concepts and syntax of the JavaScript programming language.

JavaScript
Beginner

1
2
3
4

3 hours

Course

JavaScript Basics

| 24680 students

JavaScript is a programming language that drives the web: from front-end user interface design to server-side backend programming, you'll find JavaScript at every stage of a website and web application. In this course, you'll learn the fundamental programming concepts and syntax of the JavaScript programming language.

JavaScript
Beginner

1 min

Instruction

Go Further with JavaScript

JavaScript is one of the foundational technologies for building web pages and applications. We have additional courses to help you learn more....(continue reading)

Viewed

Text

View

1
2
3
4

94 min

Course

Creating User Experiences

| 2772 students

Join us as we learn the basic principles of User Experience Design and how it shapes everyday interactions with products. By structuring products around users’ needs, we can ensure that the products do their job. You will learn how to meet users where they are, think through intuitive experiences, and create products that more effectively meet both your goals and your end users’ goals. This course will help you think more critically through the steps and decisions a user makes while interacting with your product. If you’re considering a career in User Experience (UX) or want to learn more about it, this course will expose you to how to design and plan around the people who use your product.

Design
Beginner

1
2
3
6

2 hours

Course

Introduction to Wireframing

| 3792 students

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.

Design
Beginner

1
2
3

71 min

Course

Prototyping with Figma

| 1458 students

In this course, you'll learn how to build interactive and sharable prototypes in Figma, a web-based visual prototyping tool. You'll create a prototype for a "prosumer" mobile photography app, and by the end, you'll have a better understanding of how to create interactive prototypes that can be shared with project stakeholders and team members.

Design
Beginner

1
2
3
4
5

4 hours

Course

Web Typography

| 5204 students

As web features barrel ahead, web typography advances with it. We now have more control over type than ever before. But, as the often-quoted line from Spiderman goes, “With great power, comes great responsibility.” Well-built websites can be plagued by bad typography, creating an unpleasant experience to the user. In this course, we’ll cover all you need to know to begin building websites with good typography, giving users a great experience.

Design
Beginner

1
2

46 min

Course

SVG Basics

| 16362 students

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.

HTML
Intermediate

34 min

Workshop

Rapid Website Prototyping

In this workshop, Treehouse web design teacher Nick Pettit will be demonstrating how to rapidly prototype websites using a combination of mockup tools and front-end frameworks.

Viewed

Design
Beginner

1
2

65 min

Course

Responsive Images

| 6271 students

Using the new source-set and sizes attributes, and the new picture element, it's possible to create images that behave better in a responsive design. These new pieces of markup allow us to deliver the right image to the right device, based on resolution, pixel density, and other factors we define. This will help web pages load faster and look better, and the most capable devices will get the best looking images possible.

HTML
Advanced

1
2
3

47 min

Course

Responsive Layouts

| 36569 students

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.