Learn to build a responsive pricing block using HTML and pure CSS in this comprehensive live coding tutorial. Follow along as the instructor demonstrates the process of creating a Frontend Mentor pricing component from scratch. Begin by setting up code files and adding global styles, then progress through HTML markup and styling for different sections including Community, Subscription, and Why Us blocks. Explore techniques for adding hover states to buttons and implementing CSS grid for desktop layouts. Gain practical insights into responsive web design and improve your front-end development skills through this hands-on coding session.
Overview
Syllabus
- Intro.
- Thanks to Kite for sponsoring the video!.
- Setting up the code files.
- Starting to add global styles.
- Start adding HTML markup and some styles.
- Styling the Community block.
- Styling the Subscription block.
- Styling the Why Us block.
- Adding a hover state to the button.
- Using CSS grid for desktop layout.
- Thanks to my GitHub sponsors!! ✨.
Taught by
Coder Coder
Related Courses
-
Modern CSS Solutions
-
CSS Grid & Flexbox for Responsive Layouts, v2
-
Build a Simple Website with HTML, CSS, JavaScript – Course for Beginners
-
Full Stack Web Development for Beginners- Part 1: HTML, CSS, Responsive Design
-
HTML & CSS Coding for Beginners: Build your own portfolio!
-
Web Development with HTML & CSS
Related articles
Reviews
5.0 rating, based on 1 Class Central review
-
Hurrah!
Finally, I have completed my Front-End with Pure CSS coding.
What a great experience with Class Central!
The way of teaching I like it.
For beginner, It's a right place to learning.
