Build a Modern Course-Selling Landing Page with HTML, CSS & BEM
In this video, I’ll guide you through coding a stunning and fully responsive course-selling landing page using HTML, CSS, and the BEM (Block Element Modifier) naming convention. This UI design is perfect for showcasing online courses with a clean, professional look that enhances user experience.
What’s Inside:
– Hero Section: A beautiful hero area with course highlights, pricing, and a call-to-action button to engage visitors right away.
– Specifications: Details about the course structure and learning paths to give potential students a clear understanding of what they’ll gain.
– Course Suggestions: A section recommending similar courses, designed for easy navigation and exploration.
– Career Support Information: Key features of mentorship programs and support offerings, visually presented to build trust.
– Instructor Section: A brief introduction to the course instructor, building credibility and connection with the audience.
– Newsletter Signup: A footer with an email subscription option to keep users informed about the latest updates.
Key Skills You’ll Learn:
– Structuring HTML with a logical and accessible layout
– Styling complex layouts with CSS for a polished, modern look
– Using the BEM methodology for organized, maintainable CSS code
– Creating a fully responsive design that looks great on any device
Whether you’re new to web design or looking to refine your skills, this tutorial will help you build a professional landing page that’s optimized for conversions. By the end of this video, you’ll have a fully coded template you can use for your own projects or as part of a portfolio!
Source Code : Will upload tomorrow …
Keyboard Link: https://keydous.store/products/keydous-nj80-keyboard
Instagram: https://www.instagram.com/keydouskeyboard/
Youtube: https://www.youtube.com/channel/UCYZyyTgJj1mG1Qz-x6yjX8w
Pinterest: https://www.pinterest.com/keydouskeyboard/
Responsive Portfolio Designs Playlist : https://www.youtube.com/playlist?list=PLkC56g8fboI3djlKjBtkw2W-Ryyeym98w
Join 100 Days Of JavaScript Playlist: https://www.youtube.com/playlist?list=PLkC56g8fboI0HghByzVuD2Vz8ROUXfF_j
Web Design Coding Bootcamp Playlist : https://www.youtube.com/playlist?list=PLkC56g8fboI0QgD6VvH5TN0Nm1i5dVITH
Responsive Dashboard Designs Playlist : https://www.youtube.com/playlist?list=PLkC56g8fboI2s3NSGtfPEopoV0Q0gHSnh
ASMR Game Coding Playlist : https://www.youtube.com/playlist?list=PLkC56g8fboI3nNZQS2mb6kCqK9yS0XgD9
source of all projects also will upload in AsmrProg github page :
https://github.com/AsmrProg-YT
Video Contents :
00:00:00 – Intro
00:01:34 – Warming hands
00:01:40 – Main codes
00:02:10 – Adding fonts
00:02:43 – Navbar
00:03:45 – Main styles
00:04:14 – Navbar styles
00:08:45 – Hero section
00:14:35 – Hero styles
00:21:41 – Program section
00:24:24 – Program styles
00:27:34 – Course list
00:30:08 – Courses styles
00:34:13 – Career section
00:35:53 – Career styles
00:38:07 – About section
00:39:05 – About styles
00:42:38 – Footer
00:46:13 – Footer styles
00:51:38 – Responsive
01:02:20 – Final Result
About AsmrProg Channel :
Here I upload ASMR programming tutorials related to HTML, CSS, Sass, JavaScript, React, PHP, Frameworks such as Bootstrap and more along with creative UI/UX Designs.
AsmrProg is a community for web developers from all levels to learn and grow their skills in front-end and back-end web development.
Subscriptions, good comments and likes are great support for me 😍
Don’t re-upload or edit the videos on your channel.
All copyrights by AsmrProg.
