Главная
Study mode:
on
1
- Introduction
2
- What we’re starting with
3
- Setting things up
4
- Writing the HTML
5
- Responsive Mode
6
- CSS Reset
7
- Setting up the custom properties
8
- Getting the fonts
9
- General styling
10
- Styling the flex-group class
11
- Styling the product content
12
- The prices
13
- The button
14
- The button icon
15
- The desktop version
16
- Changes images with the picture element
17
- Fixing the layout at large sizes
18
- Putting our project online with GitHub and Netlify
Description:
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.

Taking on a Frontend Mentor Challenge - Responsive Product Preview Card Component

Kevin Powell
Add to list
0:00 / 0:00