Taking on a Frontend Mentor challenge Responsive Product Preview Card Component

Note: Building a Front End Mentor Project with Kevin

Chapter 1: Introduction

• Kevin noticed questions on a front end mentor project in his Discord community.

• He decides to build the project himself and welcomes viewers to join.

• Kevin's channel focuses on helping viewers appreciate CSS.

• The project involves making a card responsive from downloading assets to going online.

Main Ideas

• Kevin downloads the starter files for the project.

  • Extracts the files and opens them in Visual Studio Code.

• Examines the files received:

  • Index file with attribution and content.

  • Style guide provided by Front End Mentor.

  • Fonts used in the project.

  • Readme template for GitHub.

  • Git ignore file to exclude certain files from GitHub.

  • Images and design files for reference.

• Kevin plans to upload the project to GitHub and then online using Netlify.

• He creates a new CSS file named style.css for the project.

Main Ideas from the Transcript

Setting up Styles and Index Page

• Using Emmet in Visual Studio Code to quickly generate CSS link tags.

  • Emmet autofills the link tag when typing "link:css".

• Choosing the location for the CSS file based on simplicity.

  • Suggests placing the CSS file in the root folder for simplicity in a basic setup.

Working Environment and Live Server

• Recommending having a browser open while working on the project.

• Mentioning the use of live server extension for simplicity and real-time updates.

  • Live server allows for immediate updates without manual refreshing.

HTML Structure and Mobile-First Approach

• Emphasizing the importance of considering mobile-first design.

• Starting with the desktop version when writing HTML to understand the layout structure.

• Introducing the use of the article tag for creating standalone content pieces.

Creating Product Structure in HTML

• Utilizing the article element for standalone content like a product card.

• Explaining the choice of using an article tag for self-contained content.

• Planning to implement two columns for the product layout.

• Using BEM naming convention for class names to maintain clarity and structure.

Implementing Image and Content Sections

• Planning to switch from using an image tag to a picture tag for better optimization.

• Applying BEM naming convention for classes like "my-product-image" and "my-product-content".

• Structuring the HTML elements within the article tag for the product content.

Consideration for Title Tag

• Discussing the importance of choosing an appropriate title for the content.

• Mentioning the use of an h1 tag due to the lack of other content on the page.

Chapter 2: A Little Bit

• Identifying the Title and Subtitles

  • The speaker discusses the importance of correctly identifying the main title and subtitles of a piece of content.

  • Mentions that in the context of a standalone card or article, the main title should represent the product or topic being discussed.

  • Explains the use of heading tags (h1, h2, h3) for structuring content and how they impact the page's structure.

  • Highlights the significance of using proper semantic HTML for heading levels.

• Styling and Wrapping Content

  • Emphasizes the distinction between using heading levels for structure and not for styling purposes.

  • Demonstrates adding a class (product title) to the main title for styling consistency.

  • Shows how to wrap content quickly using shortcuts like command shift p and Emmet abbreviations.

  • Provides an example of wrapping content with a class (product double underscore original price) for efficient styling.

• Organizing Content

  • Discusses the use of div elements to group related content that needs to be displayed together.

  • Plans to address accessibility considerations to ensure proper reading of the content.

  • Intends to focus on aligning and organizing elements that need to be displayed adjacent to each other.

Main Ideas:

• HTML Structure

  • Classes assigned to different elements for styling purposes.

  • Use of flex group class for grouping elements.

  • Adding a class for product category differentiation.

  • Avoiding excessive use of BEM naming conventions for elements that are not unique.

• CSS Reset

  • Importance of CSS reset for consistent styling across browsers.

  • Recommendation to start with a CSS reset before writing custom styles.

  • Demonstration of using Firefox's responsive mode for testing responsiveness.

  • Introduction to Josh Como's CSS reset and its benefits.

  • Application of the reset to remove margins from elements in the document.

Supporting Details:

• HTML Structure

  • Assigning classes like flex group and button for styling purposes.

  • Differentiating elements with classes like product_category for specific styling.

  • Not overusing BEM naming conventions for elements that are not unique to the component.

  • Adding an image with alt text within the HTML structure.

• CSS Reset

  • Importance of CSS reset to ensure consistent styling across different browsers.

  • Starting with a CSS reset before writing custom styles to avoid browser inconsistencies.

  • Using Firefox's responsive mode (control shift m) for testing responsiveness without opening dev tools.

  • Introducing Josh Como's CSS reset as a resource for comprehensive CSS solutions.

  • Applying the CSS reset to remove margins from all elements in the document for a clean starting point for custom styling.

Large Font Size

• Responsive images prevent overflow by setting display block and max width 100%

• Box sizing reset and margin of 0 are common practices

  • Some may find setting margin of 0 on everything opinionated

• Setting font to inherit for input buttons, text areas, and selects prevents text overflows

  • Helps avoid horizontal scrolling on smaller screens

  • Can cause some weird results like breaking words abruptly

• Custom properties are set at the root selector for easy access and management

• Primary and secondary colors are defined with specific numbering for consistency

  • Font weight numbering system used for base and variations

• Neutral colors are named and numbered based on personal preference and HSL lightness

Setting Custom Properties

• Custom properties are set at the root selector for easy access and management

• Primary and secondary colors are defined with specific numbering for consistency

• Neutral colors are named and numbered based on personal preference and HSL lightness

Note: Setting up Typography and Custom Properties

Setting up Numbering System

• The speaker uses numbers like 900 and 1,000 for different shades of black in their design.

  • They space out the numbers to allow for flexibility in case they need to add more shades or correct any omissions in the design.

Typography Setup

• Font sizes were only specified for one element at size 14, leaving the speaker to determine other font sizes based on observation.

• The speaker decides not to download the Figma file and instead works off a JPEG image.

• Custom properties are not used due to the limited scope of the project.

• Font weights are set as 500 for regular and 700 for bold, providing flexibility in case bold variations vary between 600 and 900.

• Two font families, Mosserat and Francis, are selected from Google Fonts and added to the project.

  • The speaker adds the necessary links and CSS rules for the font families in the HTML and CSS files.

General Styling

• The speaker sets the width of the page to 375 in responsive mode based on the style guide.

• Starting with generic styling for the body, the speaker sets the font family using custom properties.

• Using double hyphens and a prefix for font weight, the speaker easily selects the desired font weight value.

• The speaker chooses a color based on the lighter color used in the design elements.

Chapter 4: Need A Font

• Color and Contrast Ratio

  • Choosing a color neutral 400 for the design.

  • Concern about the contrast ratio and ensuring readability.

• Font Size and Type

  • Recommended using rem or m for font sizes instead of pixels.

  • Opting for rem for font sizes in CSS.

  • Emphasizing the importance of not using pixels for font sizes.

• Background Color and Layout

  • Setting background color using my color and primary secondary 200.

  • Centering content horizontally and vertically on the page.

  • Using display: grid and place-content: center for alignment.

  • Adjusting spacing with margin or padding properties.

• Styling the Product Card

  • Creating styles for the product card.

  • Setting background color to neutral 100 and border radius.

  • Managing overflow with overflow: hidden.

  • Considering border radius values like 0.5rem.

  • Discussing the common practice of using base 16 for web design measurements.

Font Sizes and Measurements

• Using rem as a base 16 for font sizes can simplify calculations and make web design easier.

  • Base 16 is preferred over other measurements for web design.

• Custom properties like locally scoped variables can help in managing layout and design elements efficiently.

  • Locally scoped custom properties like product 5 rem can be used for specific classes or sections.

  • Using custom properties for padding and spacing can centralize control and enhance maintainability.

Product Content Design

• The product content consists of a picture and content section.

  • The picture is positioned at the top, while the content is placed at the bottom.

• Applying padding and spacing to the product content can enhance the design and manageability.

  • Using custom properties like content padding and content spacing can streamline design adjustments.

• Utilizing grid display for layout can help in achieving desired spacing and alignment effortlessly.

  • Setting the display to grid and adjusting the gap can control the layout effectively.

Nitty Gritty Design Details

• Focusing on specific design elements like font size, text transform, and letter spacing can refine the overall design.

  • Avoid unnecessary declarations and only add styles when needed.

  • Prioritize essential design elements like text transform and letter spacing for a clean and effective design.

Chapter 5: Same Font Size

• Font Size

  • Adjusting font size to ensure consistency and balance with other elements on the page.

  • Consideration of using pixels or "m" for letter spacing, depending on the design requirements.

  • Changes in font size impact letter spacing, ensuring a harmonious layout.

• Styling Product Title

  • Setting font size using "rem" units for the product title.

  • Defining font family and color for the title.

  • Utilizing custom properties efficiently in Visual Studio Code for color selection.

  • Addressing line height adjustments for larger font sizes to maintain readability and aesthetics.

• Fine-tuning Font Sizes

  • Experimenting with different font sizes to achieve the desired look.

  • Making adjustments to line height for improved readability and visual appeal.

  • Balancing font sizes and line heights for a cohesive design.

• Maintaining Consistency

  • Emphasizing the importance of maintaining consistency in font sizes and line breaks.

  • Acknowledging minor discrepancies in font rendering and line breaks due to web variations.

  • Prioritizing focus on significant design elements rather than minor details.

• Upcoming Changes

  • Previewing adjustments for the price section and planning HTML modifications for further enhancements.

Setting Font Size and Family

• Adjusting font size and family for the product price display

  • Consideration for creating utility classes to avoid repetition

  • Mention of setting color and vertical alignment for consistency

Cross Out Original Price

• Using strikethrough formatting for the original price

  • Consideration for accessibility and screen readers

  • Adding context with semantic tags like span for better understanding

  • Utilizing visually hidden class for screen reader-only text

  • Ensuring content is accessible while visually hidden

Adding Context to Price Display

• Including current price and original price with proper context

  • Explanation on the importance of context for understanding

  • Utilizing visually hidden class to hide text visually but keep it accessible

  • Maintaining visual appearance while enhancing accessibility

Chapter 6: A Little Bit

• Styling the button at the bottom with a little icon

  • Using cursor pointer for a hand icon on the button

  • Adding padding of 0.5 on top and bottom, 1.5 on left and right

  • Removing border with border: 0

  • Setting text-decoration: none to cover cases where the button may look like a link

  • Using display: inline-flex for flexibility

  • Centering text with justify-content: center and vertically with align-items: center

  • Adding a gap of 0.5 rem between elements

  • Setting background color to primary and text color to neutral 100

  • Adjusting font weight to bold and font size to 1rem

  • Applying a border radius of 0.5 for a rounded look

• Defining hover and focus states for the button

  • Grouping styles for hover and focus using hover:focus

  • Explaining the concept of specificity in CSS selectors

Main Ideas:

• Using HSL to adjust colors in CSS

• Disabling responsive mode in browsers for better testing

• Adding a shopping cart icon to a button using data attributes and pseudo elements

Adjusting Colors with HSL:

• HSL (Hue, Saturation, Lightness) can be used to adjust colors in CSS.

• To make a color darker, duplicate the color and decrease the lightness value.

  • Lightness controls how light or dark a color is.

• By tweaking the HSL values, you can achieve the desired color shade.

Disabling Responsive Mode:

• In Firefox and Chrome, responsive mode can affect testing.

• Disable responsive mode to ensure proper functionality.

• Use the tab key to navigate and test elements easily.

Adding a Shopping Cart Icon:

• To add a shopping cart icon to a button, use a data attribute like data-icon.

• This approach allows for easy styling and future JavaScript enhancements.

• Utilizing pseudo elements like ::before for adding icons.

• Ensure to include content property in pseudo elements for them to render.

• Check the SVG dimensions (width and height) before incorporating it into the design.

Chapter 7: A Little Bit

• Setting width and height for an icon in pixels

  • Matching the height from the SVG

  • Being cautious with set widths and heights for icons

• Using pseudo elements for icons

  • Need for content width, height, positioning, and display type

• Adding background image for the icon

  • Different ways to set a background image

  • Mention of using URL encoding for SVG background image

• Adjusting spacing and layout for responsiveness

  • Considering switching to two columns layout at a larger size

  • Implementing media query for a two-column layout at 600 pixels

  • Using grid display for layout adjustment

• Addressing issues with layout and image display

  • Fixing width overflow issue

  • Noting the incorrect image being displayed

Overall, the focus is on setting dimensions, positioning, and background images for icons, adjusting layout for responsiveness using media queries, and addressing layout issues for a better user experience.

Main Ideas:

• Using the picture element for art direction and displaying actual images.

• Utilizing the source set attribute to provide multiple images for different resolutions.

• Implementing a media attribute to switch images based on screen sizes.

• Adjusting the max width of images to prevent distortion and maintain spacing.

• Modifying content padding to ensure consistent spacing within elements.

Using the Picture Element:

• Picture element allows for art direction and displaying actual images.

• Alt text can be added to images for accessibility.

• Source set attribute is used to provide multiple images for different resolutions.

Implementing Media Attribute:

• Media attribute functions like a media query to switch images based on screen sizes.

• Setting a breakpoint at 600 pixels to switch between large and small images.

Adjusting Max Width:

• Setting a max width of 600 pixels to prevent images from becoming too wide.

• Prevents distortion and maintains the aspect ratio of images.

Modifying Content Padding:

• Adjusting content padding within the parent selector to maintain consistent spacing.

• Custom properties are utilized to adjust padding without creating additional selectors.

Chapter 8: Conclusion

• Adjustments made to the project

  • Height adjustment was needed

  • Happy with the final look

• Publishing the project online

  • Using Versus Code for source control

  • Need a GitHub account

  • Initializing repository and publishing to GitHub

  • Making repository public or private

• Fixing mistakes on GitHub

  • Renaming readme template to readme

  • Syncing changes to GitHub

• Using Netlify to deploy the project

  • Adding a new site on Netlify

  • Importing an existing project from GitHub

  • Deploying the site and monitoring progress

  • Site is live and accessible online

• Easy process for updating the site

  • Update code, push to GitHub

  • Netlify automatically updates the site within minutes

Key Takeaways

• Final adjustments were made to the project before publishing it online.

• GitHub was used for source control and publishing the project.

• Mistakes on GitHub were fixed by renaming the readme template.

• Netlify was used to deploy the project online quickly and easily.

• Updates to the code are automatically reflected on the live site through Netlify.

• Acknowledgment to supporters and