How to create a responsive landing page with HTML & CSS

Подписаться 57 тыс.

Просмотров 358 тыс.

50% 1

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

Опубликовано:

27 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 58

@codewithbubb 3 года назад

This is the #Shorts version of a previous tutorial. Check out the step-by-step walkthrough of creating this landing page here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7VaNKOQs_1I.html

@therealecho1 3 месяца назад

The background image changes everything

@divinecreation6 3 месяца назад

and css

@alfiesolomon3531 Месяц назад

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 Год назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-pEiBBgFhZLk.html

@pezwarrior4 2 года назад

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

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

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

@amadoubachirniang892 3 года назад

You doing great Jr. I love this !

@knoxgaming7191 2 года назад

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

@codewithbubb 2 года назад

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

@skndash96 2 месяца назад

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

@TechBox2026 Месяц назад

Nice

@einstenoarquitetoelementar2233 22 дня назад

No bootstrap? Wild

@Anarchistry 2 года назад

if i only have pc than coding in phones

@monkeyD.jayant 2 месяца назад

its been 2yrs you got a PC

@Indo-Aryan9644 2 месяца назад

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

@Anarchistry 2 месяца назад

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

@motivate_now108 3 дня назад

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

@VideosViraisVirais-dc7nx 2 месяца назад

Onde ce oegas as imagens

@raghibanjum9473 3 года назад

Which text editor do you use?

@bendemetrius2658 3 года назад

VS code ig..

@DominicNweze 2 года назад

Best

@mr.producer7459 Месяц назад

what makes this a responsive landing page tho?

@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7VaNKOQs_1I.html

@FirstnameLastname-os2lm 3 года назад

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

@codewithbubb 3 года назад

Great! Thanks for your support 😀