Applied CSS 3 (2023) - Build 6 Professional Web Pages

Explore designing a shop ecommerce homepage from a Figma file and from scratch, using HTML and CSS, focusing on the header and navigation menu with shop, blog, and our story.

Add negative space with body padding using rem units, link the CSS file, and align header elements in a row with flexbox.

Learn to assign class names like logo and navigation, manage selector specificity, and add navigation icons using SVGs and image tags for accessible, right-aligned navigation.

Apply flexbox to the navigation menu to center items vertically and horizontally, and style the logo with a custom font using @font-face (Alerta stencil), including first-letter color styling.

Learn to implement a hero image in CSS page by creating a hero container, importing hero.png, using the main tag, 100% width, rem spacing, accessible alt text, and flex layout.

Build a main body layout with a hero background image on a div, style the shop header and a right-aligned link, and organize two figma product rows with reusable classes.

Create a two-section footer with contact, terms of service, shipping and returns links and a newsletter signup, styled as a flex row with gray links and clean typography.

Target newsletter container to remove boxed look, enlarge input, and blend input and button with a shared white background; align container to the right with a set width.

Learn product page design using the master-detail pattern, with a reviews list and a review form, while reusing header, footer, and home page styles in a VS Code workflow.

Learn to build a product details page with HTML containers, an HR divider, a main section, a product menu, a reviews container, plus a gallery, product image, and info container.

Set the product info container to a row flex layout. Use widths of 10%, 43%, and 43%, with gallery images at 100% width and height auto, and space-between for spacing.

Organize product details by separating the info container, apply Arial Helvetica sans serif, adjust left padding to 1 rem, and lay out cart buttons in a flex row with space-between.

Finish the HTML for the product menu and reviews sections, then apply CSS styles and active states to highlight the selected menu item and format the reviews and review form.

Style a product menu and reviews container with a row flex layout, a sans serif font, borders and margins, an active state with black text, bottom border, and cursor pointer.

Explore the flow base podcast design in Figma, focusing on the header, navigation, hero image, and latest episodes to guide CSS implementation.

Outline header, main, and footer and apply Montserrat alternates via font-face loaded from Google. Define CSS variables for vermillion and Davis Gray to theme colors and set typography across layout.

Design a header nav with left and right sections, a clickable home logo, and primary and secondary buttons. Implement flexbox alignment, spacing, and reusable button styles.

Master hero layout and title styles by building a header with a flex row containing a hero image and hero info, applying widths, spacing, and a styled episode title block.

Style the featured badge with border, padding, and border-radius; center hero elements with flexbox, arrange metadata in a row with space-between, and adjust line height and host typography.

Style the hero container by applying spacing and flex layouts to large buttons (LG) and the episode actions area, aligning content and adding a cohesive box shadow.

Create the latest episodes section with a genre filter and active states for all, business, comedy, education, health news, tech. Use a two-column layout with alternating styles.

Create a left column and a right column episode list with six episode containers, each featuring an episode info block with image, number, title, and description plus a tags section.

Design a three-column footer in HTML, featuring copyright, bottom navigation, and platform icons. Export and integrate svgs for social and podcast platforms, then style for layout.

Design the about page by aligning with the podcast detail page, reusing navigation and footer styles, and adding a new form, stats, and founder sections in HTML and CSS.

Learn to implement a header hero in an about page using reusable CSS classes, title styling, description typography, and large action buttons.

Create the main content with stats cards for community members, podcast subscribers, and daily listeners in HTML, and define the history section and two-column text layout.

Demonstrate building founder and sponsor HTML sections, with founder cards containing left images and right info, social icons, and a three-card sponsor area for Google podcasts, Spotify, and YouTube.

Style the site stats section by turning the cards container into a horizontal flex row, sizing cards, borders, shadows, and centered text to match the design.

Apply section-specific padding to the history area to keep the color full width, and refine typography with centered pseudo titles, a Davis gray subtitle, and a 1.5 line-height column layout.

Style the founder and main host section with flexbox to place left images and right bios, using box-sizing border-box, padding, borders, shadows, and gray typography.

Style the sponsor section with a beige background (#f7dee8), adjust padding and margins, and arrange sponsor cards in a horizontal flex container while handling overflow and logo sizing.

Learn to style a contact form with responsive flexbox rows, precise padding, and 95% width inputs. Implement labels, placeholders, Montserrat font, borders, and a multi-line message area for polished UI.

Use box sizing border box to keep 100% width consistent despite padding, then align the submission row with flex row, fixed-width elements, and spacing in the flow based theme.

Explore building a header with header, main, and footer, plus a nav bar and hero container, using left and right divs, a logo and hamburger icon, and a clear button.

Create a restaurant menu layout in HTML, detailing mains and starters with div.menu options, menu image, and item info including prices and h3 dish headings.

Style the top nav and header by applying a header background image, padding, and white text, and use display flex with flex-direction row and space-between alignment for the navigation.

Refine the hero by adjusting spacing and padding, then style the title and subtitle in Rufina at 8rem and 1.7rem with 50% width, tighten line height and move the subtitle.

Style the reservation section to match the design by applying the eb f0e4 background, and arrange date, time, and guest inputs in a flex row with fixed widths and borders.

Learn to style the newsletter form with precise button, input, and footer styles using css classes, colors like 233000, flex layouts, and typographic rules.

Target the copyright container with flex row and space-between, apply padding 4rem top, 5rem bottom, 8rem sides, add a 2px dashed white border, and use the Lito font at 1.2rem.

Preview the food zero theme's design for a single post with sidebar, including a hero background, breadcrumb navigation, image gallery, quotes, tags, author bio, and a semantic aside with search.

Organize and export assets for a css 3 course by prefixing post images, exporting at 2x PNGs, and saving icons and avatars as svgs, with context-based naming for sidebar images.

Learn to structure blog layouts with HTML5 semantic elements by using main, section, article, and aside, implement breadcrumbs, galleries, and author blocks, while managing CSS specificity with IDs.

Learn to build a structured sidebar with repeatable containers (categories, comments, archives, recently posted, tags), using unique classes, headings, and article previews with thumbnails and metadata.

See how to build a blog navigation with prev and next post blocks and construct a layered comments section, including avatars, post titles, timestamps, and a leave-a-reply form.

Build a new comment form in html by wrapping inputs in labels, including a leave a reply section with a comment textarea, name and email, and a post comment button.

Learn to build the main article layout with flex, place the article and aside side by side, adjust widths and a 5% gap, and refine typography, padding, and breadcrumbs styling.

Style the article image gallery with flex layout, left image at 65% and right at 30%, margins; format the blockquote in green, bold italic, larger font, line-height, and extra padding.

Develop the sidebar layout by styling the search container with a bottom border and flex alignment, and polish H4 titles with adjusted padding and dotted borders to match the design.

Apply responsive CSS styling to the sidebar categories and archives using flex layouts, then style recent comments and recent posts with precise spacing, colors, and fixed thumbnail sizes.

Resolve CSS conflicts by increasing selector specificity using a post ID to override global line-height, and style post metadata, author date, and tags with precise padding and line-height adjustments.

Transform the previous post and next post section into a full-width flex row with white text, background images, and centered titles, improving typography and spacing for navigation.

Apply padding and typography to the post comments section and form. Arrange the comment container as a flex row with space-between alignment and include avatars, titles, and date color.

Explore new comment form styles, including a four-pixel dotted border, top padding, and full-width inputs. Learn to apply consistent typography (Rufina, Lato) and hover and active button states for usability.