i just created my pluralsight account last week and I am very impressed by its login page ... now I have to code along to learn how to do it .... thank you Brad!!!!
My favorite type of videos! Building websites is so much easier when you explain it step by step. Amazing job Brad, thank you so much for this quality content!
@@Go_195 CSS is hard. I absolutely despise it. But this tutorial makes a good job explaining well. Pro Tip: Open Files in VSCODE or copy from code pen, split screen into 2 and add comments next to each line of code explaining how and whyhe did each step. You will understand them better and will have a reference to return to if your stuck
I got up early this morning and coding along and completed ... very good exercise ... I always found practice landing page to refresh knowledge of html, css and JS is a very warm exercise ... when you getting old (like me), it is hard to remember all things... the best recipe is to practice and practice ... Thanks to Brad again!!!
Thank you for using tags in your code. It's a good practice to teach, and something a lot of other tutorials are not doing. It is incredibly annoying, and hard to following a giant wall of css. I hope everyone watching this to learn takes this practice out of it at bare minimum. Other people will have to use your code!!!
Hey Brad, good job. I'm Josh 4rm Nigeria. Studying economics but just learning coding 2. It not been easy but u've been of a help 2 me. God bless. Great Job.
Great job, Brad! I'm a huge fan of your teaching style. In the past I've purchased 2 of your Udemy courses and I can say that it was the best $22 I've spent.
This was a great tutorial! What I did was replicate the login page by my own and then watched the video to compare my way of doing it to the way Traversy does it. I did use flexbox but I didn't used the #left and #right approach, which I think is great!! I'll start using that method more often. Thank you so much!!
The way you are teaching is so gorgeous, that I actually started to like web development a few months ago. I saw a lots of video from you, practised a lot, now I'm trying to start working as a front-end developer. I really appriciate your work, thank you so much! :) Greetings from Hungary!
Thank you so much, this video was so great as other videos you made. And by the way, I have a folder on my desktop named Traversy Media, when I start a new project firstly I search through that folder and find anything interesting I need like Elegant Landing Page With Blur ...etc. And simply implement them on my new project with minor modifications. I really feel that I’m improving flowing your TH-cam channel. Please keep going and make more videos like this.
I'm in love with your videos! I'm just begin of my HTML adventure, but your videos are very helpful! In addition you speak in English so beautiful, means very clearly. It's so helpful 'cause I don't speak english very well.
I couldn't use it with the CSS import, I'm not really sure why, so I just used the HTML CDN. Even though I'm pretty sure I followed every step you did, I'm just confused right now
hii! brad, i'm one of your student on udemy. All of your course and videos are really helpful for beginners.Please create some tutorials on API which use for mobile app and website both ,how any one create third party libraries like socket io etc.Because each of the time when we develop some project ,we use a lots of third party packages .So this is really very help full to create anyone's one package. Thank you.
(thanks for de video) One question (from a beginner). In 31:30 when editting the styles of `#signin link a`. I forgot to add the `a` and the class still got selected so most of the styles applied, ofc. But for some reason the color and the text decoration are overwritten by the chrome's default "user agent stylesheet" until I add the `a` in the selection. To make it more interesting, I noticed that if I remove the href attritube `href="#"` it works even without the `a`. Why does ti have to be so complicated hahaha? Can a kind heart explain to me this behaviour? ty in advance
Hey, cool video, could somebody explain me pls why everybody switched from em to rem I know what the difference between these two, but I don't understand why this many people started using it this year yet. thx
Hey brad! Thanks for the tutorials. I am big fan of your. I like the way you teach, simple yet fruitful. One request, you could make a video on a search engine clone in HTML & CSS. Thanks. Hoping to seen a video soon
At around 14:40 to 15 you talk about align-items and justify-content. I thought align-items was for positioning vertically, but when you add align-items:center; it moves the left div to the right. how can align-items center move an item to the right instead of down to the center of the page. You also say justify-content to move it vertically, but justify-content is for horizontal positioning. I hope you can provide some information and help me understand this. Thank you
Because he changed the flex-direction to column! & Doing it, Align Items goes for the horizontal alignment and justify-content for the vertical 🙂 Just play around and you'll know!
Love you Brad and thank you for another great tutorial. Brad, I have a problem with image section. My image doesn't fit the viewport. I used height with 100vh but I have a little empty space around the top and right side. Please help me. thanks.
@@anonymouseverx oh, nevermind I actually found the solution we just had to put margin:0; in a body CSS rule. You can check my code at codepen.io/zaidik/full/VwvVvvE
Hey Brad thank you for a lovely tutorial, I love watching your stuff! I have a question, around 12:55 you set the flex-direction to row, and then mention that it's the default, is there a reason to specify it if that's the case? I'm just wondering if something might over-write it down the road or if it's a best-practice thing :)
Hey Brad I really love your videos, I think is really cool what you do and you're always asking for suggestion on videos, can you take a shot at three.js, it'll be really cool to see it. Thanks!
Can you make a video on how to make a complete website for shops and small business owners, i have learnt a lot from your videos and can create basic stuff with html & css
You would just need to target the #wrapper and change "flex-direciton: row" to "flex-direction: column" You can do this inside the media query instead of adding the "#right: display:none"
Awesome as always. Quick question. When I resize my chrome it does not display any changes based on responsiveness until I release the mouse, I can't seem to find out why. Any suggestions?
Hi, Brad. Awesome tutoring again. I have a question. What's your opinion on WebFlow? Coding from scratch will help us to understand the DOM fundamentals, but being able to produce development ready code with WebFlow will help reduce time tremendously. Please give your opinion. Thank You Brad..😊😊👍 Also can you do a series on WebFlow. Thanks
Brad, as it is an HTML CSS project, I'd like to ask you a question. Working with static website how can we avoid user to reload to see updates on HTML ? I mean how does we prevent browser caching ? Thanks
Mauro Bono Hey, I'm not Brad but maybe I could help you. If you meant .css or .js caching try this: You can manually change the v(version) each time you edit your js or css or set it with Javascript to current time. Edit: not sure if you meant it for you while editing or for a client :D If just for you then you can install live server in vscode or via npm or just disable cache in developer options.
@@maurobono5324 sth about meta tags or even better http header. Check this out: stackoverflow.com/questions/49547/how-to-control-web-page-caching-across-all-browsers
i just created my pluralsight account last week and I am very impressed by its login page ... now I have to code along to learn how to do it .... thank you Brad!!!!
What's a pruralsight account good for ?
@@leon1985ist Online education
My favorite type of videos! Building websites is so much easier when you explain it step by step. Amazing job Brad, thank you so much for this quality content!
But when you make it becomes too tough
@@Go_195 and it is hard to make it now...
ухх рад что тебе понравилось Женечка
@@Go_195 CSS is hard. I absolutely despise it. But this tutorial makes a good job explaining well.
Pro Tip: Open Files in VSCODE or copy from code pen, split screen into 2 and add comments next to each line of code
explaining how and whyhe did each step. You will understand them better and will have a reference to return to if your stuck
I got up early this morning and coding along and completed ... very good exercise ... I always found practice landing page to refresh knowledge of html, css and JS is a very warm exercise ... when you getting old (like me), it is hard to remember all things... the best recipe is to practice and practice ... Thanks to Brad again!!!
Web Development use to seem so difficult to me but now i am gradually gaining confidence and getting better at this. Thank you so much Brad.
Thank you for using tags in your code. It's a good practice to teach, and something a lot of other tutorials are not doing. It is incredibly annoying, and hard to following a giant wall of css. I hope everyone watching this to learn takes this practice out of it at bare minimum. Other people will have to use your code!!!
Hey Brad, good job. I'm Josh 4rm Nigeria. Studying economics but just learning coding 2. It not been easy but u've been of a help 2 me. God bless. Great Job.
Great job, Brad! I'm a huge fan of your teaching style. In the past I've purchased 2 of your Udemy courses and I can say that it was the best $22 I've spent.
I don’t know what I would do without this channel
now whart are you doing after 3 year.
I will watch the video tonight. I just wanted to say I appreciate what you do Brad. Lots of hugs to your son from all of us.
This was a great tutorial! What I did was replicate the login page by my own and then watched the video to compare my way of doing it to the way Traversy does it. I did use flexbox but I didn't used the #left and #right approach, which I think is great!! I'll start using that method more often.
Thank you so much!!
The way you are teaching is so gorgeous, that I actually started to like web development a few months ago. I saw a lots of video from you, practised a lot, now I'm trying to start working as a front-end developer. I really appriciate your work, thank you so much! :) Greetings from Hungary!
*Brad is so organized and clean*
Perfect place where all technologies will be available
Really liking the vids on creating the different components of a site, instead of just doing a whole site. Keep it up!
Another fantastic coding tutorial Brad. Thanks for all your hard work creating and sharing! I have learnt a lot, once again.
What do you think about your level, now ?
Are you better from date is you write thins comment?
in 5:54 why didn't put button tag inside div tag, or make div tag for button tag . I hope my question is Clear.
Thank you for this Brad. Your FlexBox in 20mins is a gem.
very good explanations of used concepts. Easy to understand throughout.
Good morning, I just found you site last night. I love the way you teach. I have subscribed and again looking forward to learning from you.
Nice tutorial. Cloning seems like an excellent way to learn and rienforce web skills. Much appreciated.
Just found these, really helpful. Finished courses on css and html so thats perfect for practicing !
Thank you so much, this video was so great as other videos you made. And by the way, I have a folder on my desktop named Traversy Media, when I start a new project firstly I search through that folder and find anything interesting I need like Elegant Landing Page With Blur ...etc. And simply implement them on my new project with minor modifications. I really feel that I’m improving flowing your TH-cam channel. Please keep going and make more videos like this.
Brad not only teaching us deb wevelopment but spoonerism as well , nice
I will follow brad until I become a professional developer. I will never leave and forget my mentor 💪💪💪🔥🔥🔥
Brad, your tutorials are intelligent. I like your well composed voice. Just want to let you know that I am making great headway. Thanks a lot.
I can learn more by watching your videos rather than joining a course
I'm in love with your videos! I'm just begin of my HTML adventure, but your videos are very helpful! In addition you speak in English so beautiful, means very clearly. It's so helpful 'cause I don't speak english very well.
Whohooo! Excited about this one! My Christmas gift is here already :)
Sir I love your tuts so much. They are beautifully explained. Love from India!
Great video! I really enjoyed the pace. Really easy to follow along keeping everything to the point.
Just straight to the point. This has made me understand a lot
13:00 display:flex; flex-direction:row;
Thanks for reviving my webd journey
Awesome yet again Brad, thanks so much for the tutorial, this is a great example 👍
I couldn't use it with the CSS import, I'm not really sure why, so I just used the HTML CDN.
Even though I'm pretty sure I followed every step you did, I'm just confused right now
Brad... You are awesome in terms of ideas in web development. Really helpful video 👍☺️👍
hii! brad, i'm one of your student on udemy. All of your course and videos are really helpful for beginners.Please create some tutorials on API which use for mobile app and website both ,how any one create third party libraries like socket io etc.Because each of the time when we develop some project ,we use a lots of third party packages .So this is really very help full to create anyone's one package. Thank you.
Amazing work Brad!
I like your videos, I got a lot from this video, thanks Brad
(thanks for de video) One question (from a beginner). In 31:30 when editting the styles of `#signin link a`. I forgot to add the `a` and the class still got selected so most of the styles applied, ofc. But for some reason the color and the text decoration are overwritten by the chrome's default "user agent stylesheet" until I add the `a` in the selection. To make it more interesting, I noticed that if I remove the href attritube `href="#"` it works even without the `a`. Why does ti have to be so complicated hahaha? Can a kind heart explain to me this behaviour? ty in advance
this actually helped. I used Forgot Password and Sign in with company or school
and now the text is showing 👍👍
Best online teacher
thank you so much sir..it was really helpful video and easier to understand since you explained every step...
공격하면 제어할 수 있다는 환상은 장애에 가깝다 물론 이 동영상과는 상관이 없는 이야기 이고 동영상 제작자에게 감사합니다
Nice Tutorial , Learning new thing every Video. Thanks Traversy
Amazing tutorial. You are a great teacher.
Hey, cool video, could somebody explain me pls why everybody switched from em to rem I know what the difference between these two, but I don't understand why this many people started using it this year yet. thx
Hi! Thanks for this awesome video, I have a question, why do you use id instead of class for naming the wrappers and divs?
why there is no container for fix the width
plz make a backend demo video of this project
Very nicely explained and well documented.
Thanks a lot.
Great video. Thanks for the excellent tutorials. But, in the "#left" selector of style.css, "height: 100vh" was problematic for me.
how to fix that problem? i got the same problem too
Late to the party but amazing tutorial :)
Great vids, your tuts are great
Gerron Agyemang thanks
Traversy Media Must say, I'm a beginner web developer and you've really helped me with your designs.. thanks a lot🙏🙏🙏🙏
cool the project was awesome , happy coding with you
Great tutorial, that's how you teach code.
Hey brad! Thanks for the tutorials. I am big fan of your. I like the way you teach, simple yet fruitful. One request, you could make a video on a search engine clone in HTML & CSS. Thanks. Hoping to seen a video soon
At around 14:40 to 15 you talk about align-items and justify-content. I thought align-items was for positioning vertically, but when you add align-items:center; it moves the left div to the right. how can align-items center move an item to the right instead of down to the center of the page. You also say justify-content to move it vertically, but justify-content is for horizontal positioning. I hope you can provide some information and help me understand this. Thank you
Because he changed the flex-direction to column!
& Doing it, Align Items goes for the horizontal alignment and justify-content for the vertical 🙂
Just play around and you'll know!
*Brad can you make a tutorial for flutter in 60 min ??*
Love you Brad and thank you for another great tutorial. Brad, I have a problem with image section. My image doesn't fit the viewport. I used height with 100vh but I have a little empty space around the top and right side. Please help me. thanks.
Hi, did you solve the problem?
@@ZaidIrfanKhan Hi. I rejected this one.
@@anonymouseverx oh, nevermind I actually found the solution we just had to put margin:0; in a body CSS rule. You can check my code at codepen.io/zaidik/full/VwvVvvE
But how overflow for body will work if you didn't give a specific height to a body? And as I know there is no a default specified body height
fantastically explained ...... 👍👍👍
love the tutorial and the glasses...thanks alot man.
Brad I love u keep this super great videos.
Hello Brad THANKS FOR Empowering us
So much cool i really understand alot of things with you good luck and thank you so much for everything
One idea maybe? We send you our code of sites like this for example, and you review it for the video and make some critiques? :)
Agreed. The downside of self-study is the lack of critiques from an actual professional.
You are just a great teacher.
Awesome! Any suggestions on how to make it compatible with Bootstrap 4.1?
thank you very much, you are a great teacher 😎
Since you use vh in height definitions, wouldn't `justify-content: center;` be better in mobile ? I think changing to `start` was not necessary.
Sir Where you get websites images for clone?
great tutorial brad
Can you share your sublime text plug-in especially the one that gives you a description on every attribute and property you write
Hey Brad thank you for a lovely tutorial, I love watching your stuff! I have a question, around 12:55 you set the flex-direction to row, and then mention that it's the default, is there a reason to specify it if that's the case? I'm just wondering if something might over-write it down the road or if it's a best-practice thing :)
Not really, I guess it's just a semantic or organizational thing for me. It would have the same effect without it.
does he have a video explaining how he personalised his search engine that much?
Hey Brad I really love your videos, I think is really cool what you do and you're always asking for suggestion on videos, can you take a shot at three.js, it'll be really cool to see it.
Thanks!
wow nice ❤❤❤❤
i liked Videos
carry sir ............
Its good but why you just use div tag ?
Hello brad can you upload any freelancing based specially topics
Thanks Brad for feeding our brains with your great tutorials
Can you make a video on how to make a complete website for shops and small business owners, i have learnt a lot from your videos and can create basic stuff with html & css
Brad, how could we make instead od "#right: display:none" add it "#right" side below "#left" side ?
You would just need to target the #wrapper and change "flex-direciton: row" to "flex-direction: column"
You can do this inside the media query instead of adding the "#right: display:none"
Why do you use too much div?. Specially to the right div. Can you explain?
Awesome. Thanks for making this video
Thank for sharing another great tutorial. I have one question: is there a big reason why you changed from Atom to VSCode?
One of the reasons is performance. I think he explained it in th-cam.com/video/AJnhqf5IRC4/w-d-xo.html
@@aciesara5444 Thank you for your answer
just straight up did not work for me after the login section, paused and rewrote code multiple time letter for letter, did nothing to live site
Awesome as always.
Quick question. When I resize my chrome it does not display any changes based on responsiveness until I release the mouse, I can't seem to find out why. Any suggestions?
Yes, great video, sir. so, how also does login bitcoin address page create?
How to get that images from codepen?
Its redirecting to deployment page
Thank u. I love these projects.
how do i get the images?
i've done this before but the images are gone
Really good video. Thank you.
@Traversy media...can you make Netflix UI with HTML and CSS
Hi, Brad. Awesome tutoring again. I have a question. What's your opinion on WebFlow? Coding from scratch will help us to understand the DOM fundamentals, but being able to produce development ready code with WebFlow will help reduce time tremendously. Please give your opinion. Thank You Brad..😊😊👍
Also can you do a series on WebFlow. Thanks
Brad, as it is an HTML CSS project, I'd like to ask you a question. Working with static website how can we avoid user to reload to see updates on HTML ? I mean how does we prevent browser caching ? Thanks
Mauro Bono Hey, I'm not Brad but maybe I could help you. If you meant .css or .js caching try this:
You can manually change the v(version) each time you edit your js or css or set it with Javascript to current time.
Edit: not sure if you meant it for you while editing or for a client :D If just for you then you can install live server in vscode or via npm or just disable cache in developer options.
@@AsToNlele ok thanks, but my real problem is not with css an js, I already use the version trick ;) , but with HTML update
@@maurobono5324 sth about meta tags or even better http header.
Check this out: stackoverflow.com/questions/49547/how-to-control-web-page-caching-across-all-browsers
How to download the images that has been used in this video?
absulotly amazing
what is your editor ?
that's visual studio code
it's free
@@samdavepollard thx broo
how do i get those img that you were using?
did you find out how to the imgs ?
Awesome Brad! Thank you!!!
This video is really cool!!! Thanks a lot!!!