Learn Responsive Web Design with 4 Live Projects

Learn to create six types of headings from scratch, duplicate them with keyboard shortcuts, and add a paragraph using lorem ipsum to preview in the browser.

Explore how to build hyperlinks in HTML5, including anchor text and href attributes, and open links in a new tab with target _blank, useful for emails.

Learn how to build navigation with nested links using anchor text and anchor tags, linking pages inside folders, and implementing back navigation with relative paths in this web design course.

Add images to your website using the image tag with src and alt attributes. Organize files in an images folder and leverage external URLs for SEO.

Build HTML5 forms to collect user data with text and password inputs, assign names, and submit using get (url query) or post (body data) methods.

Learn to build a contact form alongside login and registration forms, using text, email, tel inputs, a subject field, a message textarea, and a send message button.

Create a login form with username and password fields, using input type text and password, set the form method to post, and apply required validation to prevent empty submissions.

Embed external content with iframes in HTML5, inserting YouTube videos and Google Maps, and adjust width and height for responsive display while noting some sites block iframes.

Create a navigation bar inside the head using an unordered list of anchor tags for Home, About, Services, Call us, Products, Contact, duplicating services as service one and service two.

The lecture demonstrates three types of styles and inline css, showing how to apply an inline stylesheet to set a 500px box and adjust background, text colors, and font family.

Learn to build an internal stylesheet using a style tag in the head, set font family and background color, and apply white text to paragraphs.

Explore the CSS box model by observing margins, padding, borders, and content to see how a box shapes page appearance; use developer tools to inspect and adjust styles.

Learn how to target elements in CSS using element, id, and class selectors; apply color, font style, italics, and bold, and use nesting to style multiple paragraphs.

Apply the CSS box model to create a styled box by setting width, height, margin, padding, background, text color, line height, border, border radius, and box shadow.

Build and style a navigation bar for project by setting a logo, removing list styling, zeroing margins and padding, and styling anchors with color and pseudo elements to apply colors.

Create services pages by setting up a services folder, adding service one to three with images, and correcting image and logo paths using dot org slash for proper loading.

Build a contact page by integrating a contact form and a Google Maps iframe within the existing banner, adjusting the map size for a responsive layout.

Learn how responsive design adapts content across devices by using max-width and media queries, changing the box background color at 500px, and testing with different device sizes.

Use AI to support learning and speed up repetitive tasks, not to replace core skills or create dependency; understand first, then automate, and use AI to remove friction.

Use AI as a structured idea generator for HTML and CSS only, no JavaScript. Define skill level and constraints, then build a simple restaurant landing page with essential sections.

Transform a static HTML and CSS portfolio into a responsive design by adding a CSS background animation and using media queries with ChatGPT guidance to adapt the layout for mobile.

Explore Bootstrap, a free, customizable css framework for responsive web design. Learn the grid system, built-in components, vanilla javascript migration, svg icons, and plugin extensibility, with ie 10/11 support dropped.

Explore bootstrap v5 document structure, including HTML5 doctype and viewport for responsive design. Learn to place CSS in the header and JavaScript in the footer, emphasizing clean code quality.

Explore bootstrap containers as content holders and their max widths at breakpoints, including md 720 px, lg 960 px, xl 1140 px, xxl 1320 px, with container-fluid remaining 100%.

Explore bootstrap's grid system to build responsive layouts with containers, rows, and columns; create a three-column layout, adjust widths to 75/25, and manage gutters with gx and gy spacing.

Explore nesting rows inside a column, then add a nested row with four columns using a container and columns. Always use rows in the child element when nesting columns.

Learn how to align columns horizontally in a row using classes like justify-content-start, center, end, around, between, and evenly, with practical live testing in the browser.

Learn how column wrapping and column breaks operate in bootstrap, using a 13-column layout with 9- and 4-column blocks, and apply a 100% width div to create new rows.

Apply margin utilities to align columns, center elements with auto margins, and use standalone width classes, then float an image to the right with clear fix for layout.

Explore horizontal gutters in responsive web design by applying the G class to rows, adding p x padding on the container, and fixing overflow with container padding or overflow hidden.

Apply horizontal and vertical gutters with a single G class, sizing all sides via GFI, and use MD and SM breakpoints to adjust gutters responsively.