Building Websites with HTML, CSS and JavaScript

Paths

Building Websites with HTML, CSS and JavaScript

Authors: Barry Luijbregts, Craig Shoemaker, Gill Cleeren, Matt Milner, Susan Simkins, Paul Cheney, Chris Behrens, Mike Van Sickle, Matt Henry, Jeff Batt, Shawn Wildermuth, Paul D. Sheriff, Jill Gundersen, Neil Morrissey, Nate Taylor, Brice Wilson, Daniel Stern

HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript are three separate languages that work together to create web pages and web applications. HTML... Read more

What You Will Learn

In this path you will learn the basics of building web pages with HTML, CSS, and JavaScript as well as advanced formatting, styling, and JavaScript interaction techniques.

Pre-requisites

None

Building Websites with HTML, CSS and JavaScript

HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript are three separate languages that work together to create web pages and web applications. HTML creates structure, CSS styles the markup, and JavaScript creates interactivity. This path will start with the basics of creating a web page and styling it all the way up to creating interaction with JavaScript.

HTML, CSS, and JavaScript: The Big Picture

by Barry Luijbregts

Jan 16, 2020 / 1h 28m

1h 28m

Start Course
Description

At the core of creating applications for the web is a thorough knowledge of HTML, CSS, and JavaScript. In this course, HTML, CSS, and JavaScript: The Big Picture, you’ll learn how to create applications for the web. First, you’ll learn to display content on the web with HTML. Next, you’ll explore styling the web with CSS. Finally, you’ll discover how to make the web interactive with JavaScript. When you’re finished with this course, you’ll have a foundational knowledge of HTML, CSS, and JavaScript that will help you as you move forward to create applications for the web.

Table of contents
  1. Course Overview
  2. Why You Should Care About How the Web Works
  3. Displaying the Web with HTML
  4. Styling the Web with CSS
  5. Interacting with the Web with JavaScript
  6. Where to Go from Here

Building Websites with HTML, CSS, and JavaScript: Getting Started

by Craig Shoemaker

Jun 2, 2020 / 3h 50m

3h 50m

Start Course
Description

This course is special - because it takes you on a journey that assumes you're starting from the very beginning when it comes to building websites. In this course, "Building Websites with HTML, CSS, and JavaScript: Getting Started", you learn to build an interactive website from a blank page. First, you learn about the building blocks of any website - the foundations of HTML. Next, you discover how to use Cascading Style Sheets to change the look and layout of a website. Finally, you learn the basics of computer programming and how to use JavaScript to add interactivity to your site. When you're finished with this course, you will have the basic skills you need to continue your journey as a professional web developer.

Table of contents
  1. Course Overview
  2. Getting Started
  3. Building Your First Web Page
  4. Adding Style with Cascading Style Sheets (CSS)
  5. Working with Cascading Style Sheets (CSS)
  6. Building Content Pages
  7. Introduction to JavaScript
  8. Creating Interactivity with JavaScript
  9. Collecting User Data

Building Websites with HTML

by Gill Cleeren

Mar 31, 2020 / 2h 59m

2h 59m

Start Course
Description

Nearly every website out there is built with HTML. It's the language to learn when starting web development. In this course, Building Websites with HTML, you will gain the ability to build a real-world site from scratch while learning the concepts of the HTML language. First, you will learn the basics of HTML. Next, you will discover how to create pages that contain text, images, links, and tables. Finally, you will explore how to introduce styles with CSS and functionality with JavaScript. When you are finished with this course, you will have the skills and knowledge of HTML needed to build a real-world website with HTML.

Table of contents
  1. Course Overview
  2. Getting Started
  3. Setting up the Page Structure
  4. Adding Text, Headings, and Images to the Home Page
  5. Defining the Page Structure
  6. Adding Images to the Page
  7. Creating the Pie Overview Table
  8. Designing the Pie Detail Page
  9. Adding Navigation to the Site
  10. Including External Content Using iframe
  11. Storing Data with JavaScript

Working with Text and Lists in HTML

by Barry Luijbregts

Mar 27, 2020 / 37m

37m

Start Course
Description

You want to be able to show text and lists on your website. In this course, Working with Text and Lists in HTML, you’ll learn to display text and lists on your website. First, you’ll explore white space and text elements in HTML. Next, you’ll discover how to work with fonts and text styles. Finally, you’ll learn how to work with lists in HTML. When you’re finished with this course, you’ll have the skills and knowledge of basic HTML techniques needed to display text and lists on your website.

Table of contents
  1. Course Overview
  2. Working with Text in HTML
  3. Working with Lists in HTML

Creating Forms in HTML

by Matt Milner

Jul 3, 2020 / 1h 16m

1h 16m

Start Course
Description

A big part of HTML development involves creating forms for user input. In this course, Creating Forms in HTML, you will learn the skills you need to create useful input forms on your web pages. First, you will discover how HTML forms work and how to configure your form. Next, you will explore the various types of form inputs and how to best apply them. Finally, you will cover organizing, styling, and validating your forms. When you’re finished with this course, you will have a foundational understanding of HTML forms that will help you immensely as you move forward and create your own websites.

Table of contents
  1. Course Overview
  2. Understanding HTML Forms
  3. Using Form Inputs
  4. Organizing Form Inputs
  5. Styling and Validating Forms

Styling Websites with CSS

by Susan Simkins

Jun 19, 2020 / 1h 32m

1h 32m

Start Course
Description

Do you need to style a new web-page from scratch? In this course, Styling Websites with CSS, you’ll learn to style HTML elements with CSS. First, you’ll explore different ways to add CSS and how to create your first style rules. Next, you’ll discover how to use custom fonts and style text in various ways. Finally, you’ll learn how to use different types of selectors to implement a design. When you’re finished with this course, you’ll have the skills and knowledge of CSS needed to style websites.

Table of contents
  1. Course Overview
  2. Creating Style Rules
  3. Styling Text
  4. Sizing Elements
  5. Using Selectors

Creating Page Layouts with CSS

by Paul Cheney

Jul 13, 2020 / 2h 14m

2h 14m

Start Course
Description

Building responsiveness for small, medium, and large screens is important for any website. In this course, Creating Page Layouts with CSS, you will learn to leverage the power of media queries to build a mobile-first, responsive web site for a Pie Shop. First, you will lay out the page using appropriate HTML5 semantic elements filled with appropriate content. Next, you will add multiple stylesheets to help control the page for various page widths. Then, you will build hamburger navigation for small screens and horizontal navigation for wider screens. Finally, you will learn to create multi-column layouts using float.

When you are finished with this course, you will have the skills and knowledge to build responsive pages with CSS.

Table of contents
  1. Course Overview
  2. Introduction
  3. Basic Page with Semantic Tags
  4. Styles Sheets and Media Queries
  5. Build the Header and Footer
  6. Build Responsive Navigation
  7. Build the Hero
  8. Build this Week's Specials
  9. Responsive Fruit Pie Gallery
  10. Implementing a CSS Preprocessor
  11. Introduction to Bootstrap
  12. Wrap Up

Working with Colors and Images in CSS

by Chris Behrens

May 7, 2020 / 1h 38m

1h 38m

Start Course
Description

Learning HTML is mostly intuitive when working with text - but the path for colors and images is less obvious.

In this CSS Training course, Working with Colors and Images in CSS, you’ll learn the different ways to express color and images with CSS in HTML.

  • First, you’ll explore the different ways we can describe a color in HTML code.
  • Next, you’ll discover the differences between image formats and when to choose each.
  • Finally, you’ll learn how to detach all of this from your HTML content with CSS.
When you’re finished with this course, you’ll have the knowledge of working with visual content in HTML needed to deliver content effectively.

Table of contents
  1. Course Overview
  2. Understanding Colors on the Web
  3. Understanding Images on the Web
  4. Bringing Content and Visual Together with CSS
  5. How This All Works in a Real Software Lifecycle

Adding Graphics to Web Pages Using Canvas and SVG

by Mike Van Sickle

Apr 24, 2020 / 1h 42m

1h 42m

Start Course
Description

Humans are visual creatures and often look for ways to enhance our experiences with images and graphics. From understanding complex data sets via charts to getting the high score in the latest game, graphics are an important part of providing a positive experience for your users. In this course, Adding Graphics to Web Pages Using Canvas and SVG, you’ll learn to add custom graphics into web pages. First, you’ll explore how to create SVG documents and use them to create graphics that users can interact with. Next, you’ll discover what the canvas tag is and how it can also be used to allow users to create graphics using JavaScript APIs. Finally, you’ll learn how to choose whether SVGs or canvases are the best choice for the unique needs of your projects. When you’re finished with this course, you’ll have the skills and knowledge of web-based graphics needed to create rich and unique user experiences by adding custom graphics to your web pages.

Table of contents
  1. Course Overview
  2. Using SVG to Create Images
  3. Using Canvases to Create Images

Creating Layouts with CSS Grid

by Matt Henry

Jun 17, 2020 / 1h 41m

1h 41m

Start Course
Description

Layouts in CSS have always depended on hacks. Getting the look you want has meant pushing CSS to its limits using floats, HTML, and positioning tricks in unconventional ways. In this course, Creating Layouts with CSS Grid, you’ll learn how to use the brand new CSS Grid system to solve layout problems once and for all. First, you’ll discover why CSS Grid is a better way to do layout. Next, you’ll get up and running with the minimum necessary code to start using CSS Grid. Finally, you’ll explore the CSS Grid specification thoroughly, learning how to create any layout you can dream of. When you’re finished with this course, you’ll have a solid understanding of this critical technology needed to create modern, robust, and responsive layouts for the web.

Table of contents
  1. Course Overview
  2. Meet CSS Grid
  3. Up and Running with CSS Grid
  4. Defining Grids: In-depth
  5. Positioning Items: In-depth
  6. Advanced CSS Grid

Creating Responsive Pages with CSS FlexBox

by Jeff Batt

May 1, 2020 / 1h 21m

1h 21m

Start Course
Description

Creating flexible web page layouts could take complex CSS floats and media queries or require using into third party frameworks that use rows and columns, that then add a lot of extra code to your website. In this course, Creating Responsive Pages with CSS Flexbox, you’ll learn to create responsive webpages using CSS flexboxes. First, you’ll explore the basic concept of the CSS flexbox. Next, you’ll discover how to quickly layout content with the Flexbox using the axis. Then, you'll learn to get your content to be responsive with Flexbox. Finally, you’ll be presented options you can use to scale and align elements within the Flexbox container. When you’re finished with this course, you’ll have the skills and knowledge of using CSS flexboxes needed to create responsive web pages.

Table of contents
  1. Course Overview
  2. Understanding Flexboxes
  3. Setting up the Flexbox Container
  4. Adjusting the Flexbox Items
  5. Solving Flexbox Challenges

Working with Audio and Video in Web Pages

by Shawn Wildermuth

Jun 12, 2020 / 1h 1m

1h 1m

Start Course
Description

In this course, Working with Audio and Video in Web Pages, you’ll learn to integrate media (audio and video) onto web pages. First, you’ll explore how to use HTML tags to share audio and video with your users. Next, you’ll discover the options for hosting of your media. Finally, you’ll learn how to control media by using JavaScript in the browser. When you’re finished with this course, you’ll have the skills and knowledge of working with audio and video on your websites needed to embed media in your projects

Table of contents
  1. Course Overview
  2. Using Audio and Video in HTML
  3. Hosting Media for Web Pages
  4. Using JavaScript to Control Media

Working with Geolocation in HTML

by Paul D. Sheriff

Apr 6, 2020 / 1h 35m

1h 35m

Start Course
Description

Getting a user's position and mapping in websites is very common today. In this course, Working with Geolocation in HTML, you’ll learn to retrieve a user’s location from their browser and show their location on a map. First, you’ll explore the geolocation object available in all modern browsers. Next, you’ll discover how to display that location on a map, and use Google Maps to place markers at that location. Next, you’ll use Google Maps to get directions from one location to another. Finally, you’ll learn how the Geocoding features of Google Maps will then be used to search for addresses. When you’re finished with this course, you’ll have the skills and knowledge of geolocation and geocoding needed to embed and use mapping software within any HTML page.

Table of contents
  1. Course Overview
  2. Capture a User's Location Using the Geolocation Object
  3. Display Locations on a Map
  4. Embed Maps Using the Google Maps API
  5. Getting Directions with Google Maps
  6. Geocoding with Google Maps

Storing Data in HTML

by Jill Gundersen

Jun 16, 2020 / 33m

33m

Start Course
Description

There are instances in which you might need to store a small piece of user data, but you don’t want to utilize a database or worry about cookies. In this course, Storing Data in HTML, you’ll learn to utilize the use of a browser’s storage to store data providing user interaction with your website. First, you’ll explore local storage. Next, you’ll discover session storage. Finally, you’ll see how to determine which to use based on your needs. When you’re finished with this course, you’ll have the skills and knowledge of storing data needed to provide user interaction for your website.

Table of contents
  1. Course Overview
  2. Introduction
  3. Using Local and Session Storage
  4. Real World Use
  5. Summary

Optimizing and Deploying a Website

by Neil Morrissey

Jun 29, 2020 / 2h 4m

2h 4m

Start Course
Description

In order to reach your audience on the World Wide Web, you need your site to be available and discoverable. In this course, Optimizing and Deploying a Website, you’ll learn to host your website on the web and how to optimize it to be discovered and indexed by search engines. First, you’ll explore how the web and internet work, what a web server is, how to find a hosting provider, and how to upload your web pages. Next, you’ll discover how search engines work and some of the ways you can optimize your site to make the pages more friendly to search engine crawlers, which can move you up the list of search results. Finally, you’ll learn how to add Google Analytics to your pages in order to gather deep insights on how your website is being used. When you’re finished with this course, you’ll have the skills and knowledge of web hosting and website optimization needed to make your web pages available to users around the world, and to show up in search engine results when those users search for your content.

Table of contents
  1. Course Overview
  2. Hosting Your Website on the World Wide Web
  3. Deploying Your Website to a Web Hosting Provider
  4. Configuring Your Website
  5. Optimizing Your Site for Search Engines

Applying Special Effects to a Site Using CSS

by Nate Taylor

Jun 3, 2020 / 1h 54m

1h 54m

Start Course
Description

CSS provides you the ability to control the fonts, colors, layouts, and spacing used on your website. However, it can do more than that. It can also provide an interactive experience to your users. In this course, Applying Special Effects to a Site Using CSS, you’ll learn to improve the look and feel of websites that you build. First, you’ll explore creating rounded corners using CSS. Next, you’ll discover how to apply box shadows to objects. Finally, you’ll learn how to create animations using CSS transforms and transitions. When you’re finished with this course, you’ll have the skills and knowledge of CSS special effects needed to improve the look and feel of any website you create.

Table of contents
  1. Course Overview
  2. Creating Rounded Corners
  3. Adding Box Shadows
  4. Transitioning between States
  5. Transforming Elements
  6. Creating Animation

Debugging Sites Using Chrome DevTools

by Brice Wilson

Jun 12, 2020 / 1h 46m

1h 46m

Start Course
Description

Debugging client-side web applications can be difficult because they involve a complex mix of HTML, CSS, and JavaScript while also storing data on the client and constantly communicating with a web server. In this course, Debugging Sites Using Chrome DevTools, you'll learn how to use the powerful set of tools included with Chrome to quickly diagnose and fix problems in your client-side applications. First, you'll learn how to examine and edit both the structure and style of a site to make sure your designs are being implemented correctly. Next, you'll discover how to fully harness the power of the browser console to log output, execute JavaScript, and troubleshoot problems. Finally, you'll explore how to step through and debug JavaScript code right in the browser and save fixes back to your development environment. When you're finished with this course, you'll have the skills needed to confidently and efficiently debug modern client-side web applications.

Table of contents
  1. Course Overview
  2. Understanding the Capabilities of Chrome DevTools
  3. Examining and Editing Web Pages
  4. Using the Console
  5. Debugging JavaScript
  6. Viewing Network Communication and Local Data

Understand a Site's Traffic Using Google Analytics

by Daniel Stern

Jul 16, 2020 / 1h 6m

1h 6m

Start Course
Description

While the costs associated with online advertising continuously grow year after year, businesses and developers need to make informed decisions regarding what is effective and what is not, in order for their business to thrive in a highly competitive market.

In this course, Understand a Site's Traffic Using Google Analytics, you’ll learn to use Google Analytics to evaluate your site’s traffic and make decisions that will make a measurable difference for your client, employer, or business.

First, you’ll explore the process of implementing Google Analytics, applying the necessary JavaScript code to your application, and noting the results in your Google Analytics dashboard.

Next, you’ll discover how to create campaigns, pinpointing and categorizing the source of traffic to your application.

Finally, you’ll learn how to select and analyze Google Analytics reports, including Geography and Demographics, and turn that data into action points that can improve return on investment.

When you’re finished with this course, you’ll have the skills and knowledge of Google Analytics needed to optimize your advertising campaigns, understand your audience, and guide your client and employer to greater revenue and user satisfaction.

Table of contents
  1. Course Overview
  2. Understanding Google Analytics
  3. Adding Google Analytics to a Site
  4. Implementing Google Analytics Campaigns
  5. Realizing Actionable Insights with Google Analytics Reports
  6. Summary
Offer Code *
Email * First name * Last name *
Company
Title
Phone
Country *

* Required field

Opt in for the latest promotions and events. You may unsubscribe at any time. Privacy Policy

By providing my phone number to Pluralsight and toggling this feature on, I agree and acknowledge that Pluralsight may use that number to contact me for marketing purposes, including using autodialed or pre-recorded calls and text messages. I understand that consent is not required as a condition of purchase from Pluralsight.

By activating this benefit, you agree to abide by Pluralsight's terms of use and privacy policy.

I agree, activate benefit