HTML

• 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.

  Viewed
  • CSS
  • Beginner
• 42 min
  Workshop

  Pagination with GitHub Copilot

  Follow along with Dustin in this fun, unscripted, live coding session where he demonstrates the strengths and weaknesses of using GitHub Copilot as a co-developer. In this video, Dustin builds a friends app that utilizes pagination with vanilla JavaScript! How much do you think GitHub Copilot was able to help?

  Viewed
  • AI
  • Intermediate
• 15 min
  Workshop

  Can ChatGPT Build a Website?

  Leveraging the power of OpenAI’s ChatGPT is a great tool in your developer tool belt, but how accurate is ChatGPT when using it to build a website from a mockup? There are some surprising strengths as well as weaknesses. Follow along with Dustin to explore how ChatGPT fares at building a website from a mockup in this fun, AI-powered code-along.

  Viewed
  • AI
  • Beginner
• 15 min
  Workshop

  Build a Basic ChatGPT Clone with Vanilla JavaScript

  Learn to build a basic ChatGPT clone with vanilla JavaScript in this video. Follow along with Dustin as he walks you through the process, from writing the HTML for the UI to integrating the OpenAI API. By the end, you'll have a functional chatbot that can generate human-like responses to user inputs!

  Viewed
  • AI
  • Beginner
• 35 min
  Workshop

  How to Build a Google Chrome Extension: Strong Password Generator

  Ever wanted to make your own Google Chrome Extension? Follow along as Dustin builds a strong password generator and then converts it to a Google Chrome Extension! This project is built with HTML, SASS, and vanilla JavaScript so a good understanding of those concepts will help you understand this project. If you need a refresher, take a look at some of the courses in the Teacher's Notes that cover the basics.

  Viewed
  • JavaScript
  • Beginner
• 35 min
  Workshop

  Auto User Search with JavaScript - Treehouse Live

  Need practice working with the Document Object Model (DOM)? This project showcases some of the core concepts needed to interact with and manipulate the DOM. Follow along as Dustin builds a searchable input field that filters users based on your search query!

  Viewed
  • JavaScript
  • Beginner
• 37 min
  Workshop

  CSS-Only Facebook Reactions UI - Treehouse Live

  Most social media platforms allow users to interact with other users’ posts. Letting users use an emoji to show how they feel about them is a fun way to add some interactivity to your project or app. Follow along as Dustin reveals how to recreate the Facebook reactions UI with just CSS!

  Viewed
  • CSS
  • Beginner
• 33 min
  Workshop

  Build an Interactive Settings Panel - Treehouse Live

  Want to code out a real-world project with Dustin? Follow along with our Treehouse Live replay as he builds a settings panel UI from scratch with just HTML and CSS. Then, he refactors the app with JavaScript to render parts of the UI dynamically. Stick around to the end to find out how he implements a dark mode toggle for the settings panel itself with an event listener!

  Viewed
  • JavaScript
  • Beginner
• 38 min
  Workshop

  Create a Chat App UI - Treehouse Live

  In this live demonstration, Dustin builds a chat app UI (user interface) using HTML, CSS, and JavaScript. The slick design includes a toggle button for dark mode. The GitHub link in the teacher's notes includes both the starter files and the completed code. You can follow along and build the project yourself, as well as study Dustin's version. Note that he builds only the UI, not the chat app itself.

  Viewed
  • JavaScript
  • Beginner
• 8 min
  Workshop

  JavaScript Accordion

  Accordions are everywhere on the web and even in mobile apps. They’re an effective way to show and hide content based on user interaction. In this guide, I’ll go over how to create an accordion using HTML, CSS, and a little bit of JavaScript.

  Viewed
  • JavaScript
  • Beginner
• 10 min
  Workshop

  Animated Hamburger Menu

  Want to set up a hamburger menu for your mobile navigation with a slick animation? It's not as hard as you may think. Follow along while I tackle this small UX feature!

  Viewed
  • CSS
  • Beginner
• 3 min
  Workshop

  HTML-Only Accordion

  Accordions are all over the web and mobile apps. They are a great way to show and hide content based on user interaction and aren’t very hard to build. However, they usually require a bit of HTML, CSS, and JavaScript. Did you know you can build a simple accordion with only HTML in seconds? Follow along as I explain how to set this up!

  Viewed
  • HTML
  • Beginner
• 4 min
  Workshop

  CSS-Only Toggle

  Toggle switches are a useful way to show a UI’s state. It’s commonly believed that these are hard to create and require JavaScript. That’s simply not the case. Follow along as I walk you through how to create a toggle switch with just CSS!

  Viewed
  • CSS
  • Beginner
• 1 min
  Workshop

  How to Add a Favicon

  Favicons give your website a face and are easy to implement in your code. In this quick guide, we’ll go over what a favicon is and how to add one to your site.

  Viewed
  • HTML
  • Beginner
• 4 min
  Workshop

  Dark Mode in CSS

  How often do you find yourself on a website or app looking for a toggle for dark mode? Most apps nowadays, like Facebook, Twitter, Instagram, & Snapchat just to name a few, use some sort of dark mode feature. Implementing this is actually pretty quick and simple. There are many ways to go about this but the method I prefer is using CSS variables. Follow along and I’ll show you how I tackle this feature.

  Viewed
  • CSS
  • Beginner
• 19 min
  Workshop

  String Manipulation with JavaScript

  Learn and practice string manipulation methods that will allow you more control over data in your JavaScript programs.

  Viewed
  • HTML
  • Beginner
• 33 min
  Workshop

  Hello Front-End Web Development (FEWD)

  Front-end web developers write the code that turns a static mockup into an interactive web page. In this workshop, we’ll take a look at the types of code front-end developers write, and even try it out ourselves. But before we do that, let’s take a closer look at the term front-end. Front-end developers are sometimes referred to as client-side developers, since everything we code is directly viewable by the client–in other words, the visitor to our website or app.

  Viewed
  • HTML
  • Beginner
• 31 min
  Workshop

  SVG Workflow and Tools

  Learn useful tools and techniques for optimizing, organizing, and structuring your SVG files. Then learn to size and scale your SVG with inline attributes.

  Viewed
  • HTML
  • Intermediate
• 6 min
  Practice

  Practice Semantic HTML

  In this workshop, you'll practice the basics of semantic HTML. When you write markup that clearly communicates the meaning of your content, it is said that you're writing semantic markup.

  Viewed
  • HTML
  • Beginner
• 10 min
  Practice

  Practice Structuring and Grouping Content

  Practice the fundamentals of structuring and grouping content with markup.

  Viewed
  • HTML
  • Beginner
• 11 min
  Practice

  Practice File Paths

  Sharpen your HTML skills by practicing writing file paths for images and links.

  Viewed
  • HTML
  • Beginner
• 11 min
  Workshop

  HTML Dialog

  Dialog boxes are a common design pattern across many websites, so the W3C created the <dialog> element as part of the HTML standard. In this Workshop, we'll learn how to use the <dialog> element in combination with JavaScript to trigger modal and non-modal windows.

  Viewed
  • HTML
  • Beginner

Whoops! Perhaps you can try a broader search.

Reset all filters