How to create a responsive landing page with HTML & CSS

This is the #Shorts version of a previous tutorial of building a responsive landing page with HTML and CSS. You can see the original tutorial here: • Front-end Project: Res...
- Follow Me -
Twitter: / codebubb
Facebook: / juniordevelopercentral
Blog: www.juniordeve...
- Thanks! -
In this web development shorts video you'll see a responsive landing page being built with HTML and CSS.
It's a bit hard to see in this video (as you'll be watching it in a portrait mode) but the main point of the tutorial was to make the text and other content in the page to be displayed nicely no matter what screen size the user is viewing the page on.
To do this we'll use some simple CSS media queries to adjust the content on the page depending on how much available space there is in the browser.
For example, we'll adjust the margin on the left hand side and also reduce the overall font-size when screen space is limited.
If you're interested to see how this is done, check out the original web development tutorial here: • Front-end Project: Res...
#webdevelopment #css Channel Handle @codebubb

[@codewithbubb]

This is the #Shorts version of a previous tutorial. Check out the step-by-step walkthrough of creating this landing page here: ruclips.net/video/7VaNKOQs_1I/видео.html

[@therealecho1]

The background image changes everything

[@divinecreation6]

and css

[@pezwarrior4]

Thank you for this amazing content! Keep up the good work.

[@indianathe3rd742]

Purely simple and nice like it

[@jeelani_shah2258]

ruclips.net/video/pEiBBgFhZLk/видео.html

[@DeadSoul26-o4q]

How is the file called style.scss

[@tyl.enol_arts8591]

good job boss!
one question, what's the main difference between css and scss?

[@codewithbubb]

Thanks very much! CSS is what the browser understands and can use, SCSS (or Sassy CSS) is a superset of CSS and browsers can't read it directly so it needs to be transpiled to CSS. SCSS offers lots of features to make your styles re-usable and easier to code (once you've learnt it!). Hope that helps.

[@tyl.enol_arts8591]

@@codewithbubb wow, thanks!

[@ShanmukhaPulavarthy]

@@tyl.enol_arts8591 CSS and SCSS are both styling languages used for web development. However, the main difference between the two is that CSS is a traditional stylesheet language, while SCSS is a CSS preprocessor.
CSS is a simple styling language used to style web pages. It uses a set of predefined styles and selectors to apply styles to HTML elements. It is easy to learn and use, but it can become difficult to manage and maintain for complex projects.
On the other hand, SCSS is a superset of CSS that allows for more advanced features such as variables, nesting, and mixins. SCSS files are compiled into CSS before they are served to the browser. This allows for more efficient and organized code, making it easier to manage and maintain for larger projects.
In summary, CSS is a traditional styling language, while SCSS is a preprocessor that extends CSS with more advanced features. SCSS can help make large and complex projects more manageable and maintainable.

[@amadoubachirniang892]

You doing great Jr. I love this !

[@user-yaho666]

This Sass ?

[@alfiesolomon3531]

Ok i Love that! Need to watch more speedruns like that, it's so motivating

[@skndash96]

I'm sorry but did u forget about a breakpoint called mobile?

[@ytcreation6118]

It's awesome. I like it 🤩🤩. Where I get the source code I want to copy 😁🙂

[@tayze9008]

How can your name just be Unnamed Creation if you just copy,

[@waleefalrooh8]

Using only div element in html it's not a great way to rank your website high

[@codewithbubb]

Very true. That's why I didn't.

[@userr.757]

Then what to use to ranking in seo

[@knoxgaming7191]

What font is used to write 'Pear.by'??

[@codewithbubb]

It's Pacifico -> fonts.google.com/specimen/Pacifico

[@mnjawad357]

sorry for breathing the same air as you Sir!

[@TechBox2026]

Nice

[@mr.producer7459]

what makes this a responsive landing page tho?

[@dhonourableexecutivewash]

too fast

[@professorice4325]

SCSS* not CSS

[@Anarchistry]

if i only have pc than coding in phones

[@monkeyD.jayant]

its been 2yrs you got a PC

[@Indo-Aryan9644]

Use "Acode" for android it's literally vscode but for android 😂

[@Anarchistry]

@@monkeyD.jayant still can't, i'm currently earning for one but i had to prioritize school fees, but one last pay, i will finally getting one

[@huxi-q7o]

yes did u bought a pc

[@Anarchistry]

@@huxi-q7o yes, i did bought but the cheaper one.

[@maxstar1959]

🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓🤓

[@olliemoore3885]

Greetings from castleknock college❤❤😂😂😍🥰🥰😘😘😝

[@bishalpani7569]

It's all about background pic

[@RioJoythan]

Error 💀

[@einstenoarquitetoelementar2233]

No bootstrap? Wild

[@motivate_now108]

bro can you tell me how to get this type of images ?

[@nishaanjum4901]

beautiful❤

[@Blobb91]

css makes html better

[@FirstnameLastname-os2lm]

I need your source code

[@codewithbubb]

You can find it here: github.com/codebubb/pears-landing-page-tutorial
The original tutorial where we made this is here: ruclips.net/video/7VaNKOQs_1I/видео.html

[@FirstnameLastname-os2lm]

Thanks@@codewithbubb . Now i am a subscriber of you.

[@codewithbubb]

Great! Thanks for your support 😀

[@HaraldHavreki]

Anyone know the song name? :)

[@VideosViraisVirais-dc7nx]

Onde ce oegas as imagens

[@vinod31453]

Kaise bante ho video

[@Data.Analytics.with.Garvit]

🎉❤

[@jaikishangupta7276]

❤️❤️❤️😘🙏

[@codewithbubb]

Thankyou 🙂

[@yashrajdudhe]

Wew🔥

[@codewithbubb]

Thanks 😀

[@raghibanjum9473]

Which text editor do you use?

[@bendemetrius2658]

VS code ig..

[@DominicNweze]

Best

[@shreytiwari2982]

How to add color to button?