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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.