HTML & CSS - Quickstart | Ebook included

Learn to structure a web page with tag elements, including headings from h1 to h6, paragraphs, links with href, images with src, and empty elements like br and hr.

Specify the width and height attributes for images to reserve space and prevent layout shifts, improving page load speed. Use the browser's inspect tool to verify dimensions (240 by 160).

Use the alt attribute to provide alternate text for images, with width and height, supporting accessibility for visually impaired users and helping Google spiders index images.

Learn how CSS styles web pages by using selectors and declarations to set properties like color, font size, and background color for elements such as h1, h2, and paragraphs.

Learn CSS syntax, write selectors, declarations, and comments, and see color, text decoration, and font-size changes using an h2 selector on a sample page.

Learn to work with colors in css by applying hex color codes to h1 and the page background, using color pickers, and validating changes in the browser.

Learn to style page navigation using anchor links and internal anchors, build a semantic nav, remove default styles, make it inline and accessible, and optimize for SEO.

Explore how to style links with CSS pseudo-classes, using hover and visited states, first-child and nth-child selectors including odd/even, and class-based rules to apply color changes across lists.

Style images with the border property by setting width in pixels, choosing a border style (such as dotted or dashed) and a color to create visible borders for templates.

Learn how IDs provide unique targets for styling in HTML and CSS, distinguishing them from reusable classes, with practical examples targeting paragraphs and an image and applying color changes.

Explore how the CSS float property lets text wrap around an image by floating it to the left or right, and use the box model with margin shorthand for spacing.

Explore the downsides of floating elements and learn to use the CSS clear property as a quick fix to turn off floats, illustrated with images and headings.

Learn to use an external stylesheet by creating a separate stylesheet file, linking it with a link tag, and using classes for reuse across pages to maintain consistent styling.

save the document as an html file, rename to the proper extension, and preview in the browser; update the title, author, and meta tags in the head for seo.

Learn to implement main and secondary navigations using anchor links with hrefs to section ids, enabling smooth jumps to intro and about sections and reflecting changes in the address bar.

Add a footer displaying who created the site and the current year, using small tags for copyright notes and the copyright symbol via the HTML entity © all rights reserved.

Embed a YouTube video by replacing a placeholder with a YouTube wrapper and the embed link. Customize width and height and ensure the correct protocol.

Explore how to link external stylesheets using the link tag in the head section, apply custom CSS, and organize a multi-column Sublime Text layout for HTML & CSS quickstart.

Change appearance by styling headings and paragraphs with CSS: set h1 to a hex color and 40px, center it; bold and underline h2; and set paragraphs to 18px and justify.

Set the container width to 80 percent within a 70–80% range and center content with auto margins. Apply the same layout to both pages, including the top navigation.

Transform the navigation by turning the ul and li into inline elements with display inline-block, apply font size 22px, remove underline from anchors, and center the nav.

Learn to style an image with id pick to add a 1-pixel blue border and rounded corners. Use the border shorthand and include alt text to ensure display.

Master CSS float to wrap text around left or right images and adjust margins, borders, and widths for responsive layouts with aside and article elements.

Center footer and navigation by applying a shared text center class to the p, h1, nav, and footer, reuse the class across the document, and remove redundant CSS.