Тёмный

Responsive Landing Page Using HTML & CSS (A Little jQuery) 

Traversy Media
Подписаться 2,3 млн
Просмотров 212 тыс.
50% 1

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

 

1 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии    
@CODERSNEVERQUIT
@CODERSNEVERQUIT 6 лет назад
I really love your content and teaching sir i appreciate you efforts you are my inspiration.... Keep helping and contributing to our programming community... I have created my own RU-vid channel by inspired from you...
@mukeshphulwani5972
@mukeshphulwani5972 6 лет назад
CODERS NEVER QUIT oh great
@sahilphulwani7166
@sahilphulwani7166 6 лет назад
Brad is inspiration for all
@TraversyMedia
@TraversyMedia 6 лет назад
CODERS NEVER QUIT awesome!
@bytecauldron
@bytecauldron 6 лет назад
I really dig these long-format project videos. Thanks!
@its_maalik
@its_maalik 6 лет назад
I would absolutely love if you made a real-world E-commerce website. Front-end Along with a backend, I think that is the thing missing from your channel. Love from India. And I absolutely loved this website design.
@paulojamero9670
@paulojamero9670 6 лет назад
Up for this. Please :)
@lemueljunior
@lemueljunior 6 лет назад
Up!!!
@donstevewrites
@donstevewrites 6 лет назад
Up too boss
@JoshuaTMagee
@JoshuaTMagee 5 лет назад
+1 for this as well. Your tutorials are the best on RU-vid and incredibly helpful, Brad. I'd really love to see your take on how to build a full front- and back-end website combining common complex website features, such as user authentication, e-commerce, and memberships/subscriptions. Would be willing to pay a decent amount for such a course. Thank you!
@thesaltyfrog7683
@thesaltyfrog7683 5 лет назад
Pls Do! nice videos they are amazing!
@shashwatgupta_
@shashwatgupta_ 4 года назад
can somebody tell me how to multitask with tabs overlapping on each other and the dock is hidden how to do it on your Mac?
@rajatmalik7256
@rajatmalik7256 6 лет назад
Thank you so much you are helping me alot to give me a kick start to learn more about web development , please keep doing it !! I appreciate all your work 🙂👍
@denzoV2
@denzoV2 5 лет назад
It's like GOD sent you to help us
@prsion1925
@prsion1925 6 лет назад
It`s exactly what I was looking for and the best channel what I ever knew!!!
@mahmoudzouari8100
@mahmoudzouari8100 4 года назад
the smooth scrolling didnt work for me i checked the code and its the same HELP!!
@jguz101
@jguz101 6 лет назад
Great video! May I suggest walking someone through mobile first development using min-width. I find that a lot of new developers don't fully understand. Big thanks again for your videos!
@lemueljunior
@lemueljunior 6 лет назад
UP!!!
@soad2609
@soad2609 6 лет назад
Amazing Video 😍 By the way, This year our Eid-Ul-Adha is on 22nd August, Eid-Ul-Adha is the 2nd biggest religious festival. So Eid Mubarak. 😊
@nourel-dinahmed398
@nourel-dinahmed398 6 лет назад
Soad hey eid mubarak bro
@soad2609
@soad2609 6 лет назад
+Nour El-din Ahmed Eid Mubarak bro.
@dancehalllyrics1303
@dancehalllyrics1303 6 лет назад
Hey Brad, For some reason, the font family (PT Sans) doesn't want to be added to anything else but the Showcase & Navbar section. I have tried everything (inline, internal, and external), but nothing happened. Can you maybe tell me what to do and how to solve it? Thanks for the awesome content you upload. Both your courses and the videos you upload to RU-vid. They have learned me a lot, and I keep on learning from your content. God bless you and your family. Hope everything goes well for you and your family, because that's what you and your family deserve. Best regards, Victor
@erykkryszewski5803
@erykkryszewski5803 6 лет назад
this is what im on this chanel for. responsive front end stuff :D
@QuanNguyen-og6pq
@QuanNguyen-og6pq 5 лет назад
I'm so grateful for this type of "from scratch for beginners" videos from you. Wish you health and happiness, so you can make more videos.
@aggelosthan4610
@aggelosthan4610 5 лет назад
While I place the jquery script and after the js script in section, smooth scrolling does not work, but when I place it in the bottom of the , it works! Why? Thanks in advance, keep up the good work.
@LEEROYY182
@LEEROYY182 5 лет назад
Great content dude, following your html & CSS course currently and really getting to grips with it. This is just what I needed too as I want to start creating example portfolio and dummy client projects. Again, thank you!
@soad2609
@soad2609 6 лет назад
I'm very weak at media query...Could you give me some suggestions on how can I improve my skill in media queries?
@kevinurielfonseca
@kevinurielfonseca 6 лет назад
Your videos are always amazing Brad!. I don't know what would have been of me if it was not because of your videos, you have helped me so much in starting off my freelance career,etc. Your projects always inspire me not to give up!.
@JosephIT
@JosephIT 5 лет назад
Just gone fan of yours Sir ! Really enjoyed the whole video but thought that it could be much more useful for me with Bootstrap !!!! However, good day to you...
@MenAtWorkMedia22
@MenAtWorkMedia22 6 лет назад
Thanks, Brad! You are the man!
@deidei2305
@deidei2305 5 лет назад
My website won’t scroll
@bripowered
@bripowered 5 лет назад
Thanks, Brad. How do you set the browser to auto-refresh?
@raphaelrocha313
@raphaelrocha313 4 года назад
live Server extension on vscode
@_isaac_muniz_
@_isaac_muniz_ 4 года назад
for some reason my menu doesn't open when I click him in mobile size screen, and I can't find why... Edit: the problem was that I was loading my main.js file before loading the jQuery, and the contrary works.
@chipmunkshqip1423
@chipmunkshqip1423 6 лет назад
You work sooo clean. I cant do that, if I code that website, my code will be horrible!! 😂😂😩😩
@erykkryszewski5803
@erykkryszewski5803 6 лет назад
like the way u code this time. i mean u create one section in html, show us how u style it in css and then u start coding another html. sometimes there is whole html secion before any css and it is a bit messy. I think that early coders sometimes may not be able to figure out all that lines of code when they dont clearly see what section are they working at now at this moment
@ammarasiddique3270
@ammarasiddique3270 5 лет назад
i have issue in back ground picture anyone help me
@daviddrahllensa4165
@daviddrahllensa4165 4 года назад
HI Traversy! I have a question. Which is, these days, the best way to build a responsive webpage, adapted to most of the browsers versions. Thank you so much.
@NorlynCodes
@NorlynCodes 4 года назад
Why does mine doesn't work on github? Smooth scroll doesn't work.
@Hammmmyy
@Hammmmyy 6 лет назад
Thanks so much for the content! I love the mix of tutorials you’ve been putting together. Some are full series with projects and some are quick 1 hr vids like this that are great practice.
@TraversyMedia
@TraversyMedia 6 лет назад
Travis Grossman thanks i try and be very diverse 😊
@metalizism
@metalizism 3 года назад
not sure if I missed something about the gift card img but I had to set width to 100% (just did it in the img tag - yeah I know bad bad but I was totally confused lol) because it was totally oversized and would go further than 100vw for some reason Oo
@gonzoo2794
@gonzoo2794 6 лет назад
Hello Sir , Please make a video on Laravel , socket.io and redis .. Something that fetches real time data with the help of websockets, like live Bitcoin data or something similar . I love your videos... Thank you
@sangamadhikari8497
@sangamadhikari8497 6 лет назад
I like it how you write A Little jQuery.
@谷崎潤一郎-b6j
@谷崎潤一郎-b6j 5 лет назад
15min30sec, The div is named " class=section-main container" what's the meaning of this way? And From 22:10s you code css, why use ".container" before ,and use #showcase .container later? who can tell me???
@yousafwazir286
@yousafwazir286 2 года назад
Thank you
@matevzmak6781
@matevzmak6781 6 лет назад
This channel is so underrated holly shit
@Kelvinaton
@Kelvinaton 3 года назад
I didnt see you set any z-index for the nav bar to overlap content when scrolling. Did the jsquery include that feature ?
@zoransandric5568
@zoransandric5568 5 лет назад
one more waste of time....You're using a channel for your promotion-this is called advertising
@gerardsegismundo8931
@gerardsegismundo8931 6 лет назад
vue express -mevn stack next pls. 🙏
@nnaemekaish007
@nnaemekaish007 6 лет назад
That will be a very nice idea
@cperch37
@cperch37 4 года назад
I know this is two years later but has the ability to use the free version of font awesome changed? I 'm having trouble finding the link in the video and think I may have to sign up for the paid version.
@roter13
@roter13 4 года назад
Your Udemy course is close to $100 right now. Do you know when the price will come down a little more?
@DevilsDaddy1
@DevilsDaddy1 6 лет назад
Brad please do React Native with Firestore full CRUD app with a good UI either as free content or even a Udemy course. Thanks for all the work.
@ninjask8ter
@ninjask8ter 3 года назад
In 1 tutorial the syntax is this: .cli .grid > *:first-child In this tutorial the syntax is this: footer .footer-cols ul li:first-child
@RareTechniques
@RareTechniques 5 лет назад
00:55 ( ͡° ͜ʖ ͡°) Lets get started 04:39 setting up Explorer files in editor 06:15 jQuery - get the minified or uncompressed version 08:00 commenting out the sections 08:40 codepen in description, "view in compiled Haml" (% ---> ) 10:45 =||=, grab css syntax 11:20 import font from google.font ( @import url('fonts.googleapis.com/css?family=PT+Sans');) **IF PROBLEM OCCURS WHEN LOADING CSS INTO HTML, CHANGE THE STYLESHEET HREF=location to the correct directory in index.html** 14:00 "a lil jQuery" javascript 20 lines *17:35* *( ͡° ͜ʖ ͡°)* Sections 36:50 Buttons 40:00 Text colors 50:00 Footer 1:00:00 Smooth scrolling
@zeroproductions7759
@zeroproductions7759 6 лет назад
Hi Brad, your content gives more interest in learning new stuff. Thanks and keep continuing.
@NotBeHaris
@NotBeHaris 5 лет назад
make a video on how to code website like facebook plz plz plz
@davetse2482
@davetse2482 4 года назад
Your career is speaking out loud Brad, 10x.
@vare2008
@vare2008 6 лет назад
Hey Brad! This is great. Do you have in plan to make a short "crash course" on Basic Principles of Programming?
@lemueljunior
@lemueljunior 6 лет назад
Thank you for another helpful video. I just remembered a lot of tricks I had forgotten when using pure css (no sass, no frameworks). You're the best ;)
@yuetnhinhin
@yuetnhinhin 4 года назад
Does anyone tell me the name of code editor using in this video? It saves lots of time. Thanks.
@jerryrobinson958
@jerryrobinson958 4 года назад
Brad. What is the girl in the image wearing? Just askin. :)-
@sahanaravikumar1520
@sahanaravikumar1520 5 лет назад
i am not understanding pleaase help me in that second part where the background turns black
@adamstephens7633
@adamstephens7633 10 месяцев назад
i normally love your videos but this should be called how to copy and paste
@ademyildizlanguages
@ademyildizlanguages 5 лет назад
I gave a like and completed this tutorial with you. It was just so useful.
@Hamasakifanboy
@Hamasakifanboy Год назад
does smooth scrolling work with dropdowns? It's not working for me
@vivekkumar-pc1xy
@vivekkumar-pc1xy Год назад
Thank you so much sir, for this amazing content
@n_fan329
@n_fan329 6 лет назад
Hey Brad, in order to get the smooth scrolling with no extra jQuery or any JS snippets, you can just only add scroll-behavior: smooth to the element to enable it for the whole page :) html { scroll-behavior: smooth; }
@ninjask8ter
@ninjask8ter 3 года назад
I was wondering if you have a course on psuedo selectors?
@KikeRibeiro
@KikeRibeiro 3 года назад
Wow!. Congratulations Man!!!
@nabeeltahir6013
@nabeeltahir6013 6 лет назад
Kindly sir make videos on Google matrix api
@jeffreyjimenez3202
@jeffreyjimenez3202 4 года назад
Orange Music is better than Apple Music
@danielstoicamusic
@danielstoicamusic 6 лет назад
Another good resource for mockups: placeit.net/
@kacperkepinski4990
@kacperkepinski4990 3 года назад
why your mytunes is visible on big width?
@DreamingDolphing
@DreamingDolphing 4 года назад
In 2020 we can use png favicon instead .ico
@CyberNicolazzo
@CyberNicolazzo 6 лет назад
Great tutorial! Just followed along on my computer. Keep it up!
@Enclave_Engineer
@Enclave_Engineer 4 года назад
21:53 Why does that container works, even he did not put it in html?
@tanzeelrahman6857
@tanzeelrahman6857 4 года назад
Exactly my question! Just that mine does not work!
@uzair004
@uzair004 5 лет назад
WHY the some parts of code is NOT working for me,, even i downloaded your code from git it is also not working in your code. 1) Font Awesome is not working (symbols aren't showing) 2) smooth scroll and JS isn't working either throwing some kind of error like "access-control something something"
@NorlynCodes
@NorlynCodes 4 года назад
Smooth scroll doesn't work on git for me as well
@sagirTech
@sagirTech 4 года назад
much love Brad, from Nigeria
@oxynnyxo2763
@oxynnyxo2763 5 лет назад
How to set a logo on any side? left or right never mind?
@tomtawadros
@tomtawadros 6 лет назад
Is there a reason you went through the trouble of making the favicon image into an ico and placing it in the root? It seems like a regular png from a folder works just as well.
@randysandberg3755
@randysandberg3755 6 лет назад
I like these tutorials Brad. Keep drillin’ in HTML and CSS.
@prayerrequest4479
@prayerrequest4479 5 лет назад
When i am searching fontawesome i find another link different from what i see on your tutorials. I need help
@prayerrequest4479
@prayerrequest4479 5 лет назад
how can i add image slider using w3css frame works?
@omarsharif3582
@omarsharif3582 4 года назад
sadly I can't keep up I watched the whole video twice pausing and trying to understand every thing while at the same time typing in my VS but after this and when it comes to try doing it by myself it's just like i know nothing .. I can't type right and can't put pieces together .. I tried so many times but there is no progress at all .. I don't know where the problem at am I learning wrong or am I just stupid I don't know what to do and I really appreciate any help :(
@doganozgur
@doganozgur 4 года назад
it takes time. more struggle you put, more proficiency you get.
@__prod1gy__793
@__prod1gy__793 6 лет назад
Who are those fu***** dislikers?
@antoninog4976
@antoninog4976 5 лет назад
@Traversy Media, this is awesome. Are you willing to create a video tutorial to teach how to upload a created landing page to a Wordpress website? Some people do not know how to do this. Do you have a tutorial on how to group folders together to make a landing page or even a website go live?
@pips4cash897
@pips4cash897 3 года назад
Thank You, Brad. being following your tutorial for awhile now.i knew nothing about coding before but by God's grace really catching up... Nigeria all the way.
@Kamizura
@Kamizura 5 лет назад
So I´ve followed this with my own stylings etc., but for some reason, when i scroll down, the images overlap the navbar and its not visible anymore. I just can´t find the reason why. I´ve circumvent it, by giving the sections a z-index -1, but then you cant add hover effects anymore. Any ideas guys?
@WendellsCat
@WendellsCat 6 лет назад
Does anyone else have issues with Live Server? It's like a crap shoot for me. Sometimes the "go live" is at the bottom, sometimes it isn't. Sometimes it doesn't auto re-load, when it is working. Just curious. Thanks Brad, again, for this project.
@stiforr8714
@stiforr8714 6 лет назад
Prettier doesn't handle HTML btw. That's VSCodes normal formatOnSave.
@briannock5300
@briannock5300 6 лет назад
Always great videos but at 50:55 instead of doing a copy & paste it would be cool if you showed the power of emmet by using ul>li*5>a[href=#] Then all you have to type is the link text.
@YARii7
@YARii7 6 лет назад
Please add the subtitles (arabic or english) with video 📹,because I'm not good in English.. Please help me.. Thank you..
@gohardorgohome5547
@gohardorgohome5547 6 лет назад
Awesome work ! I'm from India nd i am pursuing my final year b.tech in C.S.E and last year i decided to choose my career as a full stack web developer since, 2 months back i watched your videos for me it'll be the best contents on the same i ever found on youtube thanks for giving us such great knowledg @traversy_media @brad_traversy
@jonramos2022
@jonramos2022 4 года назад
That girl has a great body.
@gamedeveloper1440
@gamedeveloper1440 5 лет назад
Responsive Landing Page Using HTML & CSS (A Little jQuery)
@Ebtsamhful
@Ebtsamhful 5 лет назад
i couldn't understand whats program did u use? anyone knows pleas tell me
@jashangill4089
@jashangill4089 5 лет назад
me too want to know!!
@dumbcat
@dumbcat 6 лет назад
a very significant portion of the population (including a lot of businesses) is still using Internet Explorer 11. would be interesting to see a video on how to handle the challenges of HTML5 not working as expected in IE11. for example, the company i work for with 4,000 employes is still using IE11 as the default browser because some of our older company sites were written for IE. that sucks for someone like me who wants to make killer content for the business. everyone is going to be opening it in IE11. argh!
@hassantariq8847
@hassantariq8847 5 лет назад
Sir Brad, The Web Legend ! #Respect
@ArpitSingh-dz7gt
@ArpitSingh-dz7gt 4 года назад
Nice and really a good vedio
@QuanNguyen-og6pq
@QuanNguyen-og6pq 5 лет назад
At 20:00, can anyone please explain what the problem actually is and why overflow: hidden could solve it?
@darkmath100
@darkmath100 6 лет назад
Is the source code available for this video? Thanks.
@khismith6919
@khismith6919 6 лет назад
darkmath100 it’s in the description
@AMC-throwaway
@AMC-throwaway 6 лет назад
Follow your channel a lot so course which tech you would say would be ideal to spend the most of your time in: express (mean/mern) or laravel? No one seems to make valid points for either or don't know much about either of them
@abdulwahab6222
@abdulwahab6222 6 лет назад
nice vedio ever love you...
@unheardofworld
@unheardofworld 5 лет назад
I love all of your projects. The only person and the only channel who made me understand the basic front-end and back-end. Love from Pakistan
@Skaxarrat
@Skaxarrat 6 лет назад
Don't apologise. This video format are cool. I enjoyed it.
@indian-js1xq
@indian-js1xq 6 лет назад
thanks
@goncalomidoes8222
@goncalomidoes8222 6 лет назад
What short cut did he use to add the comments. just appeared. Btw what's that beautiful search page did he made it?
@thehumanexperience7062
@thehumanexperience7062 5 лет назад
the only problem is most of that don't work in dreamweaver errors all over the place
@user-rc7oz6th2f
@user-rc7oz6th2f 5 лет назад
nah ur just bad
@RickBeacham
@RickBeacham 5 лет назад
Use Code IDE. Don't use Dreamweaver.
@ashokkillo7886
@ashokkillo7886 6 лет назад
my css is not reloading in atom live server. do we have to make any settings for that. by default its working for html pages but not for css. Help me with that.!
@ARMAND.Travel
@ARMAND.Travel 5 лет назад
what is jQuery?
@niccubagonoc2153
@niccubagonoc2153 6 лет назад
Neat! Can you show us how to do pagination(with numbers) in React with Redux Brad? Please oh please oh please? Thank you!
@xephalpha6060
@xephalpha6060 6 лет назад
i learned a lot from your videos. could you please do vue.js videos using vue cli 3.0 with vuetify? thanx.
Далее
Flexbox CSS In 20 Minutes
19:59
Просмотров 1,8 млн
The Importance of Specialization in Coding
7:13
Просмотров 231 тыс.
Please stop using px for font-size.
15:18
Просмотров 172 тыс.
Responsive HTML & CSS Side Menu From Scratch
23:57
Просмотров 397 тыс.
Simplify your CSS with these 3 grid layout solutions
7:10
Being Competent With Coding Is More Fun
11:13
Просмотров 84 тыс.
Basic Parallax Website With HTML & CSS
20:48
Просмотров 439 тыс.
How principled coders outperform the competition
11:11
Pluralsight Login Page Clone - HTML & CSS
42:35
Просмотров 230 тыс.
Using CSS custom properties like this is a waste
16:12
Просмотров 172 тыс.
Build a Responsive, Mobile First Website - HTML5 & CSS3
48:23
Brutally honest advice for new .NET Web Developers
7:19