Step by Step Responsive Web Design Using HTML and CSS Leave a comment

Learn how to create a responsive landing page from scratch with HTML, CSS, and JavaScript. You’ll cover some basics of HTML and CSS as well as more advanced CSS topics. Last, you’ll create a toggle menu with a custom JavaScript function and add responsiveness with CSS media queries.

πŸ‘€ LIVE DEMO πŸ‘€

πŸ—‚ DOWNLOADS πŸ—‚

⏰ TIMESTAMPS ⏰

Import Fonts and Images into Project: 1:15

Import Google Font: 5:14

HTML for Hamburger and Nav: 6:12

HTML for the Home Header: 8:49

Install Live Server: 11:04

HTML for the Cards: 12:17

Import JavaScript File in HTML Body: 15:30

Import Font Face into CSS File: 16:22

CSS for Root Elements and CSS Resets: 17:09

REM Overview: 18:07

CSS for Home Info Section: 20:50

CSS for Line Break Span Element: 25:03

CSS for Card Section: 33:05

Create and Get CSS Code for Gradients Using Figma: 40:17

CSS Aspect Ratio: 42:56

CSS for Hamburger and Menu: 45:10

JavaScript for Menu Animation: 59:22

Responsive Design with CSS Media Queries: 1:03:51

πŸ”— HELPFUL RESOURCES πŸ”—

VSCode:

Figma:

ImageOptim:

Google Fonts:

Live Server:

Firefox Developer Edition:

πŸ‘‹ FOLLOW US πŸ‘‹

Instagram:

#HTML #CSS #LearnToCode

Leave a Reply

Your email address will not be published. Required fields are marked *

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

All Services (20% off) is ON.
Act fast to grab season’s best sale.
x