Lessons · Coding · beginner · Programming with Mosh

HTML Tutorial for Beginners: HTML Crash Course

The video “HTML Tutorial for Beginners: HTML Crash Course” by Programming with Mosh as 9 lessons, with the idea explained, the code from the screen, steps to try in the practice terminal, practice problems with solutions and a quiz that leads back to the moment.

9lessons
10pieces of code
1formula
27exercises
70min of video
Open the lessons →Lesson 1 is free · Beyond Pass opens all
HTML Tutorial for Beginners: HTML Crash Course, video by Programming with Mosh▶ 1:09:33 · Programming with Mosh
123456789
0:009 lessons across the whole video1:09:33

You will be able to

  • Set up VS Code with Prettier and Live Server to build and preview a web page locally
  • Explain how the browser, HTTP requests and responses, and the DOM work together to display a page
  • Write a valid HTML document with a head, body, title, images, text and links
  • Apply basic CSS rules and classes to style HTML elements
  • Use semantic headings, emphasis elements, HTML entities and relative or absolute links correctly
  • Inspect and debug a page with browser DevTools and validate HTML and CSS

Good to know first

  • Basic computer skills such as creating folders and opening files
  • Ability to install software and use a web browser
  • Curiosity about how websites are built, no prior coding experience required

Syllabus

9 lessons

  1. 1

    Course tools: VS Code, Prettier and Live Server Free

    0:04–2:403 min of video

    This lesson shows you the three tools you need for the HTML and CSS course: the VS Code code editor, the Prettier formatter extension and the Live Server extension, plus the Google Chrome browser for testing pages. You will learn what each tool does and how to install the two extensions.

    5 build steps2 exercises3 questions
  2. 2

    Front-end fundamentals and the learning roadmap Beyond Pass

    2:40–9:367 min of video

    You learn what the front end and back end of a website are, and what HTML, CSS and JavaScript each do. You also get a realistic roadmap of the skills to learn next, in order.

    3 exercises3 questions
  3. 3

    How the web works: URLs, HTTP requests and responses Beyond Pass

    9:36–14:275 min of video

    You will learn what happens between typing a web address and seeing a page: the browser (client) sends an HTTP request to a server, the server sends back an HTTP response containing HTML. You will also see how the browser turns that HTML into a DOM and fetches the extra resources it references.

    2 code3 exercises3 questions
  4. 4

    Inspecting network traffic with browser DevTools Beyond Pass

    14:27–18:354 min of video

    You will open Chrome DevTools, use the Network tab to see every HTTP request your browser sends when loading google.com, and read the status, type and headers of a response. You will also learn to filter the request list by type.

    7 build steps3 exercises4 questions
  5. 5

    Building your first web page with HTML Beyond Pass

    18:35–25:527 min of video

    You will create index.html from scratch in VS Code, using the doctype, html, head, body, title, img and p elements, and view it through Live Server. You will also learn what an opening tag, a closing tag and a src path mean.

    1 code8 build steps4 exercises3 questions
  6. 6

    Styling with CSS: selectors, rules and classes Beyond Pass

    25:52–30:475 min of video

    You will learn how a CSS rule is built from a selector and declarations, and how to style an image and text on a page. You will also learn how a class lets you style only some elements of the same type.

    1 code5 build steps3 exercises4 questions
  7. 7

    Formatting code, inspecting the DOM and validating markup Beyond Pass

    30:47–39:068 min of video

    You will learn to keep HTML neatly formatted with Prettier and format-on-save, to inspect the DOM and live styles in Chrome DevTools, and to check your markup and CSS with the W3C validators. Together these three habits help you read, debug and trust your web pages.

    5 build steps3 exercises4 questions
  8. 8

    Text elements, headings and special characters Beyond Pass

    39:06–53:4715 min of video

    You will learn how the head's meta elements describe a page, how to mark up text with paragraphs, emphasis, strong and headings in a correct hierarchy, and how to show reserved or special characters with HTML entities. You will build a small page along the way and check it in the browser.

    3 code5 build steps3 exercises4 questions
  9. 9

    Links, images and image sizing with object-fit Beyond Pass

    53:47–1:09:3316 min of video

    You will learn how to create links with the anchor element (to other pages, files, sections on a page, websites and email), and how to embed images with alt text and resize them with object-fit. Along the way you will see the difference between relative and absolute URLs.

    3 code1 formula6 build steps3 exercises4 questions

Free preview · Lesson 1 in full

Course tools: VS Code, Prettier and Live Server

This lesson shows you the three tools you need for the HTML and CSS course: the VS Code code editor, the Prettier formatter extension and the Live Server extension, plus the Google Chrome browser for testing pages. You will learn what each tool does and how to install the two extensions.

0:04 to 2:40 in the video

The idea

To build websites you need a code editor, which is a program where you write code. The course uses Visual Studio Code, usually called VS Code, which is free. You can use another editor such as Sublime Text or Atom if you already know what you are doing, but VS Code is the recommended choice so that you can follow along easily. Download the latest version from code.visualstudio.com.

VS Code can be extended with extensions, which are small add-ons that give it new abilities. Open the Extensions panel from the left sidebar (the icon of four squares) and search for the extension by name. The first extension is Prettier - Code formatter. It tidies up your code automatically so that indentation and spacing look neat and consistent. Click the Install button next to it and it is ready.

The second extension is Live Server, made by Ritwick Dey. It launches your web page inside a local development web server on your own computer. When you change a file and save it, the page in the browser can reload to show your changes, which makes testing much faster. Search for Live Server in the Extensions panel and click Install.

Finally, you need a browser to view and test your pages. The course uses Google Chrome, and it is a good idea to use the same browser so that what you see matches the course. Once these three tools are set up, you are ready to write your first web page.

Key points

  • VS Code is a free code editor; download the latest version from code.visualstudio.com. 0:37
  • The Extensions panel lets you add tools to VS Code; search by name and click Install. 0:49
  • Prettier Code formatter tidies up your code so it looks neat. 0:56
  • Live Server runs your web page in a local development server so you can test it. 1:36
  • The course uses Google Chrome to view and test pages; use the same browser to follow along easily. 2:35

Build along in the practice terminal

  1. Go to code.visualstudio.com in your browser and download the latest version of VS Code for your computer. Install it like any other program. 0:37
  2. Open VS Code, then click the Extensions icon (four squares) in the left sidebar to open the Extensions panel. 0:45
  3. Type Prettier in the search box and find the extension named Prettier - Code formatter. Click its Install button. 0:49You should see: The Install button changes to Uninstall or Disable, showing the extension is installed.
  4. Clear the search box, type Live Server, and find the extension by Ritwick Dey. Click Install. 1:49You should see: Live Server appears as installed in the Extensions panel.
  5. Install Google Chrome if you do not have it, so you can use the same browser as the course. 2:35

Practice

Do it

Open VS Code, open the Extensions panel and install both Prettier - Code formatter and Live Server. Then close and reopen VS Code and check that both still show as installed.

Solution
  1. Open VS Code and click the Extensions icon in the left sidebar.
  2. Search for Prettier, then click Install.
  3. Search for Live Server, then click Install.
  4. Close VS Code, reopen it, and open the Extensions panel again.
  5. Check that both extensions are listed as installed.

Both Prettier and Live Server show as installed after restarting VS Code.

Explain

In your own words, explain what Prettier and Live Server each do for you while you build a website.

Hint

Think about one tool that changes how your code looks, and one that changes how you see your page.

Solution
  1. Prettier formats the code: it fixes indentation and spacing so the code is neat and easy to read.
  2. Live Server runs the page in a local development server so you can open it in the browser and see your changes while testing.

Prettier neatens the code's layout automatically, and Live Server runs your web page on a local server so you can view and test it in the browser.

Quiz

  1. Which tool does the course use to format your code neatly?

    1. Live Server
    2. Prettier code formatter
    3. Google Chrome
    4. Sublime Text
    Show the answer

    B. Prettier code formatter · The Prettier code formatter extension tidies up code. Live Server launches the page, and Chrome is the browser.

    0:49 watch the moment

  2. What is the job of the Live Server extension?

    1. It formats code automatically
    2. It downloads VS Code
    3. It launches your website in a local development web server
    4. It designs the page layout
    Show the answer

    C. It launches your website in a local development web server · Live Server runs your web page inside a local development web server so you can view and test it.

    1:36 watch the moment

  3. Where do you find the extensions in VS Code?

    1. The Extensions panel in the left sidebar
    2. The Chrome settings page
    3. The bottom status bar only
    4. The code.visualstudio.com website
    Show the answer

    A. The Extensions panel in the left sidebar · The Extensions panel (the four-squares icon in the left sidebar) lets you search for and install extensions.

    0:45 watch the moment

Open lesson 1, with the video →

Lessons 2–9

They open with Beyond Pass: every lesson of every course, in full. One payment: $14.99 for 90 days or $29 for a year. No subscription.

Get Beyond Pass →Start lesson 1 free

Made by Beyond from the video “HTML Tutorial for Beginners: HTML Crash Course” by Programming with Mosh. The video plays in YouTube's own player. Watch it on YouTube · All lessons