Taking on a Frontend Mentor Challenge - Responsive Product Preview Card Component
Offered By: Kevin Powell via YouTube
Course Description
Overview
Follow along with a comprehensive tutorial on tackling a Frontend Mentor challenge to create a responsive product preview card component. Learn the entire process from downloading project files to coding with HTML and CSS, and finally deploying the finished project on GitHub and Netlify. Gain insights into responsive design techniques, CSS custom properties, semantic HTML structure, and best practices for creating visually appealing and accessible web components. Explore advanced topics like CSS resets, the picture element for responsive images, and using CSS flexbox for layout. Perfect for web developers looking to enhance their front-end skills through practical, hands-on experience.
Syllabus
- Introduction
- What we’re starting with
- Setting things up
- Writing the HTML
- Responsive Mode
- CSS Reset
- Setting up the custom properties
- Getting the fonts
- General styling
- Styling the flex-group class
- Styling the product content
- The prices
- The button
- The button icon
- The desktop version
- Changes images with the picture element
- Fixing the layout at large sizes
- Putting our project online with GitHub and Netlify
Taught by
Kevin Powell
Related Courses
Introduction to Front-end Development with ReactJSCoursera Project Network via Coursera Creating a Personal Site with Gatsby
Coursera Project Network via Coursera Git a Web Developer Job: Mastering the Modern Workflow
Udemy HTML5 para quem não sabe nada de HTML5
Udemy Gatsby JS: Build PWA Blog With GraphQL And React + WordPress
Udemy