HTML CSS Course 2023 For All Developers (Beginner Friendly)

Trace the evolution of HTML from HTML 4.01 to HTML5 and how browsers with the V8 or Spidermonkey engines render pages. Explore client–server architecture, request–response flows, and CRUD operations.

Learn how to use html heading tags from h1 to h5, understand font size hierarchy and opening and closing tags, and create an index.html in vscode for practice.

Master p tag, br tag, and list tags— including nesting of lists— while using VS Code live server to auto refresh, and organize content inside head and body with formatting.

Learn to embed images with the img tag, set the src path from web or a local images folder, and make images clickable using the anchor tag.

Learn to use the anchor tag and image tag, create multiple input fields (text, password, date, file), add labels and breaks, and implement a submit button in HTML.

Build a simple webpage with headings, paragraphs, lists, anchor links, and clickable images, plus username and password inputs with a submit button, and learn div tag and class usage.

Highlight text with the bold tag, inspect and modify a page using the document object model, and adjust image height and width with pixel values in a local copy.

Master building an HTML table with the table tag, using tr for rows and td for data, adding headers such as player name and score, and br tags for spacing.

Learn to embed audio and video in a web page using the audio and video tags, set controls, and reference files via relative paths.

Embed online audio and video with the audio tag and iframe, including YouTube embeds, and understand that some sites refuse to connect.

Build a basic multi-page site by adding about.html to index.html, linking pages with anchors, using HTML boilerplate and doctype, and previewing with live server.

Learn to build a multipage website by embedding an about me page into index.html using anchor tags with relative paths, adding a contact page, and separating links with br tag.

Learn how to host your website on GitHub by creating a public repository and uploading your project files with drag-and-drop, then commit the changes.

Create a GitHub repository, upload all files including index.html, then use settings to enable pages on the main branch and save the route for free hosting.

Launch your live site, share the URL, and verify pages like about us and contact us with images and media links; next, learn CSS styling to beautify the HTML site.

Learn how CSS, or cascading style sheets, style websites—color changes on hover and button styling—and explore three approaches: inline, internal, and external CSS for applying styles across pages.

Learn inline css by using the style attribute to apply a background color to a simple html page, with h1 and h2 elements and a quick live-server preview.

Explore css selectors—element, class, id, attribute, and universal—and the css box model (content, padding, border, margin) with div containers and basic styling in the head.

Explore how to style HTML with CSS using a div with class names, apply backgrounds, borders, text alignment, and margins by defining styles in the head's style tag.

Create and structure page sections using div tags and a shared box class, including box title and box content containers, and prepare for styling in the next class.

Master inline css with the style attribute to color headings and paragraphs, then learn internal css with selectors and classes to apply changes in one place for all headings.

Learn tag based styling by applying h2 and p selectors to change colors, explore inline css, element selectors, and class based styling using dot box title for consistent box titles.

Learn how class based styling and tag based styling work together to style a box with colors, borders, and typography, and how to use the comment tag.

Explore the float property in HTML and CSS, learn how to align boxes and create responsive layouts that adapt to screen size, and how to clear floats with clear left.

Learn how id selector styling takes precedence over class and tag selectors, demonstrating the priority order, and how to use multiple selectors to style elements.

Master attribute selectors that target elements by a specific attribute and value, demonstrated with anchor tags and the target attribute values blank and self for highlighting.

Master the universal selector, which uses a star to apply styles to all elements, including font size, background color, and text color. It can target only a div.

Explore combining element, class, and id selectors with grouping (comma) and descendant and parent-child selectors to style multiple headings, such as turning h1, h2, and h4 blue.

Use the parent-child selector to target one level down under a box content container, then apply descendant selectors to reach two-level deep with blue violet, crimson, and Times New Roman.

Learn how to chain CSS selectors to target elements by class and ID, combine selectors for precise styling, and apply color and font size to specific list items.

Create a style.css file, link it to your HTML page, and reuse the stylesheet across multiple pages to maintain styling—note that slow loading can leave pages unstyled.

Learn CSS positioning concepts, including static, relative, fixed, absolute, and sticky, with practical examples of how each sets box position.

Master sticky positioning in CSS with top, showing how elements become fixed at the top edge when inside their parent, and stop sticking at the bottom of that parent.

Explore building a toolbar using a list, styling with CSS, and adding anchor links with hover effects, padding, borders, and background color to create a clickable navigation bar.

Learn to build a functional toolbar with clickable links and images, using anchor styling, text-decoration none, and hover-based pseudo classes for color and size changes.

Explore using the img tag with a pseudo class to create hover effects on images, adjusting opacity and size, while applying clickable image links with relative paths and css classes.

Explore how to style tables with border collapse and zebra-striped rows using the nth-child pseudo class, creating blue and white alternating backgrounds for clear, readable data.

Explore how to style input fields with CSS pseudo classes, using the focus state to toggle colors and apply IDs to target specific fields, with typography and color tweaks.

Explore the CSS display properties none, block, inline, and inline-block, and learn how block occupies full width and breaks to a line, while inline takes only the required width.

Explore responsive web design that adapts pages for desktops, tablets, and phones by resizing, hiding, shrinking, or enlarging content with HTML and CSS, using the viewport tag width=device-width.

Learn to build responsive web designs with media queries using the @media rule and min-width and max-width breakpoints inside a style tag to show three boxes at different sizes.

Learn how flexbox enables responsive layouts by using a flex container and flex items, and control direction, alignment, justification, and wrapping with display:flex, flex-direction, justify-content, align-items, and flex-wrap.

Apply flexbox item properties, including order, flex grow, flex shrink, align self, and flex basis, and observe how flex direction changes item width or height for responsive layouts.

Learn the difference between CSS grid and flexbox, focusing on two dimensional grid layouts, grid lines, and placing items using grid template columns and rows; control gaps and alignment.

Explore CSS grid item properties, using grid column start and end, span, and grid area to control how items occupy rows and columns across a container.

Explore Bootstrap five, a popular CSS framework that lets you copy code into HTML to build web pages quickly, except Internet Explorer 11 and down.

Download bootstrap css and jquery and place them in your project. Link css in the head and jquery and bootstrap js in the body to work offline.

Congratulates learners on completing html and css, urges hands-on practice, and using google and web docs to resolve doubts, while previewing courses in javascript, nodejs, jquery, sql, and SAP Hana.