I get up 6:00 am this morning again and completed this nice tutorial. Thanks Brad ... Also, my 8-yr old son also get up 6:25 and helped me typed few line of code ... what a great team work for dad and son ...
Thanks Brad. This is pretty cool social media transition widget. One thing that just "bugged" me was the extra accordion box that stuck out pass the tabs. So I set the .accordion background : transparent and it hides it and everything still works. Just wanted to pass that on if anyone needed it.
As always you knocked it out of the park again... You have easily become my most watched single channel. This will go into my tool box for sure. the :before and :after selectors have been hard for me to grasp thanks for the awesome explanation. I think i got it now. Heading for your Patreon page as soon as i get back to work next week.
Hey Brad. Just wanted to say thanks for all you do. I've been watching you for years, but today I picked up 3 of your Udemy courses. First time I've ever tried anything on Udemy, but knowing how professional and helpful you are here on youtube, I expect everything will be awesome. =)
Great video! I thought something like this would only be made possible with something like JavaScript. I had never heard of genericons before. Another helpful website bookmarked. Edit: I posted the link in a Facebook group for those learning HTML and CSS. Hopefully it will bring you some more views, likes, and subscribers.
Just want to say thank you for taking the time to explain the :before :after a bit more. I wanted to change the heading color when you hover over the ul in your previous pricing tables guide but I figured I would have to learn JS. I think I'm going to try this out with the before after effects now. A couple of things that I had to do to make this look better for me. I felt like the h1 should also be a link. As my first instinct was to click that instead of the icon on the side. All of the content in the paragraphs didn't fit. I used the following method but you could decrease font-size or increase the height from 200px to say 250px. .tab .content{ padding: 20px 0 0 20px; } Always preferred center aligned text. I also added it to the paragraph as well. .tab .content h1 { text-align: center; }
Could you pls make a tutorial for PixiJS, Phaser or CreateJS? It would be amazing! PS: I subscribed! You taught me more in 3 days than Codecademy taught me in about a week. In fact, after learning with Codecademy, I gave up web development and moved on to app development because I thought web development is way too tough for me. But I thought about getting back into web development and discovered your tutorials. Your tutorials are very clear and easily understandable. Thank you!
hey brad.. I really feel comfortable to watch your tutorials and I have learnt a lot.. if you make videos on asp.net mvc technology including ms sql server it will be a great favor..
can you highlight certain element while hovering over other element without javascript, only pure css? for example to highlight content while hovering over link in social
Brad, thanks! Can you please upload the files index.html and style.css? I copied all the code in Sublime but when I open the webpage it looks incomplete (no decoration), I think I am doing something wrong.
I downloaded the font to a folder but it won't show up , everything else is good but it doesn't give me any errors or nothing she fonts just won't show up I try moving the folder in to my CSS Forder and put /CSS/fonts/genericons-blabla/ but nothing what you guys think am doing wrong pls help
great video and lessons! I completed the project, but my page isn't very responsive and the github tab jumps. also when I shorten the screen all tabs aren't visible, and aren't centered. will figure out that issue tho. Thanks
I literally have the same code but mine does NOT look like this 😭 I even referred with the code in your description box but I can't seem to find where I'm going wrong
Thanks for the good tutorial. I have a question though, isn't it bad/risky to give exact values like .tab height or width values. I mean if this was a real life proffessional project is it okey to build this component like this?
Good tutorial! I think can it's very helpful if you convert this code with modern technique same flexbox and gridbox for create a component with dinamical size. When all tabs are closed is very nice if button logo are in center of the screen and gray space is hidden or the same color of background. Great social box! Thank you
what's the package to allow you to find and replace the selected text, so that I don't have to manually delete and edit the text each line individually?
Should really be using double colons mate for pusedo elements ::before and ::after. The single colon works but its deprecated. It was changed to distinguish it from :hover etc.
Make sure there isn't a src from in front of the second url, Second, I had to add ../ in front of the font folder to get the proper path. So it looked like this. @font-face { font-family: 'Genericons'; src: url("../fonts/genericons-regular-webfont.woff") format("woff"), url("../fonts/genericons-regular-webfont.eot") format("truetype"); } I was going nuts trying to figure this out.
u thanks, man. Worked just fine. My problem was the path, I was writing "/fonts/genericons-regular-webfont.woff" but needed "../fonts/genericons-regular-webfont.woff".
Thanks a lot for such good work!Respect! I don't know what a hack,but my .container in style.css i was needed to wrote twice,if i write it once styles could't performs and my .container spreads to the right and left edges of display.Why does it happening? .container { margin: 50px auto; width: 90%; } .container { margin: 50px auto; width: 90%; }
thanks to u a lot ... it was very helpful. Please can u do some thing on how to pop-up errors right after an input form with PHP and Javascript. It will be very very helpful
Brad, how does one learn these things? I mean, we can learn it from you, but if we wanted to do something like this and we would not find tutorials, what would be your advice?
Find things you think are cool and look at the source. Kind of like reverse engineering and picking up how someone made something with elements you may already know.
Great video - funny listening to you struggle with 'genericons' - isn't it supposed to be 'generic-icons' so just say 'generic-ons'? One other thought - do you think all these libraries and frameworks will one day be made redundant - if everything can be done in CSS and minimal vanilla JS (or even one day a 'proper' version of JS) we'll no longer have to spend so much time choosing and learning frameworks...instead of learning what we should - just CSS, HTML and JS. ie no more JavaScript Fatigue - which I didn't realise was an actual thing - until I was suffering it!
I think you use '-webkit-transition: 0.5s;' but you also need to include the standard 'transition: 0.5s;' for cross browser compatibility. transition: 0.5s; -webkit-transition: 0.5s;
I get up 6:00 am this morning again and completed this nice tutorial. Thanks Brad ... Also, my 8-yr old son also get up 6:25 and helped me typed few line of code ... what a great team work for dad and son ...
Great bro. You are my real teacher. I learned much from this channel. Really communicative you are. Keep up this work. Thank you..
Manan Qayas thanks man, I appreciate that 👍🏻
This is too much...You are the Digital Jesus we can praise....THANK YOU Mr.BRAD
Thanks Brad. This is pretty cool social media transition widget. One thing that just "bugged" me was the extra accordion box that stuck out pass the tabs. So I set the .accordion background : transparent and it hides it and everything still works. Just wanted to pass that on if anyone needed it.
As always you knocked it out of the park again... You have easily become my most watched single channel. This will go into my tool box for sure. the :before and :after selectors have been hard for me to grasp thanks for the awesome explanation. I think i got it now. Heading for your Patreon page as soon as i get back to work next week.
Css3 transitions good tutorials are really rare , thank you Brad!
You are the best. This is really cool. Another nice thing about smaller media is the fact that phones do not hover, so your solution is perfect.
Hey Brad. Just wanted to say thanks for all you do. I've been watching you for years, but today I picked up 3 of your Udemy courses. First time I've ever tried anything on Udemy, but knowing how professional and helpful you are here on youtube, I expect everything will be awesome. =)
One of the best Channel on UA-cam is Traversy Media . thanks a lot Sir .
Another great tutorial, Brad. Thank you for your work and free education for all!
Great tutorial. I extended it a bit and made the accordion vertical for responsiveness. Very fun.
This looks awesome Brad. Looking forward to watching later this evening.
Great video! I thought something like this would only be made possible with something like JavaScript. I had never heard of genericons before. Another helpful website bookmarked. Edit: I posted the link in a Facebook group for those learning HTML and CSS. Hopefully it will bring you some more views, likes, and subscribers.
Sweet, you put this up just when I needed it. It's a great twist on the original.
Great stuff again Brad. Just signed into your patron site, will be donating soon. Thank you
I like these little projects. Cool stuff to integrate into new or existing websites.
Only up a few hours and 7k views already, Brad you are on fire!
Thank you, Brad! I've been watching all your videos. Keep up the good work!
Dope video!
Really appreciate sharing the link to the original or the inspiration wish more people would do that. Fire once again!!!!
Man your way of teaching is really awesome, Thanks for the help :)
Wow, this is the first time am seeing this. Awesome.
Just want to say thank you for taking the time to explain the :before :after a bit more.
I wanted to change the heading color when you hover over the ul in your previous pricing tables guide but I figured I would have to learn JS. I think I'm going to try this out with the before after effects now.
A couple of things that I had to do to make this look better for me.
I felt like the h1 should also be a link. As my first instinct was to click that instead of the icon on the side.
All of the content in the paragraphs didn't fit. I used the following method but you could decrease font-size or increase the height from 200px to say 250px.
.tab .content{
padding: 20px 0 0 20px;
}
Always preferred center aligned text. I also added it to the paragraph as well.
.tab .content h1 {
text-align: center;
}
Thank you for making these videos Brad, I really appreciate it.
how does the genericons work?
Great minimal design...a nifty component indeed!
Oops, I forgot it's... Like video then watch video. Another great vid Brad!
Wow awesome........I am from India and I really love you tutorials😘😘
Could you pls make a tutorial for PixiJS, Phaser or CreateJS? It would be amazing!
PS: I subscribed! You taught me more in 3 days than Codecademy taught me in about a week. In fact, after learning with Codecademy, I gave up web development and moved on to app development because I thought web development is way too tough for me. But I thought about getting back into web development and discovered your tutorials. Your tutorials are very clear and easily understandable. Thank you!
Css3 transitions good tutorials are really rare , thank you Social Media And One Thing i want to learn HTML5 And CSS3
hey brad.. I really feel comfortable to watch your tutorials and I have learnt a lot.. if you make videos on asp.net mvc technology including ms sql server it will be a great favor..
Loving this channel now
please explain docker and some of its commands
Hi Brad
I tried to use the accordion but why the icons not showing up in the chrome and IE but seen in live server. Please help
the font face doesnt work for me in codepen and the red color is only half of the gray square :(
Thanks for the great tutorial! Keep with your amazing work!
Will definitely use later. Thanks!
awesome, thank you for such good work, simple yet amazing.
can you highlight certain element while hovering over other element without javascript, only pure css? for example to highlight content while hovering over link in social
Awesome Brad great tutorial as all other of ur videos 😄👌
Can you do a video about how to load the website fast,
Explain async and defer?
can you please make a side bar version of this? so make it vertical and have it extend vertically?
So thankful for all your tutorials.
Is there another link for gernericons fonts?
The icons are not showing up, only the border.
Thank u for this awesome video, I am waiting for mongodb, express and stripe project
Brad, thanks! Can you please upload the files index.html and style.css? I copied all the code in Sublime but when I open the webpage it looks incomplete (no decoration), I think I am doing something wrong.
How to find genericons on Google? I would like to know how to find them without link description
great tutorial i never have seen before !
Can someone provide a source for genericon code values as used in the project in the video? I can't find them... might be outdated?
I downloaded the font to a folder but it won't show up , everything else is good but it doesn't give me any errors or nothing she fonts just won't show up I try moving the folder in to my CSS Forder and put /CSS/fonts/genericons-blabla/ but nothing what you guys think am doing wrong pls help
Great tutorial, love your stuff!! Could not help but wonder did the young lady respond?
Thanks. I have learn a lot of things.
great video and lessons! I completed the project, but my page isn't very responsive and the github tab jumps. also when I shorten the screen all tabs aren't visible, and aren't centered. will figure out that issue tho. Thanks
Before and after! Thanks
Thanks man. This is really good.
Another Great stuff..Awesome Videos as always
I see new video .... I hit the like button!!!
Thank you a lot for your Beautiful videos.
Awesome. Thanks for this excellent tutorial. 👍🏻
I literally have the same code but mine does NOT look like this 😭 I even referred with the code in your description box but I can't seem to find where I'm going wrong
That looks cool.
Thanks for the good tutorial. I have a question though, isn't it bad/risky to give exact values like .tab height or width values. I mean if this was a real life proffessional project is it okey to build this component like this?
wow I love it ❤❤❤ beautiful! It's something new and very use full video. Thanks for ❤❤❤
Amazing wonderful material.
Looks amazing
Good tutorial! I think can it's very helpful if you convert this code with modern technique same flexbox and gridbox for create a component with dinamical size. When all tabs are closed is very nice if button logo are in center of the screen and gray space is hidden or the same color of background.
Great social box! Thank you
Awesome! May you add a profile, I mean an avatar to the right side when we click on an icon? Thanks Traversy Media, it's so kind of you.
Awesome and always amazed
what's the package to allow you to find and replace the selected text, so that I don't have to manually delete and edit the text each line individually?
auto rename tag and html tag wrapper
Should really be using double colons mate for pusedo elements ::before and ::after. The single colon works but its deprecated. It was changed to distinguish it from :hover etc.
I can't get those Icons to work locally :( Help?!
Make sure there isn't a src from in front of the second url, Second, I had to add ../ in front of the font folder to get the proper path. So it looked like this.
@font-face {
font-family: 'Genericons';
src: url("../fonts/genericons-regular-webfont.woff") format("woff"),
url("../fonts/genericons-regular-webfont.eot") format("truetype");
}
I was going nuts trying to figure this out.
u thanks, man. Worked just fine. My problem was the path, I was writing "/fonts/genericons-regular-webfont.woff" but needed "../fonts/genericons-regular-webfont.woff".
thank you it worked! ../ thing in front of fonts is crucial no matter which folder fonts lie in.
Thanks a lot for such good work!Respect!
I don't know what a hack,but my .container in style.css i was needed to wrote twice,if i write it once styles could't performs and my
.container spreads to the right and left edges of display.Why does it happening?
.container {
margin: 50px auto;
width: 90%;
}
.container {
margin: 50px auto;
width: 90%;
}
Great video as usual.
I think its must be @media (max-width: 951px) not 950px on this setup cuz GitHub jumps. If you open on 950px.
BTW good video!
Like before watching....Thank you sir
making a portfolio website would be nice to do next. what do you think?
Hey, do you plan on doing Flutter tutorials?
thanks to u a lot ... it was very helpful. Please can u do some thing on how to pop-up errors right after an input form with PHP and Javascript. It will be very very helpful
It is awesome tutorial!!!! Thank you so much
Keep 'em coming!
Traversy the Best
Thank you Brad!
nice work!
Brad, how does one learn these things? I mean, we can learn it from you, but if we wanted to do something like this and we would not find tutorials, what would be your advice?
Find things you think are cool and look at the source. Kind of like reverse engineering and picking up how someone made something with elements you may already know.
very helpfull thanks, mr brad could you make full project tutorial (HTML,css,js)
Thumbs up and tutorial bookmarked
Great video 🔥
I will use it into my personal website :) hope is alright.
It's amazing wow
Great video - funny listening to you struggle with 'genericons' - isn't it supposed to be 'generic-icons' so just say 'generic-ons'?
One other thought - do you think all these libraries and frameworks will one day be made redundant - if everything can be done in CSS and minimal vanilla JS (or even one day a 'proper' version of JS) we'll no longer have to spend so much time choosing and learning frameworks...instead of learning what we should - just CSS, HTML and JS. ie no more JavaScript Fatigue - which I didn't realise was an actual thing - until I was suffering it!
Brad! Please do a tutorial on D3!!!!
Thank you!
codepen is the graveyard of failed pseudo-coders
it always needs a lot of work and RWD is like black magic to them
good video
okk good to know.
Maybe it's just me, but isn't it easier and more convenient to use Font Awesome in stead? I mean, it's easier to implement and so.
Cool but doesn't respond right in Safari
I think you use '-webkit-transition: 0.5s;' but you also need to include the standard 'transition: 0.5s;' for cross browser compatibility.
transition: 0.5s;
-webkit-transition: 0.5s;
man you are amazing :)
It's fairly complicated.
how can i make a card-list like in www.udemy.com/
Thanks you
shoutout to ayesha..from me also😝
nice video thanks :)
nice.tanks
Brad more css please