Learn HTML & CSS in 2022 | Crash Course
Vložit
- čas přidán 31. 05. 2024
- designcourse.com/css - Our Interactive CSS Course!
hbit.ly/3Cj1Tjx 👈 Learn UI/UX Today. Use "LAUNCH" for 15% Off!
-- Today, we're going to embark upon a brand new frontend development journey where I hold your hand, and we code a web design from scratch. In this process, you will learn some HTML, CSS and a tiny bit of JavaScript in a crash course setting. By the end of this video, you will have created a fully responsive design that works on all devices.
The Figma Prototype:
www.figma.com/file/ReJbOWDc0W...
Codepen demo for this project:
codepen.io/designcourse/pen/e...
0:00 - Introduction & Project Preview
1:19 - Interactive CSS Course
2:13 - HTML Explained
5:35 - CSS Explained
8:50 - Code Editor & Project Setup
11:53 - Writing the HTML
48:53 - Mobile First CSS
1:17:01 - Mobile Navigation CSS
1:24:27 - Finishing the Mobile CSS
1:26:38 - First Breakpoint
1:30:25 - Second Breakpoint
1:44:20 - Defining Animations
1:51:09 - JavaScript
1:57:33 - Final Thoughts
#html #css #2022
designcourse.com/css - Enter your email (Our upcoming Interactive CSS Course!)
bit.ly/31PhB7U 👈 Learn UI/UX Today. Use "LAUNCH" for 15% Off!
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi! - Jak na to + styl
Hey all, what are your goals for 2022? Me: Release 2 more courses and begin work on a new SaaS for creators in my niche. ;) YOUR TURN!
I'm learning Ux/Ui Desgin and learning JavaScript. I hope i'll get my first job this year.
Thanks too your videos helped me very much .
Love from Pakistan..
Cant find the URL of figma design :( tried "google-lens"ing it out from video but shows file not found or no permission... Can you please make the design public ?
I'm still learning css and javascript and the end of this year I want to try get front-end developer job. I really love coding. Your great tutorial helps me a lot for reach that goal. Thank You very much! 👍
I am going to launch a platform for creators and advertisers, but first going through all the tech needed for that project. I am not a developer, so I need to know what to look for when hiring the right developers for the project. For now, I think we will be using a meta-framework like SvelteKit/Next.js for the front-end, and Vercel/Supabase/AWS CDK/Serverless for the back. Once the project gets traction and some funding, we probably should go back to the drawing board and rebuild the app from scratch, with the least amount of frameworks to keep the code clean and easy to maintain.
Good luck to everyone in 2022, and beyond!
Getting UI/UX concepts down and then turning them into real, working websites. Aiming to get work in these areas since my freelance writing biz is a downward spiral in rates! Focusing on web3 and blockchain dev. Looking forward to this crash course after you mentioned it on the Design Course live call just now.
Thank you, I start this video at 10 am and finished at 4:30 pm. side by side I replicated this page. I learned lot. Thank you.
This is a 2 hour MASTER CLASS and you're a really good teacher. Thank you
Small correction on z-index, it can be used with any position value other than static. Thank you for the valuable content!
This is absolutely the best way to present on the material: for the novice, you can go really slowly and research on every topic, but for the professional - you just take it all in and you don't have to increase speed of the video to 5x or looking for the sections - thank you very much indeed!
Thank you for this course. I'm in process of learning CSS and this course made me understand a lot of stuff with margins, padding and whole layout. Great work as always! Keep it up! :)
Am so glad you finally made another crush course this year. I hope there is more interesting stuff coming.
just finished the last crash course from a couple years back. Really excited to see this up :D.
A little over halfway through this crash course, and I'm blown away. I was also able to get your Design Courses (UI/UX and CSS) cos I'm really committing to growing and learning from you. Thank you for such an insightful course. I'm learning so much already.
this tutorial is much advanced than in 2021, had more insights about animations and i still love this, i hope more people see this channel. God bless you brother!
hey brother, I want to start this course but I am confused that should I do this crash course or the previous year one? can you help me?
@@samyak3405 start with the previous one, but either way, they're the same
@@deathcuree "start with the previous one" - What for? This is an independent course. Not part 2
Please where can I download the design....I can't find the CZcams description
@@queenblessing4648 It is in description as Figma Prototype.
YEAH new crash course! Your courses are the best courses on youtube. Thanks for your work and helping to learn HTML/CSS!
unsplash carrying my design since 2019
on my way to a job interview, watching it as a refresher. thank ya mate
You are just amazing! Thanks for your precious time and helpful crash tutorial! I am starting my career as a UI designer, and you just made me better! Big thanks!
Anxious looking forward for the course... thanks a lot for this course man!
I followed this step by step, and now I have a decent looking website! Thanks for helping me bring my old one out of the dark ages!
I’ve learned so much and everything worked perfectly. Thank you!
My man, love your content so much. Thank you! You don’t know how much this video means to me
absolutely worth the time and effort. Thank you so much. The best front-end crash course.
You are a really good teacher. I'm already pretty good at HTML/CSS, but you still made me watch the whole 2 hours.
Great tutorial !!!
Your illustration is awesome.
Thanks for sharing.
Thank your for the course Gary! Hope it'll be easy to understand for newbies. I'm going to try to learn from it.
It’s beautiful that if simple details well put together, it could improve experiences tremendously.
good job mate!! I really your authenticity and the situations you came up with to fix the bugs because nothing works just 100% all the time. You basically did a one, especially the home page in a little bit less than 2h a performed what's possible. Very cool! THX and good luck with all you do :)
nice one!
really like the simplicity in your personality :)
AWESOME AWESOME STUFF!!!!! I am full stack javascript developer, following your content since 4-5 years now. This crash course was amazing!
I liked that you did not use any animation library for those simple animations and used keyframes instead!
You might have added a dark overlay to content when side nav is open in mobile view.
Thankyou so much, always something new to learn in front-end.
Thank You! I really enjoy doing this!
Cool course, good job man!
Amazing crash course! I don't even have used HTML or CSS before and I have learned a lot!
Got to congratulate you on the way you explain things as you have a great method of making things sound very simple. I particularly liked the inclusion of the use of Emmett shortcuts which many other tutorials miss out so thankyou for that. You also provided a good reason for going the mobile first design route
I am doing your 2021 Crash Course and I see this video pop up in my recommendations now ahaha. Imma do both then!
Thanks so much. Enjoyed this immensely!
The quality is just amazing
experienced right, fast and better ways...
Thank you big bro.
you are a very good teacher, I learn a lot from each video... can't wait for your site to be available!
keep it up!
Man, this was amazing! thank you!
I started watching you a couple of days ago and I love this channel! One thing I'm worried about is that in a video(a tutorial for building a Personal Portfolio (the Gary Simon purple page) you said you always go for Desktop view first and work your way to mobile, and now you said the opposite. What made you change your workflow? And what's the real difference? Like, which one you think is "better"? Or to be more specific, why before you used to do the desktop first and now it's not optimal anymore?
Thank you in advance and anyone that reads it and wants to comment be free to do so. I wish not only to learn web design but also the best practices!
Outstanding job!!, thanks for the lessons.
thanks a lot. this is my first CSS template.
Thanks for this man, started coding again and it is much easier now
Your teaching style is very clear and engaging. Thank you. So Helpful.
I'm learning so much from your channel, thank you so much for all the great content!
THANKS FOR THE COURSE BROTHER!!! STAY HEALTHY!!!!
The best. Simple and easy to follow.
thanks for making the detailed tutorial. really appreciated.......
Just finished it!, man I feel like I accomplished something important and moreover I can't wait to try out more, I guess mission accomplished, my feet are wet, and I can't wait to jump back in!
Brilliant video. Covers lots and flows really well. 👍
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 again.
SUPERB video! Thank you
Thanks man, learned a lot. Great job
This really helped me a lot, thank you very much i hope you upload more content like this.
Just finished the last one!!!!! Yay more fun to build my skills.
FYI - I couldn't get the open-nav script to show up, and it turned out that I needed to update my browser, so I'd recommend making sure that you have the latest browser updates before trying to follow this tutorial. Thanks, Gary for another awesome learning resource.
this tutorial is so simple and easy to understand and learn. previous one was very complicated and little bit confusing
Thank you! This Course was great.
Thanks for giving such a simple HTML tutorial crash course.😊 This tutorial was very helpful for everyone🙃.
I gained a lot of knowledge and found it simple to understand because you covered what would occur in the browser if I used this statement. Many thanks, sir.
I really appreciate your courses. They helped me alot.
Awesome animation and cool design, Thank you sir
improving my frontend skills just watching your videos
YOU ARE AWASOME!!!!!
THANK YOUUUUUU
Damn, I learned some amazing shortcuts thanks to you. You are amazing !
This was so easy to follow... actually, this is the first time that I was watching the complete video.
Oh wow this is very recent, nice work guys!
Very good course to learn in a few time a lot of frontend development...Thanks...!
Very very cool stuff. 🚀Thanks for the insights 🙏🏻
That was really good, thank you.
Gary, you're my new rockstar. Thanks for inspiration!
best design course that i've ever seen...
This is a great course as always from the best teacher on youtube.
I've tried several courses, this one really gave me the confidence I need to go on
Damn I literally just watched your last one to help get through a Web Dev foundations course. I guess I started it a day or two before this was posted. In any case, thank you for the great channel and information 👌🏻 Now back to some cybersecurity stuff for a while.
you really explain the subject well, Thank you.
Thank you, great course and tutorial
that's so next level. thank u
I will use this as a refresher as a UI UX Designer.
Nice!!!!
Obrigado professor!
God bless you!
Thank you for that. Really it's perfect!
Cool lecture, many thanks
Such a great tutorial my dude
We all waited for this! 😃
Great! Thanks, Gary!
this is very amazing, thank you for the knowledge
This is the best video i've found ever for programing, everything you had me do worked exactly as you explained it.
html css is not programming language
He’s on 🔥 this 2022!
1:58:10 👈 What a stylish OUTRO!! ❤️❤️❤️ Great tutorial though!! 👍 Thanks!! 🙏
the best man! thank you
Great video! thank you.
This video was amazing!
THANK YOU so much ! You are so clear, you save me! , :)
And yet I don't speak English very well !! :)
I will follow your videos carefully, thank you for the time you spend on them.
Good year and days and project, and fun, and everything
:)
great video with alot of useful detail, a true crash course! wish u uploaded the code itself so we could use it as a reference but it's ok. thanks for this video
Just wanna say thanks to you. Last year, 1 month into discovering your channel I made 1000USD off a UX/UI design contract with little experience but years of graphic design.
Will be enrolling for courses on your website soon. You are the best instructor on youtube, no competition.
You have my permission to use this as a testimonial. Thanks again
On upwork?
Thank you for this video! It is amazing, helped so much already!
W
thank you! i could finesh it and resolve the last issue with the arrow :)
thx for your free charge class video. it's very helpful .
Awasome Video!Thanks!
thankyou very much sir you have made the process very easy to understand specially JavaScript which makes me nervous every time I see its code
i loved that so much you helped me a lot bro thanks😍😍😍😍
Please do a crash course of javascript. You do really high quality videos and would be really helpful
Real stranger thing vibe. I dig it.
You're really an interesting teacher and personality sir!