This is a solution to the 3-column preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Solution URL: (https://github.com/kevinozyx/3-column-preview-card-component-main/blob/main/index.html) (https://github.com/kevinozyx/3-column-preview-card-component-main/blob/main/CSS/styles.css)
- Live Site URL: (https://kevinozyx.github.io/3-column-preview-card-component-main/)
- Learn about CSS Flexbox
- Start from HTML and group the elements into their respective classes
- Start styling them using CSS based on the specification
- Implement CSS Flexbox to simplify the box positioning
- Experiment with the width for optimum display based on the resolution provided in the specification
- Ensuring that the width of the two flexbox items are more than the specified resolution on mobile view so the box will automatically be stacked vertically
- Creating the button using a CSS Button Creator website (link provided below)
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS button creator
How to use basic CSS flexbox, first exposure to real-life project.
- How to master the use of flex container's width and its flex items width properties (static vs dynamic use)
- Creating variables to change one variable instead of multiple variables manually
- Alternative for IDs
- Streamlining or concising the code to avoid unnecessary codes
- CSS Flexbox MDN - This helped me to understand CSS Flexbox.
- The Complete 2021 Web Development Bootcamp - Thanks to Dr. Angela for introducing this practice website and teaching me the basic understanding of HTML & CSS.
- [CSS Button Creator] (https://cssbuttoncreator.com/)
- Website - Kevin Siswanto (https://kevinozyx.github.io/my-website/)