Hi guys, check out my new class on Skillshare (Design An Image Gallery From Scratch Using HTML, CSS & JS - with Lightbox): skl.sh/3zc7zZS Hope you find it useful.
A true example of how one goes about creating a web site using Figma in the designing phase and then shifting over and creating the outline in HTML and finishing it off by using CSS along with the code generated in Figma for the final rendering. The use of the console and targeting elements using JavaScript is just icing on the cake. The way you seamlessly blended the art of using multiple platforms and articulated it to us folks is extraordinary. You are a genius !!!! I hope everyone that's learning web design stumbles on this 2 part series. So thankful for all your work. ))
Never imagined that a youtube video could be more informative than doing a course at any institute, you have done hard work in making this video and surely our prayers will be there for you .....thank you so much for everything you have done for us.
This is quite an exciting way to design. The only doubts I am having are regarding how many sizes of fonts and positioning references have been done with using pixles. Making this website media responsive for different screens will be a challenge. I think using rems or ems is always better than using pixels, especially for font sizes
Thank you sooo much. There are so many videos on youtube, that are just taking up space and not really providing value. But your videos are worth their weight in gold. I am going to check out your website.
Man. Thank you so much. This was amazing. I just randomly picked the first of these two videos (html) to try to understand moving from figma to a website and this was SOOOO helpful!! THANK YOU!!
Excellent video. Learnt a lot. Knowing the fact that FIGMA or front end design is just a peace of cake. Actual work/pain start for converting it into Theme or HTML. CSS. Well Done...
This is a great tutorial. A question for you I have is setting it up to be responsive. Obviously one way to do it is just to have media query breaks But are there other better ways
Other than media queries you can use percentages instead of pixels, max-width or min-width instead of width. You can use vw (viewport width) and vh (viewport height) which updates depending on the window width and height. You can also use Flexbox and CSS Grid to make a lot of the elements responsive. And you always have media queries if you can't do something with the above mentioned methods.
why is figma then if we designing all the webpage in html css and js why we should design the webpage image in figma first and then take it as reference and build in html css and js from scratch
beautiful tutorial very comprehensive, is there anyway to copy past transition, transform, and z-index properties directly from Figma. i ve seen you manually set these properties by yourself. i mean doing it manually is a challenging job to animate pics
I enjoy coding, working with JavaScript, React, Node, etc etc but I just cannot get CSS, I wish I was that good at it, but I know that will never happen because I just find it boring, and tedious! :/
at 10:52 you can see the margin from p tag to button is 32px at 11:46 you set it to 48px I don't understand why when I watch these videos no body uses the values on the design and just guesses? Is this really the standard of devs around the world?
This was really helpful, so thank you for that, now lets say my website is one continuous page and ive got a clear divide between the pages, how exactly would I make it and link everything?
Super cool video! i learned alot. I remade this with vue but it's not very responsive for smaller screens and it's hard to tweak with media queries. Any tips?
Hi, I have started a new series where I am designing a responsive one page website from a Figma design. Here is the link the playlist: ua-cam.com/video/56Hoo0M_uAo/v-deo.html
Ok yeah that's the perfect word to describe it. I've been sitting on it for years and i'm just so intimidated by it. But tNice tutorials video helped more in
hey, for some reason my css code doesn't wanna apply on the html.... i checked for spelling errors etc but i cant find why it doesnt work ( when i tried to make my navigation bar i noticed that i couldnt see it in the browser) can anybody help me?
Have you checked whether you have set the href of the in the HTML correctly? BTW, the link for the source code is available in the description of the video. You can check that out.
Alright, now repeat that exact step for every screen size and every browser on every device. Then it might work. Probably would take ~200MB in css Styles alone, but who cares, right? Why not just copy the source styles, merge them and end up with a clean (and faster reachable) result?
![From design to code - HTML & CSS tutorial [ part one ]](http://i.ytimg.com/vi/hQCRU7hZldE/mqdefault.jpg)
Hi guys, check out my new class on Skillshare (Design An Image Gallery From Scratch Using HTML, CSS & JS - with Lightbox): skl.sh/3zc7zZS
Hope you find it useful.
Beautifully done. You've used some CSS tricks that I haven't seen before. I'll be practicing those immediately.
i guess I'm pretty off topic but does anyone know of a good website to stream new tv shows online?
@Dalton Dominic Flixportal :D
@Simon Dane Thank you, I signed up and it seems like a nice service :) Appreciate it !
@Dalton Dominic you are welcome :)
A true example of how one goes about creating a web site using Figma in the designing phase and then shifting over and creating the outline in HTML and finishing it off by using CSS along with the code generated in Figma for the final rendering. The use of the console and targeting elements using JavaScript is just icing on the cake. The way you seamlessly blended the art of using multiple platforms and articulated it to us folks is extraordinary. You are a genius !!!! I hope everyone that's learning web design stumbles on this 2 part series. So thankful for all your work. ))
Never imagined that a youtube video could be more informative than doing a course at any institute, you have done hard work in making this video and surely our prayers will be there for you .....thank you so much for everything you have done for us.
I'm glad it was helpful!
Hello Friend @@GTCoding
Where is the single (long length) video of this entire course? I mean, 1 long length video please....
This is such a gem of a tutorial; so many useful concepts covered in a single video. Thank you.
This is quite an exciting way to design. The only doubts I am having are regarding how many sizes of fonts and positioning references have been done with using pixles.
Making this website media responsive for different screens will be a challenge. I think using rems or ems is always better than using pixels, especially for font sizes
Thank you so much, this is the most helpful tutorial ever
Literally am going from using Ableton to soft and tNice tutorials helped trendously as a beginner. Thank you so so much for tNice tutorials!!
I'm new to website program + learning figma, thanks for your video, really help me to understand whats going on.
Thank you sooo much. There are so many videos on youtube, that are just taking up space and not really providing value. But your videos are worth their weight in gold. I am going to check out your website.
Man. Thank you so much. This was amazing. I just randomly picked the first of these two videos (html) to try to understand moving from figma to a website and this was SOOOO helpful!! THANK YOU!!
I hadn't learnt this much in my life.
know your basics course is just what I needed. Taking it a day at a ti so I can fully grasp the core of soft.
That's amazing. I didn't notice how I 26 minutes had passed
Excellent video. Learnt a lot. Knowing the fact that FIGMA or front end design is just a peace of cake. Actual work/pain start for converting it into Theme or HTML. CSS. Well Done...
Thanks :)
thanks alot bro, the best thing about ur tutorials is that u dont waste time and get to the point fast. stay awesome.
TNice tutorials one is really good, among all other basics videos
This is really great. Watched several other videos but this one actually walked through converting a Figma design to HTML/CSS.
Really awesome and so helpful! I’m very new to Figma and I appreciate your work so much... Cheers!
lovely.... perfect video for developer handoff in Figma. Thank you so much
I tell you!. This video help a lot getting my feet up and running with figma developer handoff. :pray
very nice...i startes soft soft learning.thank you so much....
Thank you so much for the tutorial. I am the beginner and I have been able to make my own website following this tutorial.
Glad it was helpful!
Amazing sir this is most helpful video for me
This was a great tutorial!
AMAZING!!!! What a class.. now its easy finish my project :D thank you
Hats off, King 👑👑!!!!
Dw bro ADHD helps out so much with soft soft i find. day dreaming always gives new ideas so when i snap back i got that vision ready
Learned a lot in such a short time. Thank you so much for the wonderful service.
Helpfull vedio,thanks
CSS you write is very clean, I like it :)
hello what an amaazing tutorial i really appreciate it i did everything as you did in the video and it works perfectly thank you so much once again:-)
yes very nice macbook
@@xacey_9100 YES
@@xacey_9100 yes very nice macbook:-)
This tut' is Gold 🙇🏾♂️ . Thank you so much
Great tutorial...I am going to use Figma from now on!
so I decided to give soft softs a try. I just subscribed to your channel
I think it's not pixel perfect. but its a great video I learned alot
You are a genius! Thank you for this!
Concise and awesome
super amazing, this video and your work is life saving for many. thankssssss a lot
You're welcome!
it worked! thank you so much!!
Nice video Bro.
nice content
Everyone, it's been a year since I ca to tNice tutorials video, and my progress is amazing.
Plz kindly make video on ride sharing webpage. Your all videos r best, easy to understand.
Great tutorial sir, thanks a lot
best tutorial on figma!!!
Hello @GTCoding
Where is the single (long length) video of this entire course? I mean, 1 long length video please....
Indians are really fantastic!
awsome. Congratulation! great tutorial.
Very helpful - thank you GT!
Very helpful, great work keep it up you have good future ahead
nice one
Thank u so mach much bro
Thanks sir!
That's great
This is a great tutorial. A question for you I have is setting it up to be responsive.
Obviously one way to do it is just to have media query breaks
But are there other better ways
Other than media queries you can use percentages instead of pixels, max-width or min-width instead of width. You can use vw (viewport width) and vh (viewport height) which updates depending on the window width and height.
You can also use Flexbox and CSS Grid to make a lot of the elements responsive. And you always have media queries if you can't do something with the above mentioned methods.
@@GTCoding Hello
Where is the single (long length) video of this entire course? I mean, 1 long length video please....
@@sudarshan_bhat I haven't created a single video of this series. I will try to combine them and upload it soon.
@@GTCoding Please do it Sir.
@@junaid757 Here is the link of the full video: ua-cam.com/video/DvaoYA3c_GM/v-deo.html
Thank you keep forward ☺
thank you so much
how do you stop the soft from chaning when you pick a guitar soft or so, it softs different when i test it out on the side and different
what do I do if my soft doesn't add up to the correct length of the loop? and I have so gap at the end because the notes aren't the
Thanks.
Nice Content, Good Job
im pasting the properties which im getting from figma but still i couldnot see those changes in the browser how to resolve this?
Helpful tutorial, Thanks
You are the god of UI... superb..
I follow the exact same thing and get a different result sometimes
why is figma then if we designing all the webpage in html css and js why we should design the webpage image in figma first and then take it as reference and build in html css and js from scratch
beautiful tutorial very comprehensive, is there anyway to copy past transition, transform, and z-index properties directly from Figma. i ve seen you manually set these properties by yourself. i mean doing it manually is a challenging job to animate pics
Very good video. Thanks!
Hey! Excellent and very helpful video. But I am curious where's the part III of this? As I was scrolling through other videos, I can't find it.
Thank you. Here is the link of the complete Playlist: ua-cam.com/play/PL0-e1OMq5RP4SspVeenLKzldN_IZhZKSy.html
Nich
Great content.
thank you very much, it helped me too much
personal note, 7:40 - notebook backround
10:45 button
Genius! Well done!
Is this ’Roboto’ font family the one which google has?
Can we add any templates in figma to know the css code
4:09 how can I turn on fixing code?
how about this real website to be exported to live server?
man i really learnt a lot from you today . thank you so much.
are you a teacher on skillshare?
I enjoy coding, working with JavaScript, React, Node, etc etc but I just cannot get CSS, I wish I was that good at it, but I know that will never happen because I just find it boring, and tedious! :/
at 10:52 you can see the margin from p tag to button is 32px at 11:46 you set it to 48px I don't understand why when I watch these videos no body uses the values on the design and just guesses? Is this really the standard of devs around the world?
im not sure what the purpose of figma is if you know html, css, and javascript. Can someone please tell me? I feel like this is duplicating the work.
How to make is responsive?
@9:20 why does changing the max-width to width pushes header items apart?
This was really helpful, so thank you for that, now lets say my website is one continuous page and ive got a clear divide between the pages, how exactly would I make it and link everything?
y you didn't copied width of nav-menu
I enjoyed this video. Thank you :)
Thank you so much!!!!
such a great tuto!
Super cool video! i learned alot. I remade this with vue but it's not very responsive for smaller screens and it's hard to tweak with media queries. Any tips?
Nice work man
how do you make it responsive?
1200px from where?
When u duit de nex? I santo to see what you'l do whith JS...
Hello, how do you make your website mobile responsive?
Great vid sir, Is it possible to create responsive website?
Hi, I have started a new series where I am designing a responsive one page website from a Figma design. Here is the link the playlist: ua-cam.com/video/56Hoo0M_uAo/v-deo.html
I don't get it.
What's the point of Figma if you have to write all the code manually anyway?
Seems so... unnecessarily tedious
Ok yeah that's the perfect word to describe it. I've been sitting on it for years and i'm just so intimidated by it. But tNice tutorials video helped more in
hey, for some reason my css code doesn't wanna apply on the html.... i checked for spelling errors etc but i cant find why it doesnt work ( when i tried to make my navigation bar i noticed that i couldnt see it in the browser)
can anybody help me?
Have you checked whether you have set the href of the in the HTML correctly? BTW, the link for the source code is available in the description of the video. You can check that out.
Alright, now repeat that exact step for every screen size and every browser on every device.
Then it might work.
Probably would take ~200MB in css Styles alone, but who cares, right?
Why not just copy the source styles, merge them and end up with a clean (and faster reachable) result?
this page is responsive?