Тёмный

HTML & CSS Easy Elegant Landing Page With Blur Effect 

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

In this video we will build a simple responsive and elegant landing page with HTML and CSS. We will be using the grid system, media queries, transitions, etc
Sponsor: DevMountain Bootcamp
goo.gl/6q0dEa
Code:
codepen.io/bradtraversy/pen/j...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Courses
www.traversymedia.com
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia

Наука

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

 

12 сен 2018

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 307   
@richytechsolutions
@richytechsolutions 5 лет назад
Who else thinks Brad is the best Teacher on RU-vid?
@taariqq
@taariqq 5 лет назад
As long as James Williamson is not on youtube, true.
@samakintunde
@samakintunde 5 лет назад
There's no thinking here. He just is.
@Shpongloid
@Shpongloid 5 лет назад
I wish he could have been my teacher for everything! I quickly lose focus if the content/teacher isn't engaging, never been the case with my boy B Rad. :)
@DonaldWilson1988
@DonaldWilson1988 5 лет назад
James Williamson is arguably the best in my opinion Brad however is right there with him....
@wawerubenson6912
@wawerubenson6912 5 лет назад
hahaha
@jaroslavhuss7813
@jaroslavhuss7813 5 лет назад
Who is also having this much fun with Brad's videos?
@bialcus69
@bialcus69 5 лет назад
It's called netflix and c... I mean Brad and chill ;)
@taariqq
@taariqq 5 лет назад
lol
@NorlynCodes
@NorlynCodes 4 года назад
I love how he teaches. Perfectly fits how I learn things.
@jerryadkins9922
@jerryadkins9922 4 года назад
Brad I just want to say thank you, following step by step makes grasping the concepts so much easier! The more I do, the better I understand. You have a natural gift of teaching keep up the great work! thanks again.
@kevinzhang8974
@kevinzhang8974 5 лет назад
Thanks Brad! I always enjoy you come with these kind of simple exercises (e.g. landing page) for us to learn and refresh the basic knowledge. I managed to completed it within 1 hour … spend some time to try to come with a logo I want … Thank you!
@user-rn7th6md4e
@user-rn7th6md4e 5 лет назад
I’m studying front-end programming for my job in Korea... your channel helped me lots of things. you are the best teacher on youtube.... Thanks
@rowdytriesstuff9173
@rowdytriesstuff9173 5 лет назад
The blur effect is amazing, love this effect
@Renniak
@Renniak 5 лет назад
Please Brad never stop making videos on youtube and udemy courses. I think is great how you make beautiful things in a really simple and understandable way. I get really inspired everytime I watch your content. Thanks!
@jumanjiwarlord
@jumanjiwarlord 3 года назад
I've been following along over 10 tutorial sites now... and its definitely getting easier. Dude is a genius.
@CEHill-tt8gg
@CEHill-tt8gg 5 лет назад
Brad, I never thought programming could be so enjoyable! Thanks again for de-mystifying so much baffling technology, you are helping so many of us become better programmers & designers!
@randysandberg3755
@randysandberg3755 5 лет назад
Love these mini-project videos Brad. I learn more than taking a course.
@BlueIceAce2015
@BlueIceAce2015 5 лет назад
That shortcut at the beginning already blew my mind. You are my favourite teacher and a damn inspiring story as well.
@Brxlx
@Brxlx 5 лет назад
Really nice content, Brad! I have been following this channel over a year and i have been learning so much! Thank you for this pure gold. Cheers from Brazil!
@degraphe8824
@degraphe8824 5 лет назад
Brad my man...you are just the best... clean comprehensive coding style... beautiful
@itahirk
@itahirk 5 лет назад
Thank you so much Brad. You've been an inspiration. Learned so much from you. It's the kind of contents everyone usually wants to see, i.e. create something of production level.
@cdrive8740
@cdrive8740 5 лет назад
This was so much fun to complete, and the instructions were super clear! So excited for the new skills I can play around with and add to my growing skillset!
@CodingAfterThirty
@CodingAfterThirty 5 лет назад
As always you make the best content. I recommend your channel and your courses to anyone who is in the process of starting learning to code. You put out so much amazing content for free that it blows my mind. Keep it up. I started watching your videos about a year and a half ago and been learning to code for about five years. There were times that I wanted to quit and your personal story RU-vid videos kept me going. Thank you.
@CerealTuesday
@CerealTuesday 5 лет назад
Another absolutely awesome tutorial. Love the ideas and dedication. Thanks so much Brad👍 Keep up the great work
@LearnArabicforfree
@LearnArabicforfree 5 лет назад
Best teacher on youtube. Ty for your efforts man.
@technofool3
@technofool3 5 лет назад
I can't thank you enough. All of your videos are just awesome.
@CodingJourney
@CodingJourney 5 лет назад
Quality as usual! Thanks Brad!!
@tshepangsibeko6100
@tshepangsibeko6100 5 лет назад
Even in South Africa you got students, keep up the great work bro!
@adriansun2999
@adriansun2999 5 лет назад
Your videos are so good. What used to be so complicated is now so very easy.
@shubhamgupta-to7so
@shubhamgupta-to7so 5 лет назад
Everytime notification from youtube that Brad Traversy uploaded a video made my day. Thank you so much Brad for such an informative video.
@jellycoding
@jellycoding 5 лет назад
I was looking back at the content on your channel. It is very high quality. Thank you for sharing all your knowledge.
@wojciechcelka2637
@wojciechcelka2637 5 лет назад
Mr. Traversy, you are very helpful in my learning of all that webdev stuff. Thank you very much from POLAND and greetings!
@MrRuudvane
@MrRuudvane 4 года назад
Thank you Brad for this great tutorial!
@moizkhalid2714
@moizkhalid2714 5 лет назад
Your videos are so much informative. Respect from Pakistan 👍
@arbazzaman5090
@arbazzaman5090 5 лет назад
Zindabaad bhai .. Also from lahore pakistan.. very informative vedio indeed
@TraversyMedia
@TraversyMedia 5 лет назад
Thank you. Im glad they help 😊
@taariqq
@taariqq 5 лет назад
was that a thumbs up or a thainga?
@arbazzaman5090
@arbazzaman5090 5 лет назад
@@taariqq obviously thumbs up man
@taariqq
@taariqq 5 лет назад
lol
@emmanueleze3028
@emmanueleze3028 5 лет назад
I love it when you make videos on making responsive websites. Much love from Nigeria.
@nurashariff5422
@nurashariff5422 5 лет назад
Wehdone chairman👍🇳🇬
@chukwuebukaokafor1371
@chukwuebukaokafor1371 5 лет назад
Your contents are exceptional and epic. Always happy to learn new stuffs with brad. Thanks man
@DonaldWilson1988
@DonaldWilson1988 5 лет назад
As always another top notch very easy to follow video... Keep them coming Brad, I might actually get the hang of all this after all, thanks to you!!
@MenAtWorkMedia22
@MenAtWorkMedia22 5 лет назад
Thanks, Brad! You are the man!
@kyrie4728
@kyrie4728 5 лет назад
i'm always learn something new from you brad thank you !
@aichampionofficial
@aichampionofficial Год назад
I agree ... it is pretty good. Adapting this for my online resume - thank you so much Brad. I think you are the best teacher of software creation content.
@kokazo2009
@kokazo2009 5 лет назад
Thank you Brad, it worked like a charm even on my old Samsung S5!
@andrewdoan6311
@andrewdoan6311 5 лет назад
Thanks Brad! Great video as always!
@waseem403
@waseem403 5 лет назад
Thanks brad ,i got a job you have helped me a lot ,i cant express my feeling
@sahilgupta5470
@sahilgupta5470 2 года назад
Thanks Brad. 1 Year ago I watched your all Video Now i am Front-End Developer. Kids Visits carry Legend Visits Brad thanks you so much
@Shafty17
@Shafty17 5 лет назад
Brad is the best, he and Bucky are true heroes of people!
@vusimbhamali1913
@vusimbhamali1913 5 лет назад
All the way from the Kingdom of Swaziland, Southern Africa. Thank you so much for the great Tutorials. College Never taught me this, Front End development. Thank you once again.
@DreadPop
@DreadPop 4 года назад
You are just KILLING it, man. Everytime I see a cool video or project I want to try, it ends up being Traversy Media, UHHH-gain. Excellent, short projects that are easy to follow for a newbie/intermediate. Just bought your Udemy course on the MERN stack (from your link so you get paid more!). Keep it up, brother!
@angeld5093
@angeld5093 5 лет назад
wow, this is so cool. the blurring effect!
@sheikhrashed1242
@sheikhrashed1242 5 лет назад
you are such a great teacher ever i got
@tcp5212
@tcp5212 5 лет назад
You are amazing brad, thank you.
@MWfanat
@MWfanat 4 года назад
actually surprised how perfect this tutorial was. But it was great!
@smartkhanfaizan
@smartkhanfaizan 5 лет назад
First of all thanks for making these kinds of videos. Your videos are very to the point and informative. I am following your videos from more than a year now.. i watched almost all your videos.. great work. Simple plain creative .. i also like your voice.. respect from jammu and Kashmir.
@makyg4594
@makyg4594 5 лет назад
Brad, this is genius... Thank You very much!
@ghislainleonel7291
@ghislainleonel7291 5 лет назад
Another nice one Brads. Your works motivate me to see how possible i can attend my dream profession. I am just so thankful.
@franciszekjob8236
@franciszekjob8236 5 лет назад
Man, such an awesome video! Your course is amazing and veeeery helpful! I enjoy it very much. Keep going!
@MULTICODE
@MULTICODE 5 лет назад
Thanks, you always help me in most of my projects
@_romeopeter
@_romeopeter 5 лет назад
I have heard Brad talk so much that, I feel very comfortable even when taking tutorials another channel like Eduonix, it was a surprise and a bit weird when first heard him, but he once said he worked with them for sometime. We luv you Brad🙌🏿
@canerdemircigm
@canerdemircigm 5 лет назад
Best tutorials are here. Thanks a lot.
@MrDarkogaucho
@MrDarkogaucho 4 года назад
Thank you very much for these videos. You're the real MVP and i love your videos
@ovieolori2398
@ovieolori2398 5 лет назад
Brad, you are all around the best.
@sandeepsinhamahapatra6975
@sandeepsinhamahapatra6975 5 лет назад
Amazing !! I learn so much from your videos
@Adenkhan007
@Adenkhan007 5 лет назад
You are a great teacher to me because i learned so much on you're channel. So THANK YOU very much for making web tutorials sir. You are awesome☺ Respect from PAKISTAN.
@BekBrace
@BekBrace 4 года назад
Thanks Brad, awesome Tuto
@Osuna2024
@Osuna2024 5 лет назад
You're awesome, man! Thanks a lot! Greetings from Mexico...
@karweniwambui926
@karweniwambui926 5 лет назад
Thanks Brad, awesome content.
@emmettpennington7724
@emmettpennington7724 2 года назад
Really enjoy your style of teaching and real world examples of how to use the skills, like in your Netflix and Hulu landing pages vids. Just signed up for you Udemy HTML, CSS and JavaScript courses. Looking forward to it! The willingness to learn is what separates the legends from the above average.
@osmangoni2376
@osmangoni2376 5 лет назад
great teacher, best of luck.
@Arrezzz
@Arrezzz 5 лет назад
i learned so much, thank you.
@klilichyassine6383
@klilichyassine6383 5 лет назад
you are so great bro, thanks for making videos like these
@coderlady_
@coderlady_ 5 лет назад
I hit the like button before watching the video !
@SolidousMdz
@SolidousMdz 5 лет назад
I might try this one with a video running in the background, thanks!
@LazarNevski
@LazarNevski 5 лет назад
Great tutorial. I had to add this class to the img (logo) element for my logo to be truly responsive and centered at a size greater than your original 180x180. .centered-axis-x { position: absolute; left: 50%; transform: translate(-50%, 0); }
@DarkGT
@DarkGT 5 лет назад
Great tutorial as always!
@JonibekJ
@JonibekJ 4 года назад
Exellent design, website 👍👍👍
@TonySmacks
@TonySmacks 5 лет назад
I’ve learned so much from your videos!1
@ShlokWalia
@ShlokWalia 5 лет назад
Your videos are the best!
@alokranjan476
@alokranjan476 4 года назад
Very nice and informative video. Thanks for explaining in this nice way.
@BigBang967
@BigBang967 5 лет назад
Hello Brad I.m one of you many patreaon. I.m a huge fan. Hi from france
@Ov3rshot
@Ov3rshot 5 лет назад
Your tutorials are great and all, but for a beginner like me, I have to look up a lot of what you're adding to this, since you don't really explain it. And I've seen and learned many of your previous CSS tutorials before this. Not that I'm complaining though, it's free tutorials after all, but just a little bit of feedback. Thanks for the tutorials!
@srinika_cute_doll
@srinika_cute_doll 5 лет назад
Thank you brad, I like your content ..
@josecoverlessons
@josecoverlessons 5 лет назад
Thankyou TONS you are so awesome!
@natking1u1z99
@natking1u1z99 4 года назад
Edit: Syntax Error I'm adding little twists as I go along and man I' m loving the outcome. Thank you so much!
@Skaxarrat
@Skaxarrat 5 лет назад
I hate the design bit of websites programming, yet I'm subscribed to this account and do the tutorials. That says something about him.
@TraversyMedia
@TraversyMedia 5 лет назад
Thanks. I find many programmers hate design. My hope is these videos help you and people like you get a little more into it and become better at it.
@nayerIT
@nayerIT 5 лет назад
thanks its very useful tuto
@leninramos1980
@leninramos1980 5 лет назад
Tranks I appreciate it.
@AbhishekKumar-mq1tt
@AbhishekKumar-mq1tt 5 лет назад
Thank u for this awesome video informative video
@atimagalleries
@atimagalleries 5 лет назад
Brad you're the best!!!
@_d47_
@_d47_ 4 года назад
you are great Your videos are awesome
@abhishektripathi2028
@abhishektripathi2028 5 лет назад
Thank you sir..for this video. Please sir create more web projects without any framework. So it can give more idea of custom styling
@matty_kunc
@matty_kunc 5 лет назад
Nice video, thanks for it :)
@tristansacotte6937
@tristansacotte6937 5 лет назад
I was literally working on a project and trying to figure this out today it's like Brad reads people's minds
@annajames1065
@annajames1065 5 лет назад
Tristan Sacotte I was just thinking the same thing!! I'm actually working on a landing page today!
@lordraven009
@lordraven009 5 лет назад
Hi, Brad. I really enjoy your courses, on YT and Udemy alike. Recently I've got my first job as a developer and I've always been interested in matters of clean code and code/project maintenance. What's your assessment in those topics? I think it's a great topic for a video. Thanks and keep up the good work!
@creativebak
@creativebak 5 лет назад
you are the real hero
@DaniBorgen
@DaniBorgen 5 лет назад
Code made fun by Brad!
@VaiGo
@VaiGo 5 лет назад
awesome content. All the best mate
@Neworldexport
@Neworldexport 5 лет назад
Love Pexels, thanks
@marcoonlinetv7769
@marcoonlinetv7769 5 лет назад
Nice !!! One idea, CSS 3D project !!!
@yevheniiasemenina3109
@yevheniiasemenina3109 5 лет назад
That's amazing and super helpful! Wish I could just have all Your knowledge inside my head ;) Wanted to ask if maybe i can find a video on how you do markup in html? Sometimes I struggle to understand why some things are put into more divs... like section services, then div container and then another div.. sometimes it goes so many divs deep in one section that it's hard to see why. So video on why do you need so many different levels and how it's better to separate things would help a lot!
@bengbeng2005
@bengbeng2005 3 года назад
hi, did you figure out why he applies so many depth levels? if so please tell me
@muhammadpro
@muhammadpro 5 лет назад
It's just awesome! 👌
@dayanromo
@dayanromo 5 лет назад
Thank you Brad
@peteromoniyi3535
@peteromoniyi3535 5 лет назад
Thanks, my Teacher.
@MrFleaxcool
@MrFleaxcool 5 лет назад
Respect from Ukraine. You are awesome)
@FaysalShahi
@FaysalShahi 5 лет назад
More front-end stuff, please
@sriramanraji7515
@sriramanraji7515 5 лет назад
You are the best ever teacher i had in my life. I have a request. can you do a video on creating files using node js like word, excel with the UI data from end-user.
@prabhakarjha1168
@prabhakarjha1168 5 лет назад
I am a backend engineer but still, Loved it!
@TraversyMedia
@TraversyMedia 5 лет назад
Awesome. Yeah I love both. I have just as much fun with backend/api/database as building frontend UI/UX
@akhilthakur251
@akhilthakur251 5 лет назад
Hey man, Again nice video for improving my knowledge. Thank you so much man for creating valuable content. One more request is Can you create video on Grid.
@rubenverster250
@rubenverster250 5 лет назад
check grid-garden out. Also flexbox-froggy
Далее
CSS3 Animation & Transitions Crash Course
36:20
Просмотров 430 тыс.
Responsive Landing Page Using HTML & CSS (A Little jQuery)
1:04:07
СПРАВКА ДЛЯ УНИВЕРА
00:44
Просмотров 372 тыс.
1❤️
00:17
Просмотров 9 млн
How to Create The Perfect Landing Page Hero in 60 Sec.
0:57
The Importance of Specialization in Coding
7:13
Просмотров 188 тыс.
Layout and Reading Order | Rachel Andrew | CSS Day 2024
50:47
Pluralsight Login Page Clone - HTML & CSS
42:35
Просмотров 222 тыс.
CSS Grid Layout Crash Course
27:55
Просмотров 2 млн
Pure CSS Hamburger Menu & Overlay
35:47
Просмотров 397 тыс.
20 Essential VS Code Extensions In 2024
14:26
Просмотров 141 тыс.
Full Screen Video Background - HTML & CSS
17:52
Просмотров 108 тыс.
Магниты и S Pen 🖊️
0:37
Просмотров 76 тыс.