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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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.