Become a Web Designer - HTML & CSS for Beginners

Explore how the internet works by tracing the steps from typing google.com in the browser to displaying the search results, and uncover the background processes behind web pages.

See how a browser request to google.com travels from your desktop through the internet service provider to dns server, which maps domain to ip address and returns data for rendering.

Explore how the internet's backbone uses submarine undersea cables to connect servers across continents, and how IP addresses map to locations via online tools.

Develop your first web page by displaying the hello voice message in a window developed using SDM, with a provided saper layout, and proceed to implement the page.

Create a dedicated HTML project folder to organize all related files, making them easily accessible for future reference as you begin learning HTML and CSS.

Open the Brackets editor and learn how to access and select a project folder to start writing HTML and CSS, pinning the app for quick access.

Create an HTML file by clicking the left pane to add a new file and naming it as hallowed HTML, then save and prepare for coding.

Focus on typing hello world and understanding the code structure, starting with the less-than symbol, exclamation symbol, and doctype space, then Stearman Yemen and the great symbol.

Key in HTML code step 2 teaches using the less-than and greater-than symbols to create opening and closing tags, nest elements in the body, and build a hello world snippet.

See that HTML is a plain text file, demonstrated by opening the created HTML file in Notepad and viewing its typed content.

Launch the html file in a browser by using Windows file explorer, then open with Google Chrome and verify the global message to confirm your first setup.

Launch HTML with live preview to see immediate changes in the browser, understand when to refresh manually, and use the provided library to test your pages without delays.

Explore how to declare the HTML5 doctype, define the HTML and body tags, and structure headings from h1 to h6, with a preview of how browsers render the page content.

Learn how HTML, the hypertext markup language first released in 1995, evolved through the W3C standards to HTML5, the latest specification guiding modern browsers like Chrome, Firefox, and Safari.

Learn how a browser renders an HTML file, view the page source with a right-click, and identify the doctype and HTML structure as shown on examples such as W3Schools.

Explore creating a hello.html page, set a relevant browser tab title, and prepare to implement a Hello World example in your first web design project.

Add a head tag and a title tag with hello world to hello.html, save the file, and verify the result using live preview.

Understand the importance of the title tag for identifying a web page when many tabs are open and ranking in search results. Its prefilled title helps saving pages to favorites.

Create a web page for a news article using a heading, subheading, and paragraph, and learn how to implement this structure in the next video.

Download the news article text by navigating to resources, then news. Copy the downloaded file to your learning folder on your desktop and proceed to the next video.

Create a basic news article page using HTML, including the DOCTYPE declaration, html and body elements, and multiple paragraphs as you implement this coding step.

Copy content from Neustadter into the news editor, place the title in the title tag, fill the paragraph tab, and preview results in the browser to ensure news article formatting.

Learn how html comments use <!-- and --> to hide content from the browser, and use the control slash shortcut to enclose in comments so heading content is not displayed.

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

Create a page that links to a news article by naming a file henbane hdmi and adding an anchor tag with headings; then load the page to view the article.

Demonstrate how the anchor tag uses its text, the article title, to label the link and how clicking navigates the browser to the linked page.

Learn how HTML attributes extend tags with name-value pairs, using quotes, and discover that each tag has a predefined attribute list, with multiple and user defined values.

Learn to create external links by converting a mention like SpaceX into a hyperlink that opens its Wikipedia page, and see how to implement this in the next video.

Turn the SpaceX word into an external link to a Wikipedia article. Open the link to verify the Wikipedia page and copy the URL from the address bar.

Link local and internet resources with the anchor tag, such as a Wikipedia page. Open external links in a new tab using the target attribute _blank.

Learn to display an image on the current page by embedding an image of the International Space Station into the news article on the Socotra page.

Create a folder for images to hold image files you download from the internet, so you can display them in your HTML project.

Display Brackets and a live preview side by side in Windows, dock the windows, and resize to instantly see changes.

learn how to download Wikipedia image by searching for international space station, selecting a 640 by 408 pixel image, and saving it in the images folder as ISIS dot GPG.

Learn to implement image display by inserting the image tag and using live browser preview to verify the image appears in the article, fixing tag issues along the way.

Learn to display lists in email and on a page using bullet and numbered items for world favorite food and top five digital companies, and how to implement them.

Learn to implement an unordered list in html by creating a new file, structuring with a title and list items, and compare your output to the expected result.

Learn how to implement ordered and unordered lists in HTML, using list items to display top five digital companies as numbered and bulleted content.