Front End Web Development

HTML Basics

| 51660 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

CSS Basics

| 10460 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

CSS Layout

| 8209 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

Enhancing Design with CSS

| 6198 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

35 min

Workshop

Debugging CSS with Chrome DevTools

In this workshop, we'll explore the most useful and efficient tool for debugging CSS: Chrome Developer Tools.

CSS
Beginner

1

38 min

Mobile-First CSS Layout

| 5872 students

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.

CSS
Beginner

1
2
3

105 min

CSS Flexbox Layout

| 33389 students

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!

CSS
Intermediate

1
2

59 min

HTML Tables

| 45146 students

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.

HTML
Beginner

1
2
3

HTML Forms

| 60687 students

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.

HTML
Beginner

1
2
3

CSS Selectors

| 34131 students

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.

CSS
Beginner

1
2

91 min

Accessibility For Web Developers

| 4527 students

Accessibility is a process that specifically considers the needs of people with disabilities. In this course, you’ll learn about the standards in place to guide developers in creating experiences that are accessible to all users as well as tools and techniques to ensure your projects are up to those standards.

HTML
Beginner

2 min

Instruction

Introduction to Git

A version control system like Git can keep you from losing your work, and help you collaborate with others....(continue reading)

Text

View

1
2
3

111 min

CSS Grid Layout

| 8968 students

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.

CSS
Intermediate

1
2
3
4

3 hours

JavaScript Basics

| 24590 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
2

83 min

JavaScript Numbers

| 22419 students

Numbers are everywhere in programming. You use them to track a player's score in a game, calculate the cost of shipping a product, or count the number of times a "Like" button gets clicked on a page. In this course, you'll learn how to use numbers for useful tasks in your JavaScript programs, including doing math, converting strings to numbers, generating random numbers, and more.

JavaScript
Beginner

1
2
3

JavaScript Functions

| 20300 students

JavaScript functions let you create reusable chunks of code. They make programming faster, easier, and less error-prone. They are also one of the essential concepts in JavaScript programming.

JavaScript
Beginner

1
2

76 min

JavaScript Loops

| 12862 students

Loops are a way of repeating code -- they're handy for repetitive tasks. Loops are frequently used for actions that need to run a particular number of times or until a certain condition is true.

JavaScript
Beginner

1
2
3

JavaScript Arrays

| 11786 students

Arrays provide a way to store multiple pieces of information. An array is a list of values: numbers, strings, boolean values, or even other arrays. In this course, you'll learn the basics of using arrays as data structures.

JavaScript
Beginner

1
2

67 min

JavaScript Objects

| 11650 students

Objects are an essential part of JavaScript; they provide a flexible way to keep track of data by associating a name with a particular value. In this course, you'll learn the basics of JavaScript objects as a data structure (using objects to store key/value pairs).

JavaScript
Beginner

1
2
3

JavaScript and the DOM

| 5289 students

JavaScript lets you create interactive web pages which can respond to a user's actions. In this course, you'll learn how to bring web pages to life using the power of JavaScript.

JavaScript
Beginner

1
2

66 min

Interacting with the DOM

| 3677 students

Along with selecting DOM elements in JavaScript we can also write code that gives elements behavior. In this course we will first explore how to watch for interaction and respond using the method addEventListener. We'll learn about different types of events and how we can use the relationships between elements to write more powerful code.

JavaScript
Intermediate

1
2
3
4

111 min

Object-Oriented JavaScript

| 13411 students

In this course, you'll learn the basics of object-oriented programming in JavaScript along with the new ES2015 Class syntax.

JavaScript
Intermediate

1
2

AJAX Basics

| 9475 students

AJAX is an important front-end web technology that lets JavaScript communicate with a web server. It lets you load new content without leaving the current page, creating a better, faster experience for your website's visitors. In this course, you'll learn how AJAX works and how you can use JavaScript to communicate with a web server. We'll use plain JavaScript to create AJAX requests and use the response to dynamically update your web pages. Along the way, you'll build mini-projects to reinforce your learning.

JavaScript
Intermediate

1
2
3
4

Asynchronous Programming with JavaScript

| 8029 students

In this course, you will learn why asynchronous code matters and how to write code that avoids blocking behavior using three approaches: callbacks, promises, and async/await.

JavaScript
Intermediate

44 min

Workshop

Working with the Fetch API

Learn how to use the Fetch API to fetch resources.

JavaScript
Intermediate

1
2
3
4

Bootstrap Basics

| 13080 students

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.

CSS
Beginner

53 min

Workshop

Create a Portfolio Using HTML and CSS

Portfolios are a great way to show off your skills to a potential employer. In this workshop, we’ll start with provided mockups and journey together through the construction of a stunning portfolio using HTML and CSS, sprinkling in a touch of JavaScript for interactivity. Prioritizing a mobile-first approach and keeping accessibility in mind, we’ll ensure the portfolio is not only visually captivating but also user-friendly for all.

CSS
Beginner

1 min

Instruction

Next Steps: Hosting Your Websites

Ready to share your projects on the web? GitHub provides a hosting solution, called GitHub Pages, that lets you host your web projects directly from a GitHub repository. ...(continue reading)