Hey all, 2020 is going to be huge here. I'm releasing several LARGE courses (the first one on Scrimba.com!) -- So be sure to subscribe up for the ride! ALSO -- If you *are* an absolute beginner to frontend development, expect to feel like you got hit by a truck after watching this video. But that's the purpose of a crash course, there's a LOT of info packed into a short amount of time. There's a reason why there are courses that are literally 10-20 hours long, on JUST HTML alone. But this course will really help you get a feel for what it's like to work as a frontend developer on a project you might encounter. Don't be discouraged if you still feel overwhelmed by the end of the course -- that's to be expected. Keep on taking courses and tutorials though, and I guarantee you it will begin to click a little bit more each time!
@DesignCourse - Will they be free or paid? If paid please host them on Udemy as it will be accessible to wider audience because it is very well know platform for online video tutorials.
@@MeAdhir There will be a free UI design crash course that I release here and on scrimba in a few weeks. The full UI design course (7-10 hours+ long) will be released exclusively on Scrimba.com.
Holy shit, Gary. I recently started a job as a frontend developer and never realized how weak my css skills were without bootstrap. This is gonna be useful as hell. I do miss working on the backend though...
Can we just take a moment to appreciate his knowledge but also his speech? God! I could listen to his voice all day. It's so soothing and clear. Incredible! Specially for non Native speakers. Also for google captions :) so kudos! The design portion, c'mon, no need to blunt over it. You're the man Gary! Happy 2020!
I’ve finally made the push to change career from a dead end non tech job to learning and mastering the requisite skills for front end web dev work, at the age of 36 - along with being a recent first time dad. I will ultimately be lookin for an entry level front end Dev role, to begin with … but knowing that this is a role and industry in which I can grow and build along with my skill set .. in hopes of providing a better life for my family … good luck to any and all who are in similar position and have had to take a leap of faith, leaving comfort and mediocrity in the rear view mirror, for good … !!! 💯🚀💪🏽👍🔥🔥⬆️📈
I know html and css but I needed this tutorial to piece it together and make a website from scratch. I like the flow of the tutorial. I like how he detours for a bit just to show what else you could do but then quickly finishes it and gets back on the current objective. Thank you for the video.
Luckily I'm not a complete noob...but this still hit like a car nearly swiping me on a crosswalk lol. Lot of familiar elements explained in an even simpler way; really like how you tackled it and the energy towards introducing so many different but crucial keys to skeleton construction. Not as overwhelming as it could have been...I feel more confident now than I did a day ago, for sure!
Well man, I'm a fan... I've subscribed and I'm infinitely thankful that you chose to make this course. You've helped this out of date old school designer immensely.
You are simply one of the best tutor on TH-cam.. It’s like you read minds and explain questions that comes to mind while you tutor. I’m definitely subscribing and watching all your videos 🙌🏽
Love these tutorials. I'm an advanced app and Nodejs developer and trying to get it into web frameworks as well, specifically Angular. These videos are extremely helpful in learning all about the web. I'd love like an advanced HTML & CSS crash course, including things like animations would be very nice to see. But overall I love this channel and you got another sub.
I would really love seriously if u could do a tutorial showing how to turn a static layout in html into wordpress. Deeply love the videos u make, and happy New year bro!
@Luciano Ramírez garea, @Anna, #Glow0110: I've been considering this off and on for a while (26 years in web dev; the last decade all WP all the time.) It'd help to know your specific challenges and skill level.
this is the best tutorial(also my favorite tutor) i've been watching on youtube so far! very encouraging for beginner - you can actually build a pretty nice web if you follow step by step the explanation is super easy to understand, especially for a non-native english speaker like me
Very nice crash course! I really appreciated how you explained your rationale throughout the video, it helps a ton to get better in responsive design and understand the "Mobile First" mindset
Man, thank you so much! This is the first project that I concluded and I had absolutely no issues whatsoever along the way. Your teaching pace is simply perfect to follow.
i appreciate what you do, i am starting my journey as a front end developer (self tought 1 week in) and this video helped me understand CSS alot thank you so much! i subbed.
I gotta say, some things didn't go as planned. This was my first try into building something in HTML/CSS, I used my own images even my own logo so, things got tricky. I've also changed the font family, font sizes, paddings, margins, you name it, just make it a little harder, resulting in a quick learning process. I've spent a full night poking with this structure, CSS is hard to understand at first glance, compared to building in Ai, PS, Xd... But I love it, and, I can't believe how easy it is to animate adding a bit of javascript. I came here to convince myself that front end is not that hard, and you sir just validated that, extending my curiosity-span. Awesome content perfectly explained for newbies. Thank you a lot!!! Maybe someday I'll switch from branding to development, who knows. PS: If you want, I can send you the files to see the outcome, or if there is a free way to publish them please let me know. Cheers!
You would also want to set the overlay.style.display to 'none': btn.addEventListener('click', () => { overlay.style.display = 'grid'; overlay.classList.add('animate-overlay') setTimeout(() => { overlay.style.display = 'none'; overlay.classList.remove('animate-overlay') }, 3000) })
your content is excellent. so clear and well explained. im learning front end after dipping my toe into python last year and am looking forward to growing and improving my skills to maybe work remotely while travelling one day, thank you for the part you are playing in that and the sharing of information!
Hi, I was having a nightmare time with CSS (i'm currently working with a Flask webapp). This is awesome, you are an outstanding teacher. Thank you so much!!
In the first few seconds of this video, I got panic thinking my headphone is damaged😂. Terrible echo sound added... By the way lots of appreciation. Your contents are very comprehensive I love it and learning a lot already, Thanks DesignCourse. Quality work.
Hi Gary! It's the first time I'm commeting a video on youtube but just wanted to say thank you. Really enjoyed the video and learnt a lot. Will check you other videos and website! Thank you, keep going! :)
Thank you very much for you the time and effort you took to make this video. Learned a lot in a short span of time! This beginner friendly tutorial definitely sets you up for further intermediate and advanced front end stuffs needed to be learnt as a whole.
This has been so helpful thank you!! I've been learning & playing around with HTML & CSS on and off for fun, but can't always make time for it. This is so useful to refresh & catch my memory up-to-date with the gist of the basics so I don't have to spend more time relearning what I already knew.
This is the kind of tutorial I was looking for. Thanks a lot, dude. If you made a playlist full of tutorials like this I would certainly enjoy every single one. But I also think that you should teach us some more advanced shit too.
There should be a setting or extension in browsers for users to turn off the hero element if they choose to. At the same time when the option has activated the text on the screen should become a larger size and more readable which would help the website be more functional for the person viewing it.
Wow, i was the second person to give a thumb up! Haha, i know it's stupid but that excites me! Greetings from Venezuela. Thanks for your videos, dear Gary!
@Que_Rico Hey! Totally agree. Beautiful country, and every country will know that we reach the Greatness in the Name of Jesus. Thank you for your wishes and greeting my friend @Que_rico
the background is not working here pls somebody help... i've tried copying the code to my visual studio but the page does not look like the actual project on the video :c
Followed the crash course by the book...ended up with 1 day of staring why does Js won't execute, why 2nd section is not loading properly. And finally I made it. Ofc, it was all my fault (type-o here and there, line of code below div instead within a div and vice versa and so on...) This sh*t ain't for me obviously but it's fun so I want more! Awesome stuff for absoulte noob as myself, thx for making this crash course! +1 hundred! :)
Great for a crash course. Not great for detailed because he's not explaining many things he's doing as much as he should. But the title says "Crash Course" so no complaints and a thumbs up (Y)
Special thanks to make my life easy, before watching your awesome training stuff, I was suffering a lot, thanks a lot again. I am a good designer and it is very easy for me to design web design stuff, but I just start learning web coding in corona days at home, thanks again for uploading such great training stuff.
Hey all, 2020 is going to be huge here. I'm releasing several LARGE courses (the first one on Scrimba.com!) -- So be sure to subscribe up for the ride! ALSO -- If you *are* an absolute beginner to frontend development, expect to feel like you got hit by a truck after watching this video. But that's the purpose of a crash course, there's a LOT of info packed into a short amount of time. There's a reason why there are courses that are literally 10-20 hours long, on JUST HTML alone. But this course will really help you get a feel for what it's like to work as a frontend developer on a project you might encounter. Don't be discouraged if you still feel overwhelmed by the end of the course -- that's to be expected. Keep on taking courses and tutorials though, and I guarantee you it will begin to click a little bit more each time!
@DesignCourse - Will they be free or paid? If paid please host them on Udemy as it will be accessible to wider audience because it is very well know platform for online video tutorials.
@Que_Rico Yes, check the youtube description for the discord community link.
@@MeAdhir There will be a free UI design crash course that I release here and on scrimba in a few weeks. The full UI design course (7-10 hours+ long) will be released exclusively on Scrimba.com.
@@DesignCourse Love you man! Can't thank you enough for the effort you are putting for the community. :)
Hey don’t forget visual studio code , is not installed in PATH by default , you have to run a command with f1 before you type “code .” In cmd
Gonna grind on the weekend to learn front end. If anyone else doing 9-5 , let’s get this bread
same here ,how far did you get?
@@dumbdavinchi3638 just HTML programming, almost done. But idk if I retained what I learned
dont do it for the bread, do it to gain experience/knowledge.
guys anoone who can share me thier ideas
@@SportsEntertainment HTML programming 😂
Holy shit, Gary. I recently started a job as a frontend developer and never realized how weak my css skills were without bootstrap. This is gonna be useful as hell. I do miss working on the backend though...
The best two hours I've spent on a video in ages. We don't deserve this, thank you ever so much!
For my reference Purpose Only
19:52 - First Block
22:17 -Div class shortcut
ctrl+shift+i - Dev Tool
25:46 - Section Tag
I’m 10 minutes into the vid and there’s already soooo much good info. Not new to front end but I do enjoy good content. And this is just that.
I was having a hard time with CSS and this video helped me a lot to overcome it. Thank you so much.
I think the ONLY web development channel that you don't feel bored watching. Thank you so much, DesignCourse.
Can we just take a moment to appreciate his knowledge but also his speech? God! I could listen to his voice all day. It's so soothing and clear. Incredible! Specially for non Native speakers. Also for google captions :) so kudos! The design portion, c'mon, no need to blunt over it. You're the man Gary! Happy 2020!
Let's animate and :-)
Just change your css like this:
h1 span::before {
content: ' ';
position: absolute;
width: 3em;
background: #00BFFF;
opacity: .7;
height: .4em;
bottom: 0;
z-index: -1;
margin-left: -.3em;
transition: 700ms;
}
h1 span:hover::before {
opacity: .9;
width: 7.8em;
transition: 300ms;
}
pretty cool transition💯✌
What does the before do?
Please what does the before do
I’ve finally made the push to change career from a dead end non tech job to learning and mastering the requisite skills for front end web dev work, at the age of 36 - along with being a recent first time dad.
I will ultimately be lookin for an entry level front end Dev role, to begin with … but knowing that this is a role and industry in which I can grow and build along with my skill set .. in hopes of providing a better life for my family … good luck to any and all who are in similar position and have had to take a leap of faith, leaving comfort and mediocrity in the rear view mirror, for good … !!! 💯🚀💪🏽👍🔥🔥⬆️📈
Can we only learn with TH-cam or it's better to learn it through college or private schools
How is it going? Looking to make a change for myself as well.
Im in similar situation! Wishing for de best
You have successfully taught me the basics I needed in 2 hours which my lecturer failed to do so in 1 whole semester. So thank you very much !
As someone trying to learn Frontend alone. I appreciate this comment. Time to dig deeper.
I could hear an echo in the beginning
Same😑
thought my headset was broken lul
Yes
i thought i had two tabs open lol
Thought my headphones were broken
Man u have a gift !!!! I don't know if I'm the only one, but you've explained everything so flawlessly!!! THANK U
I know html and css but I needed this tutorial to piece it together and make a website from scratch. I like the flow of the tutorial. I like how he detours for a bit just to show what else you could do but then quickly finishes it and gets back on the current objective. Thank you for the video.
i love how you care about the details you're a great teacher
Luckily I'm not a complete noob...but this still hit like a car nearly swiping me on a crosswalk lol. Lot of familiar elements explained in an even simpler way; really like how you tackled it and the energy towards introducing so many different but crucial keys to skeleton construction. Not as overwhelming as it could have been...I feel more confident now than I did a day ago, for sure!
I'm taking a frontend development class and this tutorial has helped me to put everything together in a way that makes sense. Thanks a lot!
Well man, I'm a fan... I've subscribed and I'm infinitely thankful that you chose to make this course.
You've helped this out of date old school designer immensely.
Fantastic content for the new year! Thank you for all the hard work that goes in to making these tutorials!
For you fantastic. it's very simple
@@e.g.t.2460 no
You are simply one of the best tutor on TH-cam.. It’s like you read minds and explain questions that comes to mind while you tutor. I’m definitely subscribing and watching all your videos 🙌🏽
Love these tutorials. I'm an advanced app and Nodejs developer and trying to get it into web frameworks as well, specifically Angular. These videos are extremely helpful in learning all about the web. I'd love like an advanced HTML & CSS crash course, including things like animations would be very nice to see. But overall I love this channel and you got another sub.
Happy New Year. Keep making these great frontend dev vids.
This is one of the best videos on the topic. Very clear and concise.
I would really love seriously if u could do a tutorial showing how to turn a static layout in html into wordpress.
Deeply love the videos u make, and happy New year bro!
HARD SECOND
Agree 100%, this would be awesome!!
@Rashed Arman dude ,that is impossible
@Luciano Ramírez garea, @Anna, #Glow0110: I've been considering this off and on for a while (26 years in web dev; the last decade all WP all the time.) It'd help to know your specific challenges and skill level.
@Rashed Arman Wordpress is a bad platform and is that way because it's based on crappy code.
this is the best tutorial(also my favorite tutor) i've been watching on youtube so far!
very encouraging for beginner - you can actually build a pretty nice web if you follow step by step
the explanation is super easy to understand, especially for a non-native english speaker like me
Im just 2 min into the video but I already have to give you props for that sweet guitar collection in the background , well done sir
Mr. Gary!! I haven't yet started the video but I'm already super-psyched it's you! You rock sir!!
Your last video kept my attention for a full hour. Had to sub after a few minutes watching this...nice!
Very nice crash course! I really appreciated how you explained your rationale throughout the video, it helps a ton to get better in responsive design and understand the "Mobile First" mindset
coming from the 2019 frontend developer course. Im excited
11.48 - HTML
50:00 - CSS
2:01:00 - JavaScript
Man, thank you so much!
This is the first project that I concluded and I had absolutely no issues whatsoever along the way.
Your teaching pace is simply perfect to follow.
i appreciate what you do, i am starting my journey as a front end developer (self tought 1 week in) and this video helped me understand CSS alot thank you so much! i subbed.
Recently started learning front-end development and can't thank you enough. So useful course. Thanks man ! 🙏
how's it going bro?
Front End development from an UI/UX designer perspective ... Awesome 👌👌👌
I gotta say, some things didn't go as planned. This was my first try into building something in HTML/CSS, I used my own images even my own logo so, things got tricky. I've also changed the font family, font sizes, paddings, margins, you name it, just make it a little harder, resulting in a quick learning process.
I've spent a full night poking with this structure, CSS is hard to understand at first glance, compared to building in Ai, PS, Xd... But I love it, and, I can't believe how easy it is to animate adding a bit of javascript.
I came here to convince myself that front end is not that hard, and you sir just validated that, extending my curiosity-span. Awesome content perfectly explained for newbies.
Thank you a lot!!! Maybe someday I'll switch from branding to development, who knows.
PS: If you want, I can send you the files to see the outcome, or if there is a free way to publish them please let me know.
Cheers!
CSS: 49:50
I needed this refresher. the last time that I coded was back in 2016 - So I forgot almost everything. Thank you.
at 2:12:04 - add new script
btn.addEventListener('click', () => {
overlay.style.display = 'grid'
overlay.classList.add('animate-overlay')
setTimeout(() => {
overlay.classList.remove('animation-overlay')
}, 3000)
})
You would also want to set the overlay.style.display to 'none':
btn.addEventListener('click', () => {
overlay.style.display = 'grid';
overlay.classList.add('animate-overlay')
setTimeout(() => {
overlay.style.display = 'none';
overlay.classList.remove('animate-overlay')
}, 3000)
})
your content is excellent. so clear and well explained. im learning front end after dipping my toe into python last year and am looking forward to growing and improving my skills to maybe work remotely while travelling one day, thank you for the part you are playing in that and the sharing of information!
Fantastic way to start the New Year! Happy New Year 2020!!
this comment didn't age well....
This aged like my intelligence
@@omkarkulkarni3644 🤣🤣🤣
Now its 2021🤣
Hi, I was having a nightmare time with CSS (i'm currently working with a Flask webapp). This is awesome, you are an outstanding teacher. Thank you so much!!
just withdrew from lambda school and this video explained in more detail and less stress thank you
loving these html courses man! keep doing them!
Thank you so much for this tutorial! I followed along and finished my first coded website. 🙌
Nice course! I'm going to study Business Informatics probably and want to work as an Front End Developer after that. That Course really helped me.
2:12:30
setTimeout(function () {
overlay.style.display = "none";
overlay.classList.remove("animate-overlay");
}, 3000);
Sue Holder Bravooo !!!
Well played!
Darn, I'm a complete beginner and almost had it without help... didn't put in display ='none' line. Thanks for the solution :)
Glad it helped! :)
In the first few seconds of this video, I got panic thinking my headphone is damaged😂. Terrible echo sound added... By the way lots of appreciation. Your contents are very comprehensive I love it and learning a lot already, Thanks DesignCourse. Quality work.
Great video! You answered a lot of questions others didn't answer and you clearified a lot of things! Keep up! :)
Hi Gary!
It's the first time I'm commeting a video on youtube but just wanted to say thank you. Really enjoyed the video and learnt a lot.
Will check you other videos and website!
Thank you, keep going! :)
Amazing voice and explanations. I ve never completed 2 hrs course... But this time...just wow
Thank you very much for you the time and effort you took to make this video. Learned a lot in a short span of time! This beginner friendly tutorial definitely sets you up for further intermediate and advanced front end stuffs needed to be learnt as a whole.
Preparing for Front Development job in future :) Just graduated from CIS. I keep practicing what I learned in college and this video is awesome!!! :)
Great way to learn for starters! excellent delivery and very well organized, thanks a lot
This has been so helpful thank you!! I've been learning & playing around with HTML & CSS on and off for fun, but can't always make time for it. This is so useful to refresh & catch my memory up-to-date with the gist of the basics so I don't have to spend more time relearning what I already knew.
Nice course, very easy to understand. I had to come back to drop a review this review, and this is my first doing this for any yt vid.
In 1:33:14, instead of using background-position: num% num%, you can use background-size: cover. The background would be much more nicer.
Great tutorial! The 2019 one was hard to follow and I was very confused but you did an amazing job on this new tutorial. Thank you!
This is the kind of tutorial I was looking for. Thanks a lot, dude. If you made a playlist full of tutorials like this I would certainly enjoy every single one. But I also think that you should teach us some more advanced shit too.
Played at 2x, learnt whole lotta stuff! Thanks a lot man!
Thanks so much. I am a newbie. But after listening to this course, I feel like a guru...great work.
Got website idea. Dunno jack. Now I feel I do. GRRrrreat Content. Recommending you to everybody.
An amazing thing to repeat what you already know and also add some knowledge! Thank you!
Thank you for your efforts without you guys I wouldn't have build my first project. Thank you 🇿🇦
There should be a setting or extension in browsers for users to turn off the hero element if they choose to. At the same time when the option has activated the text on the screen should become a larger size and more readable which would help the website be more functional for the person viewing it.
Great way to start 2020. Thanks for this!
Thank you Gary!
This was helpful in cementing my decision to learn Front End Development.
Thank you so much for the tutorial, the first tutorial that I've watched from beginning to end very helpful!
Amazing tutorial! this was my first front-end project and its inspired me to keep going :D
I do a handful of creative things so I sometimes forget what I can do to make things work. Thanks for the refresher.
Especially effective in my case when I sort of knew most of this already but needed to remember it all once again. thanks
I love this course thanks man .. pls keep on making courses like this
I believe leading is pronounced ‘Ledding’. Left over from using lead(metal) spacers in typesetting.
Wow, i was the second person to give a thumb up! Haha, i know it's stupid but that excites me! Greetings from Venezuela. Thanks for your videos, dear Gary!
@Que_Rico Hey! Totally agree. Beautiful country, and every country will know that we reach the Greatness in the Name of Jesus. Thank you for your wishes and greeting my friend @Que_rico
the background is not working here pls somebody help... i've tried copying the code to my visual studio but the page does not look like the actual project on the video :c
You're so amazing, man! I've learned some cool stuff
i copied everything just changed the names and lines and pictures.
I now have a ultimate website for memes thnx! helped me soo much
AMAZING!! :) this is a beautiful project. thank you Gary.
Very good course man you're doing great i hope can buy soon one of your course
Thank you for this wonderful video. This is a great way to start a leap year.
Followed the crash course by the book...ended up with 1 day of staring why does Js won't execute, why 2nd section is not loading properly. And finally I made it. Ofc, it was all my fault (type-o here and there, line of code below div instead within a div and vice versa and so on...) This sh*t ain't for me obviously but it's fun so I want more! Awesome stuff for absoulte noob as myself, thx for making this crash course! +1 hundred! :)
I am a kid and I love watching this guy's vids
Loved this course! Still feel intimidated by coding but this was a great way to get my feet wet.
You´re insane! Really amazing and good information here!
Thanks man one of the best practical tutorial, really helpful.
I've absolutely loved it! Thanks again for a great tutorial😀
Really amazing and describe the main points. I really love it.
First :)
Love you content, please create JavaScript crash course.
Great initiative thanks. I am gonna watch the full video
Great for a crash course. Not great for detailed because he's not explaining many things he's doing as much as he should. But the title says "Crash Course" so no complaints and a thumbs up (Y)
I am still not into IT thing. However, I found myself excited to start a new journey upon watching your tutorial.
This is amazing, man! Thank you so much!
This is really worth it. Thank you for the effort!
So well...that I have coded my own design while watching this video
1:31:31
1:33:39
1:42:24
1:48:12
1:53:53
1:58:18
this was awesome - watched the full video for the first time in my life.
xd
Special thanks to make my life easy, before watching your awesome training stuff, I was suffering a lot, thanks a lot again. I am a good designer and it is very easy for me to design web design stuff, but I just start learning web coding in corona days at home, thanks again for uploading such great training stuff.
I woke up n this was playing n it was halfway through so I put it back to the beginning to start over.
Thank you so much for making this tutorial ! I am so happy I found your channel, I have learned a lot 😊🙏🏼