Become a Web Designer - HTML for Beginners

Explore how the internet works by tracing the steps from typing google.com and pressing enter in the address bar to displaying the search page, and what happens in the background.

Explains the end-to-end data flow from a desktop browser to Google server and back, including how DNS translates a domain to an IP address and returns HTML for rendering.

Understand how submarine cables form the internet backbone by tracing the path from India to a California server, using IP lookups, IP2Location, and the submarinecablemap.

Create your first web page using HTML to display a Hello World message, following a sample layout, and prepare to explore the next video.

Create a dedicated project folder for your HTML files, such as html-learn on your D drive, to keep all resources organized and easily accessible for future reference.

Open Brackets, pin the app to the taskbar for quick access, then open the html-learn folder from the file menu to start creating and writing code.

Create a hello.html file in Brackets by right-clicking the editor, selecting new file, and entering hello.html to display a hello world page, then prepare it for editing.

Begin by typing the first HTML code to display hello world, focusing on characters and the code structure, then learn how the doctype and HTML tags organize the document.

Write the html code by adding the html, body, and h1 tags with indentation and auto-generated closing tags. Save the file and continue to the next video.

Open the hello.html file in Notepad to show that HTML is a plain text file. The content matches what is typed in Brackets, demonstrating that HTML remains plain text.

Open hello.html in Google Chrome from the html-learn folder to view the hello world message and celebrate your first HTML code.

Launch hello.html with Brackets live preview to see changes instantly in a new browser window, using the lightning icon and 'welcome to live preview' message; no manual refresh needed.

Explore how the doctype declares the HTML version. Compare five with four, and see how the HTML root and body organize content, including heading tags from h1 to h6.

Explore what HTML stands for, its history from 1995, and how the HTML specification by the W3C guides browser development and HTML5 today.

Discover how a browser renders HTML files using the HTML specification, view page source on examples like hello.html and w3schools, and identify doctype and HTML tags.

Examine the hello.html output, adjust the Chrome browser tab title to hello world, and outline how to implement this in the next video.

Implement the title in hello.html by adding a head and title tag with 'Hello World', save the file, and verify the result in live preview.

Understand how the title tag identifies a web page across multiple tabs, auto-fills in favorites, and informs search engine ranking and results display.

Create a web page for displaying a news article by structuring a heading, subheading, and paragraph, and prepare to implement this layout in the next video.

Download the news article text from Resources as news.txt, copy it to the html-learn folder, then complete the desktop steps and proceed to the next video.

Create a news article page by coding the core HTML structure, including doctype, html, head, title, and body with h1, h3, and p tags.

Learn to implement a news article page by copying content from news.txt into news.html, using Brackets vertical split, and filling title, h1, h3, and p tags before live preview.

Explore how HTML comments are implemented, using <!-- to start and --> to end, and see that commented content is not processed or displayed by the browser.

Create a web page with a heading and a link that points to another page, so clicking the link displays the news article page you created earlier.

Implement a headlines.html page with doctype, html, head, and title 'Headlines', a body with an h1 and a link to news.html via href, enabling users to view the news article.

Learn how the anchor tag works, see a code snippet, and understand how the browser reads the link text, underlines it, and navigates to the href target when clicked.

Explore HTML attributes, including tag syntax, attribute name equals value, and values in double quotes. See how an anchor tag can include multiple attributes.

Learn to implement external links by turning SpaceX into a clickable hyperlink that opens the Wikipedia page. Preview the next steps for adding hyperlinks in HTML for beginners.

Wrap SpaceX with an anchor tag and set href to the Wikipedia URL to create an external link. Save and preview the file to verify the link opens Wikipedia.

Explore how the anchor tag uses href to link local or internet resources, and how target _blank opens links in a new tab to keep the current page.

Display an image on a news article page by placing the International Space Station photo between the subheading and the first paragraph, then implement this in current page with HTML.

Create a folder named images in the html-learn directory to hold the image file you download, then proceed to the next video.

Demonstrate docking Brackets and the Live Preview side by side in Windows to quickly check changes and boost productivity.

Open Wikipedia, search for the International Space Station image, and save the 640 x 408 pixel image as iss.jpg in the images folder.

Show how to display an image in HTML by using the img tag with src='images/iss.jpg', with live preview in Brackets, and validate the image appears in the browser.

Learn to display lists in a html page by creating unordered and ordered lists, as you present items like world favorite foods and top five digital companies.

Implement an unordered list in Brackets by creating a file named list.html with standard html structure (doctype, html, head, body, h1) to display world's favorite foods: pasta, meat, and rice.

Show how to implement an ordered list in HTML by adding an ol with five li items under a top 5 digital companies heading, and explain ul, ol, and li.