Master HTML and CSS by building real world projects

Learn how to load another website inside your page using an iframe by inserting a source url and displaying the embedded site.

Learn to embed a YouTube video on a web page using an iframe by copying the embed code from YouTube and pasting it into your page.

Learn to add audio and video to web pages using the audio and video tags, load files from an audio folder, and specify mp3 type.

Learn to build an HTML table using table head, table body, table row, table header (th) and table data (td) to display skills, with borders and CSS styling.

Create a basic HTML form to collect user data with input fields for name and email, and types include text, password, color, and date, using required and placeholders.

Learn to build accessible HTML forms by pairing labels with inputs using for and id, and by using name and type attributes for screen-reader friendliness and data handling.

Create a HTML form with radio buttons for gender, labeled inputs connected by id for accessibility, and a text area with configurable rows and columns, and a submit button.

Use the forms pre dot io API to post form data to an endpoint, verify your account, and receive email submissions, including fields like name, gender, and message.

Test and improve web accessibility using Inspect and Lighthouse, fix links and frames, and apply semantic tags and descriptive titles for screen readers and search engines.

Learn the difference between semantic and non-semantic HTML, and use semantic tags like header, main, section, and footer to build an accessible, well-structured web page.

Learn practical web accessibility tips, including using image alternative attributes, creating descriptive link text, and properly labeling form controls with label and for attributes to connect to inputs.

Learn how to use role and area level to give an accessible name to elements and improve screen reader descriptions, illustrated with button semantics.

Master CSS fundamentals by starting with selectors, typography, and the box model, then advance to media queries, animation, and layout with flex and grid, ending with BAM architecture-driven project.

Explore how cascading style sheets style HTML elements, learn CSS syntax, and apply properties and values to customize an h1 on a real HTML page.

Implement internal CSS with the style tag in the head, apply it to h1 and p elements, and compare it to inline and external CSS for cleaner code.

Learn to create and connect an external css file to your html using a link tag, replacing inline styles, and explore selectors and declarations to style real world projects.

learn how to select html elements with css using selectors and combinators to target specific elements like h1 and paragraph tags and apply distinct styles.

Select elements by their HTML names with the element selector and apply CSS properties like background color. Then group selectors with commas to share the same styles.

Explore nested selectors by building HTML structures to target links inside specific lists, then contrast with the universal selector using the asterisk notation to control color for all elements.

Learn how to use the ID selector to target elements uniquely by assigning IDs to sections (seq1, seq2) and styling them with the hash selector for different backgrounds.

Explore the class selector in HTML and CSS by using a shared class to style multiple buttons, using the dot notation, class attribute, and the difference from unique IDs.

Explore how the HTML to CSS auto completion extension auto-suggests class names from your HTML, enabling quick dot selectors and seamless CSS styling, including attribute selectors.

Learn how to use attribute selectors to target HTML input elements by attributes such as type and placeholder, select by specific values, and apply CSS like background color.

Discover how pseudo class selectors and pseudo element selectors style links and content, using hover, focus, active, visited states, and first letter, before, and after content techniques.

Master descendant, child, adjacent, and general sibling selectors with practical div and paragraph examples to control color and structure in complex HTML projects.

Explore typography in CSS by styling text and icons with font size, weight, style, and family, using units like px, rem, and em, and understand font-family fallbacks.

Learn how to add Google fonts to a CSS project by selecting Roboto weights, importing via link or CSS, applying font-family, and using fallbacks for reliable typography.

Explore applying color in CSS using the color property with color names, rgb/rgba values, and hex codes; learn about short hex, color pickers, and color palettes for cohesive pages.

Learn to format text with font family and essential text properties like text-align, text-transform, text-decoration, text-indent, letter-spacing, text-shadow, and line-height to control alignment, style, and readability, noting default left alignment.

Understand how the box model treats each element as a box with content, padding, border, and margin, and how width and padding affect size.

Master the CSS box model by applying padding, border, and margin; use border shorthand for all sides, and explore solid and dotted styles while noting how margins create outer space.

Learn how to use box-sizing to control element width with padding and borders, ensuring 100% width works as intended, and apply border-box universally to keep layouts stable.

Add Font Awesome icons via CDN, embed them in HTML, and style with CSS using custom classes and span wrappers to control color and font size.

Explore how the css display property shapes layout with inline, block, and inline-block elements. Learn how padding, borders, and margins behave and how to convert elements between display values.

Explore width versus max-width and height versus max-height, and apply responsive styling with pixels, percentages, and rem units, including opacity and overflow properties.

Learn to control visibility with opacity and hover effects, and manage overflowing content with container sizing and overflow options like hidden, scroll, and auto.

Apply the css background property to color, image, and layout elements. Learn to set background color, a background image with no repeat, centered position, fixed attachment, and size cover.

Master css variables by defining root values and reusing them with var(), then apply a saturation filter to images or headers with hover to reveal the original color.

Design responsive CSS cards with box shadows and hover effects to add depth and focus. Learn practical HTML and CSS techniques for card structure, styling, and shadow customization.

Learn layout design using floats to place three cards in a row, set widths, and clear the float with an after element to keep the footer below.

Explore the CSS position property in layout design, including static, relative, fixed, absolute, and sticky. Learn to center a child within a relative parent using top, left, and translate.

Learn how to build a fixed navigation bar that stays visible on scroll and control element stacking with z-index, positioning, and layout order.

Master flex layout by turning off floats, enabling display:flex, and mastering flex-direction, gap, justify-content, and align-items to center and arrange items.

Explore advanced flex layout concepts by manipulating a single flex item using justify-content, align-items, and align-self to position the item at start, center, or end.

Master flex layout techniques to center and align list items, switch from column to row layouts, and manage parent‑child relationships with display flags and utility classes.

Move from float to flex layout to center skill cards in the skills row, using display:flex, justify-content:center, and align-items:center, while removing floats, adjusting row height, and preparing for grid layout.

Master flexbox principles with a cheatsheet extension that visualizes display flex, direction changes, and reverse layouts, then apply grid layout concepts for practical design.

Explore how grid layout enables two-dimensional layouts while refactoring code from flex-based structures, and organize HTML into titled sections with planned grid sections for tutorials, team members, and skills.

Create a team section in HTML and CSS, then implement a flex layout to arrange 12 team members in a four-column, three-row setup with space around and centered alignment.

Master grid layout by arranging team members in a configurable grid, adjusting grid template columns, gaps, and padding, and exploring responsive behavior with auto, repeat, and minmax patterns.

Learn to design a grid layout by selecting individual grid items, using ids or classes, and applying grid-column for starting positions and spans, ending with a look toward responsiveness.

Learn how to build responsive web pages using viewport meta tag, box-sizing, and media queries to adapt grids and content for different screen sizes.

Learn responsive web design with CSS media queries and breakpoints at 992, 768, and 600 pixels, adjusting flex directions, card widths, and header visibility.

Learn to build a responsive page with media queries, switching to column layouts at 600px, adjusting grid and flex items, and styling navigation and footers with hover effects.

Master CSS animation and architecture by exploring transitions, the transform and animation properties, and create circles with border-radius using equal height and width.

Explore how to use the css transition property to smoothly animate state changes, control duration and delay, apply to background color and text color, and use shorthand.

Apply a hover transition to navigation links to smooth color and underline changes with a 0.4s linear transition from the initial state.

Master the transform property to apply rotate, scale, translate, and skew for 2d/3d effects. See hover-driven scaling in action and learn why inline elements must be inline-block for transforms.

Practice applying css transform and animation techniques to interactive skill cards by hover effects that scale, rotate, skew, and translate, with smooth transitions.

Learn how to apply CSS animation using animation properties, including name, duration, and timing function, and create a focused animation section with a centered circle inside a container.

Create a circle by setting equal width and height and applying border-radius: 50%. Then center the content using display properties to ensure the circle content is aligned.

Create a multi-stage animation with keyframes to change a circle's background color at 0, 25, 50, 75, and 100 percent over four seconds, including position tweaks.

Learn how to calculate CSS specificity using the A, B, C model, counting IDs, classes or pseudo classes, and elements or pseudo elements, with practical examples.

Discover how bam (block, element and modifier) standardizes CSS class naming to prevent specificity conflicts, class name clashes, and inconsistent styles, demonstrated through a clean, scalable demo.

discover how block, element, and modifier naming in bem architecture works, using block as a container, element as a child, and modifiers like large to alter appearance.

Explore bem practice by building a list with items and an image, naming classes as block and element, and using Bam helper to enforce correct block__element naming.

Build a complete blog website using HTML, CSS, and JavaScript, featuring a responsive header, banner, about me, guides, blog posts, contact, and footer—demonstrated in the final project demo.

Set up a blog project with index.html, style.css, and index.js, load Google font Roboto and Font Awesome via CDN, and apply a reset using universal selector, box-sizing, and smooth scrolling.

Build the header for a real world project by coding a logo with Font Awesome, assembling a nav menu, and using flex layout, sticky positioning, and hover styles.

Learn to build a responsive navbar by implementing media queries at breakpoints 992, 768, and 600, adjusting font sizes, and stacking menu items in a column for small screens.

Learn to build a blog banner section with an HTML5 structure, including a main, article, and aside, and style a two-column flex layout with a banner heading and description.

Learn to design a responsive banner section using media queries, adjusting flex direction, width, and alignment for breakpoints at 992, 768, and 600 pixels, including banner article and banner image.

This course teaches how to design an about me section with three responsive cards, hover scale effects using transform, and reusable HTML and CSS patterns for headings, content, and buttons.

Learn to make the about section responsive using media queries, switching cards from side-by-side to stacked layouts at 768 and 600 pixels, with 80% and 90% widths.

Design the archive section in HTML and CSS, building a centered archives list of images with text wide headings, flex layout, and hover scale using CSS variables for transitions.

Learn to build a responsive archives section with flex wrap, gaps, and column layout that adapts at 600, 768, and 992 pixels, adjusting height, width, and spacing for clean wrapping.

Learn to design a blog post section using HTML and CSS with a two-part layout: an image side and a content side, applying flexbox, centering, and responsive styling for posts.

Learn to build a responsive blog post section by tweaking widths at 768 px and 600 px, switching to column layout, and adding gaps to prevent overflow.

Design a contact section in HTML and CSS, building a form with name, email, and message fields plus a submit button, centered with white text and box shadow.

Explore responsive contact section design by adjusting heights, widths, and flex directions across breakpoints (768 and 600 px), setting form width to 90%, and switching inputs to a vertical layout.

Design a footer section with left copyright text and right social icons, including a home icon to scroll to the top. Implement responsive flexbox, hover effects, and 600px stacking.

Learn to add a collapsible menu that shows a Font Awesome icon on screens 600px or smaller, using a hidden class, media queries, and JavaScript to toggle the nav.

Deploy your website by creating a GitHub repo, pushing your code, and importing it into Netlify to deploy a live site you can share with others.

Showcases a static HTML and CSS e-commerce design with reusable card components across home, register, login, and cart pages, including product and product details pages, while noting no JavaScript functionality.

Create a project folder and open it in vts code, then build a basic html page with a linked css file. Implement reset rules, responsive images, and font awesome icons.

Create a responsive navbar with HTML and CSS, featuring upper and brand sections, navigation links (home, register, login, product, profile, contact), icons, and a collapsible menu for small screens.

Learn to design a responsive navbar by styling with sticky positioning, z-index layering, flex layouts, and hover effects, while using CSS variables and reusable classes for consistency.

Learn to build a responsive navbar that toggles with a menu icon, uses a hidden class, and adapts from horizontal to vertical layout below 992px, with accessible JavaScript controls.

Create a collapsible navbar by wiring a JavaScript file to toggle hidden class on the nav menu when the menu icon is clicked, using element IDs and an event listener.

Create a reusable footer for all pages, with a left newsletter signup (label, email input, subscribe button) and a right copyright area, designed using flex and reusable CSS classes.

Copy the HTML structure to create other pages, renaming them as card, contact, login, product details, profile, and register pages, then update profile.html and keep the nap bar and footer.

Create a header-based banner with a banner title '50% sales going on' and a features section highlighting shipping within seven days, 24/7 support, and safe payment.

Apply css to the header and banner, set a 100% width banner with a column flex layout, and implement a reusable flex center class for 992px responsiveness.

Learn to build a two-panel product filter layout with a left sidebar featuring categories, price range checks and shipping options, and a main content area using flex center sections.

Design a sidebar layout using flex, assigning one quarter of the width to the sidebar and three quarters to the main content. Tweak padding, display flex, and align self.

Create an actions section in the main content with a sort dropdown and a search input. Place them side by side using flex space around and a magnifying glass button.

Create a single product card by wiring up the product section, image, product body with name, dot indicators, description, price, rating, and a learn more link plus a styled button.

Design a reusable card in css, create a three-column product section, add hover effects with box shadow and transitions, and structure the product body with flex, padding, and section titles.

Create a product badge with HTML and CSS. Position the badge within the batch container using a relative parent and absolute child, with white text, padding, and a border radius.

Copy and customize existing product blocks in index.html to create multiple products, updating stock, image, title, price, and rating for each item, and implement pagination.

Build a real-world pagination UI in HTML and CSS, using Font Awesome icons for previous and next buttons and styled pagination buttons inside the main content, and add dot indicators.

Center the pagination with css flex and style pagination borders, then make the product grid responsive with breakpoints at 992px and 768px to show two and one per row.

create a two-column product details page with the image on the left and details on the right, including category, price, rating, and add-to-cart or back-to-shopping actions.

Use a flex layout to split the product details page into equal left image and right description, with a fixed image size and a column layout for details.

Create a functional cart page by structuring a two-column layout with card items and card payment, building reusable HTML blocks for cart items, item details, pricing, shipping, and action buttons.

Design cart items section demonstrates styling a checkout UI with padding, gaps, and flexbox, detailing inputs, images, descriptions, and actions. Align left cod items with a right card payment panel.

Build a cart payment section with a card payment summary and payment methods, showing subtotal, shipping, total cost, a pay now button, and brand icons like Visa and PayPal.

Design and implement a profile page by building a centered card with a profile image, name, email, about, and edit/delete actions, using flex center and a reusable card class.

Create a register page by building a centered card form with name, email, password, and an about me textarea, plus a submit button, reusing existing styles for the login page.

Designs a responsive registration form with flexbox, label-input alignment, and split widths (0.1/0.9), plus borders and padding; styling supports login and contact pages.

Adapt the registration page to create a login page by using a simplified form with email and password, updating classes, and applying responsive css for breakpoints around 992px.

Create a contact page with a left form and right address with a map, using HTML structure, CSS styling, and an embedded iframe map, plus form submission via forms pre.

Design a responsive contact page by styling the HTML with a contact container and column address layout. Ensure the map uses 80% width and padding variables, with a 992-pixel breakpoint.

Push the HTML and CSS project to GitHub, initialize Git, commit changes, then deploy on Netlify by importing the project.