How to create a responsive landing page with HTML & CSS

No video

How to create a responsive landing page with HTML & CSS

Рет қаралды 321,252

Күн бұрын

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

Пікірлер: 52

@codewithbubb 3 жыл бұрын

This is the #Shorts version of a previous tutorial. Check out the step-by-step walkthrough of creating this landing page here: kzfaq.info/get/bejne/bbyRga6AttnDYX0.html

@therealecho1 2 ай бұрын

The background image changes everything

@divinecreation6 2 ай бұрын

and css

@alfiesolomon3531 20 күн бұрын

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

@indianathe3rd742 3 жыл бұрын

Purely simple and nice like it

@jeelani_shah2258 Жыл бұрын

kzfaq.info/get/bejne/pquZdaWYq86-fJ8.html

@pezwarrior4 2 жыл бұрын

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

@amadoubachirniang892 3 жыл бұрын

You doing great Jr. I love this !

@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.

@TechBox2026 20 күн бұрын

Nice

@ytcreation6118 3 жыл бұрын

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

@tayze9008 2 жыл бұрын

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

@nishaanjum4901 2 ай бұрын

beautiful❤

@skndash96 Ай бұрын

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

@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 2 ай бұрын

Then what to use to ranking in seo

@knoxgaming7191 2 жыл бұрын

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

@codewithbubb 2 жыл бұрын

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

@mr.producer7459 10 күн бұрын

what makes this a responsive landing page tho?

@bishalpani7569 27 күн бұрын

It's all about background pic

@VideosViraisVirais-dc7nx Ай бұрын

Onde ce oegas as imagens

@Anarchistry 2 жыл бұрын

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 23 күн бұрын

yes did u bought a pc

@Anarchistry 9 күн бұрын

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

@raghibanjum9473 3 жыл бұрын

Which text editor do you use?

@bendemetrius2658 3 жыл бұрын

VS code ig..

@DominicNweze 2 жыл бұрын

Best

@RioJoythan 2 ай бұрын

Error 💀

@HaraldHavreki 2 ай бұрын

Anyone know the song name? :)

@yashrajdudhe 3 жыл бұрын

Wew🔥

@codewithbubb 3 жыл бұрын

Thanks 😀

@QSLoppy 25 күн бұрын

css makes html better

@FirstnameLastname-os2lm 3 жыл бұрын

I need your source code

@codewithbubb 3 жыл бұрын

You can find it here: github.com/codebubb/pears-landing-page-tutorial The original tutorial where we made this is here: kzfaq.info/get/bejne/bbyRga6AttnDYX0.html

@FirstnameLastname-os2lm 3 жыл бұрын

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

@codewithbubb 3 жыл бұрын

Great! Thanks for your support 😀