Easy Guide: How to Create a Responsive Hero Section with HTML, CSS & JS

Подписаться 2,8 тыс.

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

50% 1

Easy Guide: How to Create a Responsive Hero Section with HTML, CSS & JS
#herosection #responsive #simple #csstricks #tutorial #frontenddeveloper #landingpage
Download links:
1- / how-to-create-js-62188496
2- mutecoder.com/
Music Credit
Track: Tobu - Roots [NCS Release]
Music provided by NoCopyrightSounds.
• Tobu - Roots | House |...

Развлечения

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

5 фев 2022

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@FarhanAli-to3ku Год назад

Just amazing work you did well done bro 👍

@TheyCallMeFelix Год назад

Amazing tutorial, I like that you show best practice and actually label and nest your code for reuseability! Not many take the time to do that, also in your .css your transition shortcut how where you able to drop all transition properties at once? my emmit shortcut only drops transition only.

@TheyCallMeFelix Год назад

you do it with boarder radious aswell is it a setting or an extenetion? i have to keep pausing the video to keep up

@MuteCoder Год назад

thank you for goin through all codes and my work I really liked you watch my video ☺. For CSS I have extension "css-auto-prefix" that help you to create multi browser supporting CSS you need that you already noted in my video.

@TheyCallMeFelix Год назад

@@MuteCoder thanks for the reply. Keep up the great work

@hadj_s Год назад

I think you should explain your art ❤️ Graet job!

@paulpancake Год назад

Thank you for the tutorial. What makes the container change the layout back to image and text next to each other instead of under each other? For some reason after i set .hero to flex-wrap: wrap-reverse, it never changes back to normal on a bigger viewport. Am I missing something?

@MuteCoder Год назад

Please share with me your HTML code let me check.

@jc.92 Год назад

Not sure if it was intentional but there was a lot of confusion with the class naming across the html and css, which made following along a terrible experience.

@MuteCoder 11 месяцев назад

sorry for the confusion. I think i have improved in other videos if like you can watch them

@BartlomiejRamotowski Год назад

where can I find the images?

@V3SPR Год назад

I'm a beginner and I have a question: why "waste" extra lines of code to set for example border-radius: 10px; separately for each browser? Can't we just set border-radius: 10px; one time (without any prefixes like webkit etc) and it should work for all browsers?

@MuteCoder Год назад

Any developer loves to have it as you said but browsers are always in the hands of their own company developer rules. So for the support of our development code we need prefixes to support different browsers that we want or clients.

@uodige1 Год назад

thank you for the tutorial: quick question for newbie -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-transition: 10px; what are these coding?

@MuteCoder Год назад

These are different browsers supporting auto generated code for border radius

@Aditya-nh2qz 11 месяцев назад

@@MuteCoder these are mandatory to use or we can skip these code.

@MuteCoder 11 месяцев назад

@@Aditya-nh2qz not mandatory it is just good for practice.

@FarhanAli-to3ku Год назад

I suggest if you explain your code in your tutorials will create huge impact on your tutorials fame.

@MuteCoder Год назад

Thank you for watching.

@jorbitmultimedia 4 месяца назад

am stuck because you lied why would you identify '.hero' in css, and there is no 'hero text alone in html'

@MuteCoder 4 месяца назад

Sorry for creating confusion. Pleasse share your HTML and CSS on my contact email.

@jonanddy 4 месяца назад

when did you make a hero class

@MuteCoder 4 месяца назад

When i was writing HTML the same time.

@jonanddy 4 месяца назад

ik you wrote it at some point, but the only class i see close to it is class=“hero row container” but no actual class=“hero”. it was driving me crazy i still can’t find it