Step By Step HTML and CSS course for beginners

Learn the basic html syntax by using the doctype declaration, opening and closing tags, nesting head and body, and placing content in the body.

Create a new coming soon folder, save index.html and style.css inside it, and add an images subfolder to organize assets while using Sublime Text to manage HTML and CSS files.

Learn to add headings and paragraphs using h1 and p tags, with opening and closing tags, on a coming soon page, and include an email link.

Learn how to insert special characters like copyright symbols using HTML entities and codes. Understand browser compatibility and how to copy and paste codes into your HTML projects.

Learn to create web and email hyperlinks using the anchor tag and href attributes, including fully qualified web addresses and mailto links. See how clicks open destinations or email clients.

Learn to add images to a webpage with the img tag, using src, width, height, and alt, while using jpeg, png, or gif and storing files in an images folder.

Learn how to find and download social icons using icon archive, understand freeware licensing, and integrate icons into your web page with sizes like 64, 128, and 256.

Create clickable images by wrapping each image with an anchor tag and setting the href to the target site (YouTube, Twitter, Facebook), then save and reload to test.

Learn to validate your code with the w3c markup validation service, read validator feedback, and fix one problem at a time to ensure a working, cross-browser site.

Connect your HTML page to a single stylesheet by placing a head link with rel='stylesheet', type='text/css', and href='style.css', so styles decorate pages without changing content.

Learn the basics of CSS syntax through selectors, curly braces, and attribute-value pairs. Apply rules to body, h1, and p elements with color and background color, using colon and semicolon.

Select and apply fonts on your page using font-family with web safe fonts and sensible fallbacks, then control font size with percentage values to ensure accessibility across browsers.

Learn how to create a simple, complementary color scheme using Color Explorer to extract palettes from images, understand hexadecimal and RGB color codes, and save palettes for future use.

Learn how to change a webpage's background and text colors using CSS, apply color across the body selector, use hex values, and adjust link colors via the anchor selector.

Upload your CSS file to a validator to check for errors, view results with line numbers, and fix small typos. Validate early and often after major changes.

Learn how the file transfer protocol moves files between your computer and a web server, using an ftp client to upload and download with a server name, username, and password.

Learn how to upload and download files to your server using a file transfer protocol, connect to your server, transfer files, and verify updates in the directory.

Edit your webpage live on the server with Cyberduck and Sublime Text, configuring a preferred editor for instant changes. Save, refresh, and see updates without uploading files.

Learn to separate a webpage into identifiable sections using divs and IDs, label main, footer, and priority areas, and apply CSS styles to organize the layout.

Learn to apply different background colors to specific divs using id selectors in CSS, adjusting the main and priority sections, choosing hex colors, and updating text color for readability.

Change the width of a specific div using percentage values to create a fluid, responsive design that scales with the browser size.

Center the content inside the div by applying text align center to the text and other content. Apply the same style to the footer and reload to verify centering.

center an entire div using margin auto and set a width, using a container to keep all elements aligned; resize sections to 80 percent to achieve a neat, centered layout.

Learn to control link appearance by removing underlines with CSS. Use the a selector and text-decoration: none to hide links for cleaner webpage design.

Discover how to apply the CSS text-transform property to render text as lowercase or uppercase, control font size, and apply it to headings, footers, and other elements.

Create and reuse custom css classes to apply text transformations, such as lowercase and uppercase, across multiple elements using the class attribute in html.

Float an image to the right using a dedicated CSS class, so text wraps neatly around it. Apply the right class to the image and use clear to prevent overlap.

Explore the CSS box model by tuning margins and padding on divs to control outer and inner space, add top margins, and selectively apply styles to elements inside a footer.

Learn how to create rounded corners in CSS using the border-radius property, apply it to all divs or specific elements, and experiment with pixel values like 10 and 40.

Adjust line spacing on your page by using the paragraph selector with the CSS line-height, try 1.75 for comfortable spacing, and adjust font-size for the id priority as needed.

Learn to change a link's color and hover effect inside a priority id section using an id selector and a hover pseudo-class, while controlling text decoration.

Apply subtle drop shadows to two divs and the main container using the css box-shadow property, adjusting offset, blur radius, and rgba colors for a realistic, layered look.

Learn to create image effects with css, applying a white 10px border, drop shadow, and a snapshot class, then tilt the image using transform with vendor prefixes.