The beginners guide to coding

Explore how websites talk to your computer and how your browser communicates with servers through requests and responses, including downloading and assembling website files.

Understand what a browser is, a program that requests information, renders the page, and handles HTML and JavaScript, and options like Google Chrome, Mozilla Firefox, Apple Safari, and Microsoft Edge.

Explore how a browser requests information from a server, downloads files, and renders an interactive website. Understand that different rendering engines mean cross-browser compatibility matters.

Explore how web requests work, from get and post to delete and patch, the handshake between browser and site, and how smaller requests improve bandwidth and relate to restful APIs.

Trace the request lifecycle from domain mapping to IP address, then server processing and generating a response. Observe how the browser downloads files, leverages caching, and renders the final page.

Explore how servers respond to web requests with lightweight JSON or XML data, and how a browser and JavaScript render images dynamically after each request and response.

Explore how browsers download HTML, CSS, and JavaScript files, use engines to interpret code, and render a page while JavaScript dynamically updates and requests more assets.

Explore how to view your requests and responses using a modern browser, inspect the network tab, and analyze assets, ajax requests, and file sizes to understand page loading.

Open your browser to Caleb EOH, inspect the page with the network tab, filter requests by document, HTML, images, and JavaScript, and share a screenshot in your project.

Learn the basics of html, install a coding program, and create a web page to understand html as the bone structure of every website and the first step to coding.

Learn how HTML, the hypertext markup language, forms the backbone and structure of every website, and why HTML5 is the current standard that underpins all web development.

Download and install a free cross-platform text editor, available for mac, windows, and linux, then open it to see its layout and color options.

Explore HTML syntax by identifying elements with opening and closing tags, their text content, and attributes like title, while browsers read and highlight code.

Explore the base structure of a web page by building an HTML5 document with doctype, html, head, and body, and place a title for the page.

Master the title element in HTML by placing a single title tag inside the head. Update and refresh to see a search friendly tab name like hello from Caleb.

Explore HTML basics by creating paragraphs with the p tag and structuring pages with headings from h1 to h6, using opening and closing tags and refreshing to see changes.

Explore how white space does not matter to the browser, how view source reveals preserved spaces, and how opening and closing p tags create separate paragraphs in the markup.

Learn how HTML nesting works by using divs, paragraphs, and headings, and visualize parent, child, and grandchild relationships with the inspect tool.

Learn how to apply bold, italic, and underline using HTML tags, nest elements correctly, and structure text within paragraphs for clean, accessible web pages.

Discover that the div element has no special meaning and acts as a block-level container that takes the full width, while contrasting it with inline elements.

Compare block and inline elements in HTML, showing how block elements like paragraphs and divs occupy full width while inline elements like bold, italic, and underline sit beside text.

Learn to create and link web pages with absolute and relative links, using anchor tags and href attributes to build a two-page site and handle missing pages.

Learn how to force links to open in a new tab using the target _blank attribute, and distinguish internal pages from external ones with practical HTML examples.

Learn to add images to a webpage with the image element, set the src from a file or url, adjust width and height, and provide alt text.

Learn to turn an image into a clickable link by wrapping it in an anchor tag, linking to a second page or external site, and understanding image and anchor nesting.

Learn to add a horizontal rule and a line break in HTML using the hr and br tags; the hr is a self-closing, full-width separator, and br creates a line.

Explore HTML comments, their <!-- ... --> syntax, and how they don’t render but appear in the source; use them to explain code and safely comment out sections.

Explore lists in HTML by comparing ordered and unordered lists, learn nesting with list items and opening and closing tags, and practice creating multiple items.

Explore the style element and cascading style sheets, see how css sets a black background and white text with the body selector, and note this topic will be covered further.

Learn how to add JavaScript to HTML with the script tag, including inline and external files, and why HTML should be learned first before JavaScript.

Share code safely with CodePen by creating and saving a new pen, then sharing a link, avoiding risky downloads, and focusing on HTML over JavaScript.

Find extra support for beginners in a free, large Facebook group for learning to code; ask questions, share your code pen link, and get timely responses.

Create an HTML portfolio file, add a header with h1 and a subheader, insert an image, and include a link to Twitter, Instagram, or Facebook; you can Google for answers.

Advance from HTML basics to intermediate HTML by exploring semantics, internal links, pathing, and table-based layouts; build a properly structured page with a title, navigation, content, and forms with IDs.

Discover why the HTML underline tag is deprecated and swap it for a span with inline CSS using text-decoration: underline. Understand the difference between inline and block elements and styles.

Master internal links by creating anchor tags with href attributes and unique ids to jump between page top and bottom, test on long pages, and use top and bottom anchors.

Add a favicon to your page using a PNG or JPEG with a link tag. Place the image in the same folder as index.html and preview in the browser.

Master pathing by organizing folders and files, avoiding spaces with underscores or dashes, using relative paths with .., and ensuring index.html is the default page with case sensitivity.

Learn to create html tables using table, tr, and td, with borders and width 100 percent, and discover why tables persist in emails and government sites.

Explore table rows and cells, using tr and td to build a table with a tbody, add borders for visibility, and practice creating a two-by-two grid of four cells.

Master merging table cells and rows by building a three by three table, applying column span and row span, deleting extra cells, and refreshing to see the layout updates.

Learn to control table and cell widths using percent and pixel values, set 100% table width, 50% and 20% cells, and use a span to merge two cells.

Explore how to implement table headers using the th element, contrast with table data cells, and see headers appear centered and bold after refresh.

Learn to apply inline css with the style attribute on a div, setting padding, white text, and a black background. Understand the syntax of declarations separated by semicolons.

Apply html classes to style elements efficiently, moving repeated styles into a style element, reusing class names, and combining multiple classes for consistent html email styling.

Explore HTML IDs as unique identifiers, the one-copy rule, apply a 15px red border example, and differentiate IDs from classes for linking and styling.

Explore two code formatting approaches: block pre tags for preformatted text with whitespace sensitivity, and inline code with code tags, highlighting mono spacing and HTML entities.

Learn how HTML entities render special characters with ampersand and semicolon. Explore HTML tags as text, showing bold, and using superscript and subscript.

Form data travels via get or post to page.html, but we have no server; HTML is a scripting language, and forms use inputs, text areas, and submit buttons.

Explore how input elements work within a form, including text fields with placeholders and default values, password masking, and how to integrate text areas and other input types.

Learn how to create a text area in HTML, understand how whitespace matters, and set placeholders, columns, and rows, noting that the value goes between the opening and closing tag.

Explore how html buttons control form submission with button, reset, and submit types. The get method appends form fields to the url, so avoid putting passwords in urls for security.

Explore dropdown menus by using a select element with option values, including disabled states, default selection, and required validation, then preview form behavior and submit interactions.

Embed videos on a web page using an iframe, set frame border to zero, copy a YouTube embed code, and adjust width and height for proper display.

Create a complete HTML5 page layout using a table with header, navigation, content, and footer, including an image, a paragraph, a header, and a YouTube video, and a copyright notice.