There’s actually a VS Code extension named Live Server that’s pretty cool.

Sir, I am beyond thankful for this tutorial. I know how to make normal designs using HTML and CSS and I know a little about SVG's, but I didn't know how to use them. I see all these amazing vector designs on dribbble and other platforms, and I know how to convert regular PSD files, but I never knew how to do the vector thing until this very moment. Turns out you only need to export the design into SVG and then code it in HTML. I now have a much clearer picture of how I want to make my designs. Thanks a lot man!

I always wanted to know how some websites had different sections with the whitespace cut in creative ways! I just didn't know what to search for! Now I do! Thanks to you! :)

Love your videos. It's easy to understand and perfect for beginners like us. You describe every step very detailed and that's the most important thing to me when I learn something new from you. Love you, sir! :)

You amazing man. I've been looking for a tutorial like this for months. Even payed a lot for a theme to see how they did it. Turns out they didn't use svg. Just a static image.

OMG I’ve been looking for this for like 3 months, I owe you my sanity

This is an awesome tutorial on creating UI from scratch and converting them to html, css!!! Thank you so much Mr. Simon!!!

Beauuutiful. Thank you for sharing. Never thought it'll be so easy

firstly I would like to wish you well and to say a huge thank you for uploading these videos as they have been an invaluable resource to

Always wondered how this was done. Thanks for the video!

TIP: In illustrator, when you replicate an element with the same space horizontally or vertically, just alt+drag(copy) the element, then hit CTRL+D several times as this will replicate throughout your artboard.

This is probably *the* tutorial, that is going to change my future FD approaches :D

Wow dude this is so cool! Please more videos like this. Absolutly loved it.

Whenever I see a website using a Bézier curve, I think of you, Gary. 👍

Not even a minute it and already hitting that like button, this is going to be goood!

Thanks a lot - your video is a Great start to soft soft. I'm onto it !

As always..Simply Awesome ✌️

Fun video, good for learning a bit more about the VSCode editor for newberts like me, thanks for making it : )

That logo is too subtle ❤️

VSC has a live server extension that will hot load your files without extra npm installation or json file. It’s very handy for quick prototypes.

Thank you for explain exactly what are you doing

@DesignCourse - I understand that Adobe XD is generally the been the standard in design tools and it's probably where you are most comfortable for your standard workflow. That said, is there any chance that you would consider doing more of these using Gravit Designer now that you've covered it in a video? Obviously we can follow along in our application of choice, but I really appreciate when content providers like yourself provide tutorials using free and/or open source cross-platform tools that are more accessible for everyone.

Great tutorial! Thanks again...

You are an excellent instructor. I will stick with you.

well its cool and all, but i think the hard part starts when you want to make it responsive, especially if you would like to go for harder approach of keeping curves not scale at all but stretch the 'solid' part, for example the menu part could be looking same on tablet and ultra wide monitor

that was so use full! !

Hey Gary... nice job... thanks for the inspirations.. I feel you a little tense today..

Great help,Thank you so much!!!

Thanks for the tutorial

Thanks it was really helpful and easy to follow

Would you care to share the project files for this tutorials. I like the svg background.

WOW! It's amazing!

I haven't watch but i already like it xD, thanks for all the effort on your tutorials!!

In adobe Animate CC you can do it even more quick. Draw one circle, select circle, cut, paste on stage, cut, paste on stage, cut... Select all bottom sharp edges and arrow up on your keyboard to smooth them. OR, you can select Lasso polygon tool, select what you need and cut, 10 seconds... :D

very cool tutorial , thanks :)

Will be following

awesome. Thanks Gary.

I love the voice. Its very clear. Nice

how cool! good job!

straight to the point.

very nice man, i like it.

Hey Gary, thanks for your videos, i have been following you a lot. I have a question regarding an SVG background, im trying to make a full SVG background layout for my website, i made all the design on adobe XD and i don't know if i should export the whole background as an SVG and just set it as the website background and then write on top of it or if its better to export pieces of background and make the whole composition. The big problem there i have is when i'm trying to make it responsive, when background changes the size, the content gets messed up. what would you recommend me to do?

Beautiful !!

Appreciate the honesty. @8:50 Liked and Subscribed.

Thank you soooo much!!!

Short answer: The key word is SCALABLE in Scalable Vector Graphic(SVG.) Shouldn't have many direct issues with responsiveness because it's not pixel-based. I'm not entirely sure if your concern is just about basic responsiveness(look the same across any size window), or the fact that you want the same image to have different proportions at different breakpoints - essentially creating an entirely different image every time the page is loaded. I'll assume you're talking about consistent appearance responsiveness, because you'll need JavaScript or some higher language to manipulate a HTML element on load to get the different image effect if that's what you mean by "keeping curves not scale at all but stretch the stretch the 'solid' part." That part I'm sure about. The "why" it works I'm a little less confident, but I believe: SVG data is stored as an equation and not a finite number. Part of the equation accounts for the size of the container in which the image is being rendered. Therefore the browser never has to guess how to size things at different breakpoints. And because it's not using concrete numbers you shouldn't lose quality. A dumbed down analogy would be the difference between the value of 1/3 and 0.33333. Sometimes either 1/3 or 0.33333 will work. At a certain point 0.33333 isn't accurate enough. However, the equation 1/3 will always mean 1/3. Again, SVGs store data as equations not finite numbers. When your image requires 1 MB worth of finite data points those little rounding errors can add up to a monstrosity.

Nice tutorial, wanted to know whether it's possible with photoshop

Saved my time!!

enjoy this quickly lol.. thank you

cool video! thank you

I know the video is pretty old but how would you scale the svg files for mobile devices? the 'background-size: cover' property will cause them to stay in the same position for every resolution.

It will be really helpful if you can highlight on screen which key you're pressing along with clicks.

Thanks for all your tuts Gary! I always learn from them. How do I become good at front end design? How to mix colors, layouts, fonts etc? I really struggle at that

Like it. You could use live server which auto updates. Very easy to install and use.

Nice work

Great tut as usual thanks new subscriber here

Thank you.

Can I do this in photoshop as well ? I did a similar drawing, used "Export as.."(SVG) option from photoshop, but when I try to implement it into my website using , it doesn't shows up on the screen.

Thanks for this. How would you implement this in WordPress?

Would be cool if you made one on how to make a navbar with illustrator. Don't understand how you can make the links clickable if you pre-make it but I know it is possible.

awsome content keep going bro

BTW use ctrl+shift+r to refresh while clearing the cache

Great tutorial..again! Are you aware that VSCode has a liveserver extension with live reload. Very easy to use for front-end dev. Just left click the index.html, choose live-server and go... - after installing of course:)

Hey, to solve the CSS file update problem, you can start the server like that: http-server -c-1

Amazing!!

year. I want to get into making soft on desktop because it offers more features but I have just been preferring the softow of mobile apps

prior to watching this; i didn't knew svgs could have so much characteristics to it

thank you good sir

Cool stuff,, thanks

Thanks a lot.

Tip: In Illustrator, (Cmd+D) repeats your last action...

Love from India ! Thanks for the video..man !

I started making soft recently, I was wondering if you wanna do any features.

What should we use for vector based website designing svg format or png ??plz reply..

there is line effects on your gradient, how could i make it?

How did you get the boiler plate install?

In The setup hey bro i wanted to know how do u load your Sample guide into the packs in the browser?

Very very nice!

wow i used to do all this using css took ages time to learn adobe illistrator

can you put like a bezier points on that curve thingy ? I'm new to front-end and I was looking for some inspirations/ideas and come across this sort of like a.. when the mouse crosses that edge/line it drags it and bounces.

Yea I see those everywhere now.

If there are any beginners here who finds the stuff about http server a bit confusing or hard, just install the vs code extension called live server and then right click the HTML page and select open with live server.

this is awesome, but i tried using adobe illustrator cs6, i couldn't export my files in svg, i guess i have to download the adobe illustrator cc. Thanks wow is took me 2hrs but still i couldn't get it right with cs6.

How can we make this work for a responsive website?

can we do this thing with clip path?

Great Thanks

awesome! but, i have a problem sir, is this BG be responsive?

thank u ser

Which version of illustration you have?

when i start typing in the code and i include the svg's, my left and right so far appear to be very HUGE on my page and the css didn't seem to make any effect at all. I did test the css page with index so I know they are connected. I feel like i did something wrong with the svgs

Nice, thanks...

Great video

Very helpful use low poly background too

Can you please create an extension to this video and teach us how to convert this template to be responsive? Thank you in advance!

At last I got it, was wondering how all this stuff was done

How did he delete overflowing part at 7:28? Please I need a help, I'm a newbie

Hello. Which program you use for make web sites?

You should definitely check out gravit designer. It free and open source and has most of the features available.

How does that look on the mobile version?

I agree I'm an old SONY ACID Head.you want complicated try ABLETON and more tourture..with there controller ABELTON PUSH.