HTML & CSS : Code Your Own Interactive Websites

Create and save your first html5 file as index.html or index.htm, then open it in a browser and inspect how the html, head, and body tags render.

Understand how HTML, a markup language, adds content to web pages, featuring doctype declarations, opening and closing tags, and the head and body sections with visible headings.

Learn to use HTML comments to organize your pages, mark sections like head and body, and keep notes invisible in the browser, improving readability and editing.

Explore the head elements and metadata in HTML, including meta tags for keywords and description. Learn how these meta tags help search engines index and describe your site.

Explains how to use the html5 head meta tag to control the viewport, setting width and initial-scale for responsive design and how images behave when their size exceeds the viewport.

The HTML5 title tag defines the page title shown in the browser and in search results. Craft concise, keyword rich titles under 20–25 words to improve page ranking.

Learn how to write inline JavaScript using the script tag in HTML5, including opening and closing tags and placing code so the browser reads it and renders the page.

Link a favicon to your web page by editing the head and adding a link tag, using a 16x16 icon from the image folder and the appropriate image type.

Explain how to use HTML5 headings from h1 to h6 inside the body, and compare their font sizes to structure a webpage.

Learn how to add paragraphs to a webpage by using the HTML p tag, insert dummy text, and preview the page in a browser.

Learn to create hyperlinks with the anchor tag and anchor text, set href to direct to external sites, and use target="_blank" to open links in a new tab.

Learn to structure a webpage by creating divs for each section: heading, paragraph, link, and image, using IDs to organize content and improve readability in the browser.

Learn how to use the span tag to color specific words red while keeping text on a single line, contrasting it with the div element's block behavior.

Learn to mock up font markup elements in HTML5 by using tags like b, i, u, sup, sub, small, strike, and del to design and style fonts.

Learn to create and customize HTML5 lists, including ordered lists with ol and li elements, using type attributes for roman or letter markers, and exploring definition lists.

Learn to create HTML5 tables with header and data rows, fill content, and apply internal CSS to add a 1px black border for a clean, professional look.

Build an HTML5 form using the form element, choose the method (get or post), set the action, and create text input fields with name attributes to capture user data.

Create radio button options in HTML5 forms by using input type='radio', labeling age ranges like 18–25 or 36–50, and applying the checked attribute for a default selection.

Learn to build interactive forms by adding checkboxes in HTML5, using input type=checkbox, setting default selections with the checked attribute, and grouping options like bike, car, and board.

Build a dropdown in HTML5 forms using select and option items, add a placeholder option with disabled and selected attributes, and include countries like USA, UK, Canada, and India.

Learn to embed external content on a webpage with iframe tags by editing the source attribute, removing form elements, and embedding videos and audios.

Learn to embed video using the HTML5 video tag, add controls and multiple sources for browser compatibility, and test the video in a simple project.

Learn to embed a YouTube video in an HTML5 page by using the iframe embed code and pasting it into your HTML file, then adjust the height and width.

Learn the css syntax, including selectors, properties, and values, with examples like h1 selector and color: red, and explore the universal selector star that targets all elements in the browser.

Discover how to style fonts in CSS by using font-family, font-weight from 100 to 900, and font-size in pixels to control typography in your interactive web pages.

Apply CSS id selectors to target individual elements, contrast them with classes, then style two divs using distinct ids to render red and green colors.

Discover how CSS margins and padding shape layout, inspect defaults, remove margins with margin: 0, and control spacing using margin shorthand and individual properties like margin-top, margin-right, margin-bottom, and margin-left.

Explore the CSS box model by creating and styling borders, setting border color to red, width, and style, and using padding and margins to understand the content area.

Set and test css height and width to control paragraph size in your browser. Save changes, refresh, and observe how 400px width and height shape the layout.

Explore how max-height and max-width constrain image sizes in CSS, preserving aspect ratio while preventing stretching as the browser renders the page.

Explore how to use CSS child selectors to target specific child elements, style headings by using the child selector, and apply color changes to create precise page designs.

Explore pseudo classes and pseudo elements in css by styling paragraphs with first letter and first line selectors, adjusting color and font size while observing width-driven line breaks.

Learn to create side-by-side boxes using the float property in CSS, style box one and box two, and remove gaps so they align left and right.

See how absolute positioning places a paragraph using top and left offsets, then switch to relative positioning to reveal placement within the document flow.

Explore fixed position in CSS and compare it with absolute positioning. Apply a fixed class to an element to keep it in place while scrolling, with practical code examples.

Learn to create gradients in CSS by using gradient editors to customize color signatures, apply gradient styles to buttons, and copy ready-to-use gradient code into your project.