https://bit.ly/3iSlL2H – Become a frontend developer (50% off limited time!)
— https://bit.ly/3F2H8Id 👈 Learn UI/UX Today. Use “LAUNCH” for 15% Off!
— Today, we’re going to do a crash course on learning HTML and CSS. We’re going to cover a project we created in Adobe XD a couple weeks ago, and make it FULLY responsive!
Codepen demo:
https://codepen.io/designcourse/pen/JjbPdqd
Project files:
https://coursetro.s3.amazonaws.com/stuff/2021frontend.zip
0:00 – Introduction
2:45 – A Special Offer
3:20 – Code Editor
6:35 – Writing the HTML
58:57 – Writing the CSS
1:46:42 – Mobile Navigation
1:55:16 – Responsive CSS
2:16:43 – Closing
Let’s get started!
– – – – – – – – – – – – – – – – – – – – – –
Subscribe for NEW VIDEOS!
Learn UI/UX: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom
Join my Discord! https://discord.gg/a27CKAF
^-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!
source
Thanks for giving such a simple HTML tutorial crash course.😊 This tutorial was very helpful.
great one! but please how did you removed your talking video background .pls teach me?
Thank you so much i learnt a lots of stuff from you
I saw the video , replicated the whole thing and now I can work on literally everything , thanks a ton for this.
Nice job!🔥
for me i can't find "watch sass" anywhere on my visual studio code… how come?
may i know why i am unable to get the menu icon? i have been putting all my images in the folder, i even create ai files myself for that icon, it still unable to show up. May i know is there any error?
My main.scss file is not wroking the code but whereas when I write in main.css it works on my webpage. I have checked if my Saas plugin is installed properly or not but IT IS FINE. Please help me what can I do?
young palpatine teaching css
Hi Sir!
Today, I went through the whole crash course in this video completely and it was so interesting and easy to understand all those stuffs of HTML, CSS and even of JavaScript, that i can't express in just simple words. What an outstanding course video so far.
I really appreciate your investment of a big time and energy for stretching this long and teaching the viewers in a very straight and interesting way. It was cleared almost all the concept of all levels through this course so far and I am really eager to use those learning to build my own website by following the explanation by you in this brilliant video.
Bundle of thanks for making and sharing this wonderful knowledge of these languages and thanks again for increasing the interest and moral of working in this regard further in future. Really motivated and inspired with this video. Keep a great work Sir like this and sharing the wonderful content to the audience so far.
Have a good day!
Regards,
Thank you
Made my first HTML site ever with this tutorial. Though lasting a bit above 2h (the video), made it a few days to me to write it to work right. I encountered a problem with scss, I didn't realise that by unchecking the watching button I stop scsss from live compiling, which took me a long time to figure out- such a little thing. All in all It's helpful to see a sort of real-life sample instead of those simplified versions for beginners. Thanks a lot.
I just finished this video yesterday. This video is extremely helpful in my persuit of better understanding front end web development. I got such a clear picture of the build out process. Thank you so much.
Preferring BEM to chaining css selectors would me more practical for future devs.
Love the video, im just having problem right now making the CSS connect to the website it seems like? if i change the body color it doesnt update in the browser?
Thanks alot Gary for making this tutorial.I learnt so much from this and also can apply concepts on my own because of the explanation you give for every piece of code.
I trust any man with a kemper
thanks for the shift+alt+down 😅
I don't know if how many times I watched this video hahahahahaa I really want to become a web developer someday I hope I can❤️ and I still watching this hahahahaha thanks for this tutorial sir God Bless❤️
Hi. thankyou for the tutorial. i followed the same file structure but when i write code in my scss file , like background color, it doesnt work. but the background color does work when i write the code in my css file.
Any functionUp student here?
Nice. With what I learned in this video and a little search I was able to add a listenner to close the mobile navigation menu by pressing ESCAPE. I've always thought every floating menu should work like that.
document.addEventListener('keydown', function(event){
if(event.key === "Escape"){
nav.classList.remove('menu-btn');
}
})
Cool Tutorial. But you are talking too much 🙂
Hands on one of the best videos on youtube
Why does bullet points are not showing on the live server but when I open it on the browser it shows?
You're the hawkeye of programming, thanks for this couse, everything is understandable!
When it got to the part of media query, my css stoped working, and any update I make does not reflect on the site even if I close it and re-open it, does anyone know what I could do to fix this??
My html does work
Vs code – doesn`t read an SCSS.
thanks ❤️
thank you man
This was actually very helpful. I followed through and by the end of the video I had a fully functional, responsive web page. Thank you for this crash course.
Consider me amateur and a person who just knows to code..
My question is after I make the HTML CSS files and I can see the dummy website on the web , but what should I do to make it real, like so that people can see it interact with it , whatever you call it..
Basically what does making website go live mean and how to achieve that?
Guidance would be greatly appreciated
why do you add cta in class tags for example hero-cta
thank u)
1:36:55 but you never explained what that means in regular CS either.
This was great. Nothing like learning while watching the actual process. I just started school and studying Web Development.
How can I get the zip code for the images used???
I’m more than happy to discover this website. I need to thank you for your time for this, particularly a fantastic read!! I liked every little bit of it and I have you bookmarked to look at new information on your website.
What made me happier more then anything is that you kept turning your head to copy from your notes. Cause I was really getting scared xd