https://skl.sh/designcourse23 – First 500 people to sign up will get their first 2 months free!
— In the first video (linked below), we used Adobe XD to create a mockup of our UI design. In this video, we’re going to step into the role as a frontend developer and make this UI design a reality in the browser. We’ll be using HTML, CSS (Sass), and JavaScript to make this all work. It will be a mobile-first, responsive website that uses GSAP (GreenSock Animation Platform) to handle UI animations.
Video 1:
https://www.youtube.com/watch?v=0yQxb0fCRGE
Codepen:
https://codepen.io/designcourse/pen/yWqZNK
Let’s get started!
– – – – – – – – – – – – – – – – – – – – – –
Subscribe for NEW VIDEOS!
My site: 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 Coursetro.com.
Come to my discord server or add me on social media and say Hi!
source
Enjoy? Sub up already!
Makes perfect sense, although I know nothing about development. Just wanted to see what is like to "make a website"? Thanks, trying to figure out how I should go about learning code
Where can get the software used in this vedio?
Great Man Your Are Nuclear Bomb
what vs code theme is this?
amazing tut!
Rock
What's the benefit of em over rem? i've always used rem
Didn't know Rob Halford switched from metal to computing.
Man i saw it for 1 hour straight.. It was amazing. Plz make more stuff like this. Thank you.
This was an amazing tutorial! Subscribed
Very Thank You😊
why cant you just take the design file and export it into code and copy and paste those codes into VSC?
u are awesome
"….Oh, my brain is not working". (Actually you said that, and my brain is not working too.. ) XD
Really great tutorial!
amazing, very helpful
Y u don't use animate.css
ayeee
Yes you made sense. I was thinking how does it work and you answered right away
how by just make a width 100 percentage automatically move to left… plsease tell
Amazing video… I learned a lot from it. Thanks.
do more videos like this. very useful…Teach more techniques
I got a lot out of completing this beautiful project. Thank you so much for creating and sharing it.
Great all around video with in depth explanations!
Realized i should get into css-grid, em-rem and gsap at some point.
Great video! Thanks!!
kindly make it full stack …
This was packed with information. Learned a lot from the video. Thank you!
Thank you for your help man! learning a lot from you!
Hey lets build a modern website and make it as confusing as possible! 😀
Nice design!
thanks for part.2, sir
Hello Gary! Firstly I would like to thank you for all the effort in these videos and the idea to teach hundreds of people to become designers. It's absolutely amazing. Thank you again.
I also would like to ask you to share the specific links for the HTML and CSS tutorials, since at this stage of the tutorial I'm really low in terms of experience with these two languages.
🙂 Cheers!
Hi Gary, whenever I try to go live with the index.html file, my chrome browser fails to load the file and then displays "site taking too long to respond". Can you help me out please? Thanks. Great work by the way!
Amazing !! I don't know what to say but … I learned a lot from your video. 1hour straight no regret <3
In the header css, to remove horizontal scroll bar when given width: 100%.. You can use "box-sizing: border-box;" instead of "width: calc(100% – 2em);"
Wouldn't it be easier to add the pointer with the unicode for the Black Right-Pointing Pointer (U+25BA) into css::before?
Overview of unicode geometric shapes. [https://www.fileformat.info/info/unicode/block/geometric_shapes/list.htm%5D
Excellent tutorial Gary, thank you👍🏻
thank you for video. can i do this without GreenSock js, only use css animation?
Our whole classroom talks about you sir now !! All students are even waiting for you to continue this series ….I think our teacher is getting jealous now !
Sir this might be a wrong doubt..i developed a website http://www.aykaanimation.com i developed this by reducing the browser size just like you did but the problem is that in the mobile its not the way its displayed on the small resized browser view ……………….small resized browser view is different from the actual mobile view. i get actual mobile view whn i click the console in chrome and change it into mobile view what can i do now ?? I am a big fan of yours from INDIA !!
Great job you are awesome!
I have a little question. Somehow, writing the scss, it doesn't reload the changes into the browser (edge). I mean, compiling html everything goes ok, not in scss, I have to close the tab and relaunch it again! I followed all the steps…maybe I forgot a visual studio plugin? I have installed live server and live sass.
Why didn't you use box-sizing?