Create a Modern Web Design from Scratch – Full Process – Part 1 of 2



– First 500 people to sign up will get their first 2 months free!
— I’ve got a good one for you today! This is part 1 of 2 in a series where I will show you how to both design AND code a modern web design / landing page. It will be fully responsive with a mobile-first approach on the frontend development side, and in today’s video, we’ll start off by designing it in Adobe XD (Experience Design). This project will also use GSAP (GreenSock Animation Platform) to handle the UI animations.

Codepen:

Part 2:

To recap, you’re going to learn:
1. Using Adobe XD to design a UI.
2. Using Visual Studio Code for Frontend Development
3. Using HTML, CSS and Sass.
4. Using GSAP
5. Using the Mobile First Approach
6. Making a Design Responsive
…and much more.

Let’s get started!

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS!

My site:
My personal FB account:
Coursetro FB:
Coursetro’s Twitter:

Join my 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 Coursetro.com.

Come to my discord server or add me on social media and say Hi!

45 comments

  1. If I were you I would remove that thing (at the down left) and I'd make thr photo black and white, no hate tho.

    Thank you so much for the video!

    Reply

  4. Hi! I'm the guy in the pic! 🤣 Good to see this one being used to help people out! 😅😅

    Edit: Damn this got 4likes!! **Searching on Google: How to handle fame.**

    Reply

  15. Hello Gary,
    Loving the content you are putting out; very helpful. I wanted to know when your are designing your web and mobile sites what grid system do you use? Do you use the bootstrap grid system or 960 or, do you even use a grid system? Thanks in advance.

    Reply

  16. You're such a great teacher. How do you know so much and get so much done?!?! Thank you so much for sharing your knowledge.

    Reply

  26. In order to be the best, you have to learn from the best. I appreciate the refresher on user experience. I can hardly wait for the coding part. Much Appreciated.

    Reply

  27. Sir, we want more videos on how to actualize these designs into HTML,CSS,JS websites. One of the biggest challenges is converting these designs into actual websites

    Reply

  35. Would be nice to use the final HTML, Scss and GSAP code and take them to a WordPress theme from scratch. It is not that hard, and people like that a lot.

    Reply

  38. Gary, can you make more videos like these? These help me out as a developer as they show me the design concepts and what sort of things you're thinking about when you're doing your design. Thank you!

    Reply

  40. Dear Friend, I would like to tell you that I used most of your Ideas in my projects thank you for your creativity.
    You are a great person and I wish the best for you.

    Reply

  42. Please do it dynamic web site, demonstrate it on AngularJS. I assume the second part will be only doing HTML, CSS and JS, like many other your videos. Please make it dynamic web app.

    Reply

  43. I can't express in words. Thankyou so much for this much needed video. Please make more tutorials on this.♥️♥️♥️♥️♥️😍😍😘🙌👏👏😊

    Reply

Leave a comment

Your email address will not be published.