Create a Responsive Website With the W3 CSS Framework
Вставка
- Опубліковано 15 гру 2024
- In this video we will build a responsive website using the W3.CSS framework from W3Schools. We will be working with HTML5 and CSS and a tiny bit of JavaScript. Font Awesome will be used for icons
CODE: Code for this video
www.traversymed...
EDUONIX COURSES: Pleas use affiliate links from website below
www.traversymed...
SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:
/ traversymedia
www.paypal.me/t...
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ bradtraversy
The link to download is now fixed guys, sorry about that
still not working I am afraid, can you have a look please as would love to look at why mine is not working properly.
i watch full ads. so that i can indirectly contribute to you. Thank you very much for your videos.
Thanks, I really appreciate that :)
Sorry, didn't know that, but now there are two of us! Keep it coming, thanks for knowledge! ;)
love your videos, best free ones ive ever seen - sucks that you don't get more exposure though
im pretty sure people come in waves in most cases but most likely those learning wideos popularity is linear function.
Good to know this, I have always skipped them... I will watch throughout from now on!
Wow this looks good. No javascript or jquery required - and only 7.1KB and that's not even minified. Clear winner for me.
why do some developers hate on w3schools.? I personally think its a great site.
Yeah i think it's the best fundamental site for learning web development.
@@ftanekha4006 whats your website
Notice, though, that that site itself says that w3schools has gotten a lot better. It's a really good resource nowadays, although MDN is the best if you need a general reference.
The reason why people don't think w3schools is great for beginners is because it gives you no real direction of what is good practice and what is bad practice, normally resulting in very bad habits that a beginner should not develop early on. The website is great for a reference, it's great to get started and show you how to do some things but using all those concepts of code already written for you should not be used like building blocks. It's better to understand why you're writing certain things instead of just reproducing something someone has already done for you.
MDN is by far the best. W3S is outdated sometimes and doesn't explain properly.
Very good. I had to repeat and slow it down in a lot of areas to catch exactly what you were doing, but, you are a good instructor.
Thank you a lot this is a great tutorial. The code download link seems doesn't work. Would you be able to have a look !!
Cool, I just did my latest site with this. W3CSS is so light, but feels so rich.
Would recommend to use iOS or Win8 colour pack given in W3school as it doesn't have colours like MAGENTA or Any other, just basic
Ah man this is awesome, easy, light and I felt comfortable using it. Thank you.
I like the documentation for this alternative. Makes it easier to troubleshoot.
Permit me to say your videos are damn so amazing and I wanna personally appreciate the good work.
Thank you man
r u KIDDING? w3schools is the BEST reference web for html css and python you can learn ANY other language by checking w3schools, it got also the best colors library and the best way to understand colors and go very far with your cutting edge design. I hate my school teachers why didnt they tell me about it, it's always been there since 1999!
Sub’d. I’ve been trying to learn frontend these last few months.. I really enjoyed this tutorial.. thank you and I look forward to learning more by you.
Hi Brad. Love the videos! I am learning html, css and javascript by myself. I am watching this as we speak, and I am on section 3 of the html portion and for some odd reason the "What We Do..." and so forth, is overlapping on the image next to it. No idea.
Thanks Brad. One suggestion: A video on the new Grid system (W3 standard) and how it plays together with Flexbox.
Why did you use an tag for the icons? Isn't that for explicitly italicizing something?
I suggest installing LiveReload and the chrome browser extension.. then you never have to click refresh just save the file and it will reload automatically.
Very Nice and clear Tutorial. Help me a lot better to understanding W3.CSS. Thank's a million. (I clicked Ads too)
Far better than bootstrap.
Great tutorial...my only slip up came when you put in the icons for SEO, Software Dev and Cloud Hosting that are at the bottom of the webpage. For some reason mine went in vertically, instead of horizontally - the way you have it. I've gone through the code and cannot figure out why...but great video again man!thank you!
You explained it really well Brad but i will have to go through it 2-3 times i guess to understand the all the small things going on.
Hola.
Tuve la oportunidad de mirar dos de sus vídeos. Puedo afirmar que son excelentes.
Gracias por su aporte.
----------------------------------------------------
----------------------------------------------------
Hi.
I had the opportunity to watch two of his videos. I can affirm that they are excellent.
Thank you for your contribution.
Excellent. I am enjoying your videos. Nice voice by the way. Thank you very much. All the best and keep up the good work.
Exactly what I was looking for , thanks. hope you've switched editors to brackets now :)
Thank you for this tutorial. You're a true youtube gem :)
Great content as always, thanks Brad
Why would someone use the "text-transform: uppercase" instead of just writing uppercase straight to the element?
Does the text-transform give different kind of uppercase?
You can do both, but Dev use it anyways.
You can do both, but Dev use it anyways.
thank you for this video, you are awesome. if you have time some day I would really appreciate a video or series of videos with more emphasis on any of the styling frameworks for beginners to more advanced things or maybe some basic rules, some mostly used classes. once again thanks for all that you share with us.
Thanks Brad. I could be wrong but I noticed another guy doing tutorials on YT and got the impression he was copying your material.
Thanks, can you message me or email me the url?
I have one doubt man, It is compatible with all browser or not
can i use this website for not comercial use? want to build a site for my programming-Camp... ty
Thanks for your time. Thanks for showing me something outside of bootstrap as well. I don't know if the w3 library changed but i couldn't get the class w3-padding-xlarge to work. When I checked their documentation I didn't see xlarge so i just changed it to large. Anyways, I thank you sir
how do i make my link pink instead of green?
I'm currently binge watching all your content, which is great!
I hope you don't mind me asking, but would you do a tutorial on how to send form data to an email address?
I'm currently following your series on PHP, so maybe it will come up in that further on.
Thanks!
Learn Laravel my friend. All the logic is done for you ;)
use AJAX to do that
3:57 how did u get all that tag so fast?is there a shortcut?
Type html and then press TAB.
You can also install Emmet package, see this video
ua-cam.com/video/5BIAdWNcr8Y/v-deo.html
Showed me stuff that I didn't understand. Thank You
dude your videos are really awesome, thank you very much
What browser are you using or how can I get the icon where you can adjust the size of the display to mimic other devices such as a tablet or cell phone?
how would you go about getting to modal to work, i am a beginner to coding. can you use html to make it work or an actual programming language, if so what one and can someone point me into the right direction. thanks
Big like for this video, no more bootstrap... :))
Great Content! I Appreciate tutorial for small css framework like w3c. It may come handy in my zoho/deluge development, where JavaScript is a no/no unless you create widgets.
Also too, you made a mistake there, when you created contact form, you used input class for label, hence it was black, not green. At the end you were tired and you used btn class instead buttom in modal section as well. But that doesn't matter, I think it's intriguing to see someone so big as yourself making errors.
Thank you very much!
Hi, I followed everything exactly, but at the 24 min mark, my button is not black. It's just a normal grey button. Any idea on what I'm missing?
www.w3schools.com/w3css/tryit.asp?filename=tryw3css_accordion
Open Section 1
Section 1
Some text..
Hey Brad, if you work with a PSD template file to create a website for a customer or agency, how do you work with these pixels in the psd and create a website from that PSD?
Really curious, thanks!
very good tutorial but what if I want to embed youtube video how to make it responsive?
Hey! It's a wonderful Tuto!
I was wondering something! I am new in coding and I would like to know if it's better to make a responsive website with W3.CSS than to use a normal page CSS?
yh can u check the code link coz it isnt working for me.....but nice work
I've linked the FontAwesome CDN but my Icons don't show. What could be the problem ?
Without seeing the code, I dont know how I can help. May be u can push it to github then I can help you out. Have fun coding
Hi Brad, Gr8 tut....If you would share a tut with video background template..That would be awesome....Thank you for the support...very helpful
Can u create a bootstrap file like this with documentation on w3schools or etc. Thanks in advance!
Good afternoon, ive been trying to add a image to the showcase container for almost 3 hours, ive followed the code. I researched other ways and it still doesnt load up. Any suggestions?
figured it out!. I didnt close my codes containing the selectors I was trying to manipulate. Got to love coding! Awesome video by the way.
so is it the thats connected to the nav links?
SoulRider it is the ids
Traversy Media oooh ya so when u gave href "#contact" etc?
SoulRider you got it
Traversy Media sweet thnx...great vids
4:12 Hm, strange, now on that page there is no meta for viewport, they deleted it.
this seems great but I have a logo for a website I want to make and I want it in the header so could you do a tutorial for that and how to put videos or gifs in your channel that would be *AWESOME*
Can't download page not found
Sorry, it is fixed now
Thank u sir i subscribed u with my 6 fake channels so that u can continue ur work..................................
Thanks for the tutorial, just one question, I'm confused between W3.CSS and Bootstrap, what do you suggest ?
Sky Land I personally would use Bootstrap in most situations. But this is an alternative. Some people really dont like Bootstrap. I just figured id put it out there for people who wanted to try it. I dont personally recommend it or anything
Your page is not found to pick up the images for some reason.
It's fixed, sorry
www.traversymedia.com/downloads/
then click on : acme_w3css.zip
cheers
man great content! still confused about framework though '-' on how to use it -_-
Hi, does the DL link still work? it won't let me :( :)
Is the w3.css framework fully free (and you can sell that site with this framework?)
it is not a framework, it is just free css file. you can write the same or copy into yours.
yes it's free, you can even install it via npm. if you know angular, react or vue you can combine them.
dude really thank for this....helps me a lot!!
My footer has some unwanted white space below it, anyone know how to fix this?
same as me :(
hey! is bootstrap better or w3CSS??
Bootstrap is a better choice in my opinion. Its much more known and has much more to offer but this is a nice change up if you want to use something else
I used it for a long time and it's very simple and fast and CSS only. I also like the Material like design
What tool or software are you using to create video tutorials ?
Here check this one (I hope you know how to run those Jars)
Dead simple screen recorder, and free.
code.google.com/p/java-screen-recorder/
Thanks man!
I just saw bunch of them on Github. So do check there too.
Thanks sure!
thanks a lot.you'r video is very helpful to me to build a website.and upload some videos which respective to this.
hello, iam using css, but when i add w3.css, there is a conflict in the code... the code tends to adopt to w3.css, how can i use the two together without conflict. thank you.
i have been trying to use w3.css but i was slow, thank you for this video. am subscribing right way
Well Easy way is to change everything to default or use css as side one. There is no way that css won't have conflict because W3.css is a css file.
It's great if your video includes subtitles because I'm in poor English
Nice, man you are the best
Bro can you make a responsive navigation not using w3 code?
No js?
Not in this one. Just features of the framework
i appreciate this useful video it helped me alot
Great tutorial!
u make life easy! Tnx a lot
Sir i have a question. My final project for this sem i redesign my personal webpage. My question sir is if im not using java script still working sir? Because my teacher said that redesign my webpage using w3 css thanks to your video sir because it can help me now on how to make my webpage us responsive on cellphone desktop and tablet iam only worried about javascript hopefully sir you can answer my question. New subcriber
I afraid but I think you made a mistake at 38:54 as Message instead of :)
its nice and flat , i love w3css
LINK IS BROKEN BUT HERE'S A FIX
Click the download link, then copy and paste it into the wayback machine
Opening the site provides you a zip file with the code inside!
Great video. Thanks
Nice video, i would like it if you can to make a tutorial about angular universal :)
very helpful to newbies, like me
You may use google sheet as database and combine with w3css. This is the video to do it: ua-cam.com/video/EThaucDBY6g/v-deo.html
@@dr-mnizam can't open the video
I'm a bootstrap guy but this is cool
Chandasouk same here. Its nice to check out other stuff though
Hmmm... what is the point of this framework?
That is a strange question. I would say "to build websites and application frontends". That is not clear? Have you heard of Twitter Bootstrap? Same type of thing
I just realized I don't know your name. I wanted to ask how did it go with Linux? I thought you left Windows for good.
Raad Mo its Brad. I use Linux for stuff like Node.js and Python dev in a vm. Unfortunately i need windows cause i need to run some stuff thats not possible on Linux
Love the video man! I wish I could give u some money but I'm a student so I'm poor. Could u perhaps make a video like this that uses bootstrap, so we can really see the difference between the two.
its amazing learn for begginer
thanks, so much
Sir can i have your codes :)
Don't see the point in using w3 when you have zurb and boootS
JONG MIN KIM this is much lighter and may work for some projects. I like bootstrap myself but good to have other options
I am surprised
Impressive 👍❤️
thank a lot....
Thanks !
19:49
hello
coool
where that image does came from? can anyone help me to fix an image
24:41