In this job we will construct a tailor made web site employing HTML5 and modern CSS techniques these as CSS Grid, Flexbox, psuedo selectors, animation and a lot more. We will also deploy to Netlify and add form operation
Code:
💖 Help The Channel!
Web site & Brad Traversy Udemy System Back links:
Comply with Traversy Media:
Timestamps:
:00 – Intro
2:32 – Base & Navbar HTML
6:05 – Base CSS
9:08 – Navbar, Container, Flex
16:12 – Showcase Space & Grid
27:28 – Card & Form CSS
33:07 – Button Styles
35:45 – Skewed Space
39:42 – Stats Portion
44:16 – Utility Courses – Margin & Padding
52:33 – CLI Section & Grid Col & Row Span
57:25 – Cloud Portion
1:00:50 – History & Button Utility Classes
1:04:00 – Text Sizes
1:05:28 – Languages Segment
1:09:49 – Footer
1:14:08 – Media Queries & Responsiveness
1:21:34 – Options Site
1:29:57 – Functions Grid With Spans
1:32:15 – Docs Website page
1:42:44 – Inform, Code Block & Textual content Color Types
1:49:02 – Make Internal Web pages Responsive
1:52:02 – Animations
1:56:42 – Get ready & Deploy To Netlify
Hey guys, hope you enjoy the project! Change the showcase-form width to 300px in the mobile media query(500px) to get it to look right on really small screens.
I must say the project is great and you took every step gradually, in a way one can understand. thanks for the course, it's amazing.
I also want to thank you for posting this amazing video for free. Many developers don't like posting the important once; they only post once that aren't helpful and reserve the real projects for sale, which is not the best way.
Thank you!
Hey Brad , You just killed it. I learned a lot from this project. All the best for your next videos.
Anyone had problem centering .stats-heading ? In my case margin : auto isn't working even after width is specified.
Thank you for an amazing tutorial!
Why we put overflow: visible on .showcase .grid ???
52:44
27:28 – Card & Form CSS
I am very lucky to have found a teacher like you. Today, four days later, I completed my first web project. Thanks
1:12:11
Thank you Brad! This is not for beginners, you have to know some CSS before doing this
Can anyone explain why sir have used both the selectors in showcase section we can do it by once also na or we can also make a separate div nd give it margin-top negative to it will also work in same way i guess
Travis you said 16:06 about create mobile first because you think the website might be on mobile devices. So it the procedure for creating mobile first same as Desktop? If so do have video that is similar to what you are presenting on this video?
Outstanding! Also learnt that 'div*n' makes as many <div>'s as you would like so: 'div*3' hit return and 3 divs appear.
feels refreshed after following through this tutorial! you're the greatest! thank you for all the tutorials you have offered! i kinda used scss to make all the css in this video, and yea, still applies quite well!
17:10 20:55
15:16
Bro, omg Im beginer, can you explain that little bit slowly? U heared like you are bored from make this tutorial, omg .
Thanks for this tutorial, IM happy,but like I say , ahh:-x
OK OK, in 35min i stop fallow you, so crazy,omg man you are so fast ohh. Absolutly terible watch that.
Super Fantastic video. You have combined so many aspects of web development. For beginners who think you are going to fast they should become acquainted with the J K L keys on the keyboard. (Go back, Pause, and Go forward) 🙂
Thank you for making such great videos like this for free. I'm completely new to web development, I was supposed to be working on a data science internship this summer and got put on web development last minute and your videos are so amazing and straight forward!
Wish you had a 15 second back and forward button. Sometimes you go so fast. I need to see it again.
My navbar a:hover does not underline whole word. I noticed the 2px is how thick the line is. So a 10px line is just a thicker line. I need to lengthen line so it is under the word. Each underline shows up left of the word (home, features, docs). How do I get the underline to be long enough and centered under word?
may i know how to select and change multiple words together ??