Learn to Code Series: HTML Basics, Resources and Activities

Learn to Code Series: HTML Basics, Resources and Activities
Adobe Products Featured

As designers, it’s our job to push boundaries, improve user experience, and support company goals, but sometimes it’s hard to know what’s possible with our designs without knowing what’s possible with code.  The goal of this Learn to Code series is to give designers and code enthusiasts the foundation they need to start their coding journey.  With these fundamentals, you can begin to explore what’s possible with code and ultimately what’s possible with design.

This post will provide a guide to resources and activities you can use to continue learning HTML, as well as an activity to reinforce what you learned in our Facebook Live session (view a recording below).

View the completed project files from our live stream.

Learn to Code Activity

Use this Dreamweaver CC activity to continue working on the project you started in the first Facebook Live session!

All About HTML

These resources give in-depth information about HTML and will help reinforce concepts and terminology you learned in our first Facebook Live session.

  • HTML Cheat Sheet – “This cheat sheet – or HTML code quick reference – lists the common HTML tags and their attributes, grouped into relevant sections in an easy-to-read format.”
  • HTML Basics – Learning Web Development with Mozilla Developer Network
  • How to Use HTML Meta Tags – More information about using meta tags to boost your website’s Search Engine Optimization (SEO)
  • All About File Paths – This article discusses all the different types of file paths you can use in HTML.  Check it out and make sure you’re using the right type of path!

Practicing HTML

These resources give you a chance to practice your HTML skills:

  • HTML Beginner Tutorial – Use this tutorial to reinforce what you learned in our Facebook Live Session.
  • HTML Fundamentals – Use this interactive platform to practice your HTML or see what others are doing at their “code playground.”
  • A Free HTML and CSS Tutorial – This guide takes you through a broad overview of the web and then dives into HTML and CSS basics.
  • Learn to Code HTML and CSS – This extensive tutorial will walk you through the ins and outs of HTML and CSS.
  • Codecademy – Free interactive way to practice your coding skills.
  • Khan Academy – A great tutorial to practice your HTML.

Learn Dreamweaver CC

These CC Learn resources from Adobe will help you dive into all of the features that make Dreamweaver a great tool for coding.

Take the Next Step

These resources will help you take your HTML to the next level.

  • Introduction to HTML5 – Curious about HTML5 and its new features? Check out this overview for more information.
  • HTML5 Element Index – A great overview of all of the new elements available with HTML5.
  • HTML Inputs – Learn how to use HTML inputs to create forms on your website

Resources for New Coders

These resources are a few of the most popular for beginner and advanced coders alike.

  • Stackoverflow – Got a coding question? The answer will most likely be on this forum for coders.
  • Codepen – Codepen is, “a playground for the front-end web.” Use Codepen to practice your HTML, share your code, and see what others are building.
  • A List Apart: Code – Many people may be familiar with this blog for design articles, but A List Apart also has a great section filled with useful coding articles too.
  • /r/web_design – See what’s going on in the web design community with this sub-reddit.

Complete Learn to Code Series:

Recommended Articles