Turning a Figma Design into a Real Website using HTML and CSS

Поделиться
HTML-код
  • Опубликовано: 16 ноя 2024

Комментарии • 87

  • @justindacosta3d
    @justindacosta3d 3 года назад +34

    This video made me much more confident in how often I have to google how the hell to do things.

    • @AdrianTwarog
      @AdrianTwarog  3 года назад +8

      i always have that tailwind website up ready to read the doco

  • @atvnbi
    @atvnbi 3 года назад +16

    this is how coding tutorials ought to be.
    I love you depict the real trials and errors encountered in "real life" coding and how to go about it.
    thank you Adrian 💓

  • @Jezza3110
    @Jezza3110 3 года назад +3

    You don't know how long I have been waiting for this ... Thank - you 😀❤❤❤

  • @irfanullahshakir3568
    @irfanullahshakir3568 3 года назад +6

    A straight forward video of how to play with tailwind.Really enjoyed it.Thank you!

  • @London2ATL
    @London2ATL 3 года назад +5

    You're a g for this Adrian, my company was looking for a WP developer to send some of our designs to and I told them about you but I'm sure you've got so many gigs.

    • @AdrianTwarog
      @AdrianTwarog  3 года назад +2

      only a few hundred or so, but I have a team that helps me :)

    • @London2ATL
      @London2ATL 3 года назад

      @@AdrianTwarog lol wow, if you know anyone that you can recommend please do.
      Keep up the good work.

  • @ideaplusagency
    @ideaplusagency Год назад

    I'm from Eastern NC. Grew up in Ayden, went to college in Fayetteville, and then lived in Charlotte for 13 years before moving to Atlanta. I've definitely heard of Shelby!!

  • @NeerajGupta-fy1bv
    @NeerajGupta-fy1bv 3 года назад +1

    Ohh my god I can't believe this channel doesn't have 1M subs.

  • @anon447
    @anon447 3 года назад +6

    Thanks for putting this video together! I was trying to use your Adobe XD to HTML video as a guideline. Just what I needed!
    Thanks Adrian!

  • @andreisimion8542
    @andreisimion8542 3 года назад +5

    Such a great explanation! Tailwind is really amazing!

    • @AdrianTwarog
      @AdrianTwarog  3 года назад

      thanks, its sort of how i go about building it

  • @coledrain2158
    @coledrain2158 3 года назад +4

    Not watched yet, but I know it would be great. I have been waiting for this for a while.
    Great work Adrian.
    Please more of this 🥺

  • @cheryljones3393
    @cheryljones3393 2 года назад +3

    I loved this. Exactly what I wanted, and so easy to follow. Thank you!

  • @Mohamed-fl9uv
    @Mohamed-fl9uv 3 года назад +2

    Thank you so much, Adrian. You are the real MVP

  • @nickwodzisz7615
    @nickwodzisz7615 3 года назад +2

    Awesome video, looking forward to the Javascript addition to this!

  • @webdevsshariful
    @webdevsshariful 3 года назад +2

    Please upload more of this type of project video. Please Please Please. Your design explanations help me a lot in becoming a front-end developer. Thanks a lot.

  • @CodingFire
    @CodingFire 3 года назад

    The design dude its awesome

  • @sibusisomathebula7231
    @sibusisomathebula7231 3 года назад +1

    Looks like our dream is slowly coming through

  • @MrStartupX
    @MrStartupX 2 года назад

    Awsm jst what i needed for my project. Thnx a tonne bro.

  • @pranav_zagade
    @pranav_zagade 2 года назад

    A straight forward, exact explanation💯

  • @young-kodie7311
    @young-kodie7311 2 года назад

    Thanks dude...It helps alot especially on beginners like

  • @pastuh
    @pastuh 3 года назад +1

    I will check for sure.
    It's like painting.., every teacher have different method :))

  • @yusefess
    @yusefess 3 года назад +2

    There are very few videos on RUclips about converting Figma design to code. If possible, publish more videos in this regard.

    • @AdrianTwarog
      @AdrianTwarog  3 года назад +2

      I’ll probably be having more in the future, I get a lot from my day job!

    • @travis_saldanha
      @travis_saldanha 2 года назад

      Yes please do this

  • @semdejong9849
    @semdejong9849 3 года назад

    Yes please do the react video, that would be awesome❤️

  • @starkrizwanali
    @starkrizwanali 3 года назад +1

    Love from india thanks for everything

  • @KennethFromSkarpt
    @KennethFromSkarpt 3 года назад +10

    This was very insightful Adrian! Well done, watched the whole thing. Is it normal to completely develop the design of the web pages before you start coding the logic with react?

    • @AdrianTwarog
      @AdrianTwarog  3 года назад +3

      Ideally yeah, i like to do design, html,css then finally react

  • @pradeeppawar3622
    @pradeeppawar3622 3 года назад +1

    Thanku for making this video ❤️❤️

  • @Supri_241d
    @Supri_241d 3 года назад

    Thankyou for sharing this video.. it's really very helpful for us😍😍🥰🥰🥰

  • @ryanmung3165
    @ryanmung3165 2 года назад +1

    Great Job! but I’m wonder how to keep consistent with the design because I always get stuck with it in coding. And in this video when meet these problem it just “look great” and go ahead even though it perhaps match the design.

  • @safdardahriwal7503
    @safdardahriwal7503 3 года назад +1

    Please upload more vedio about this topic thank you

  • @gustavomonte6672
    @gustavomonte6672 Год назад +1

    Think it would be useful to add 'Tailwind' on video title.

  • @douyebmehdi3267
    @douyebmehdi3267 Год назад +2

    why don't you use the plugins "figma to html" that already exist in figma instead of coding everyhting ?

  • @nyoreachoja2068
    @nyoreachoja2068 3 года назад

    This was great. Can you please do a video of making the design in Figma?

  • @anis213_40
    @anis213_40 3 года назад +2

    Can you make a video on how to get creative with the design or how to design website better, because I am a front end developer and when I try to design a website in Figma and convert it to html & css, I can't design a good website and the problem is not my knowledge of the basics of figma , the poblem is my use of colors , spaces , Typography...

    • @AdrianTwarog
      @AdrianTwarog  3 года назад +1

      Writing that up in Enhance UI :)

  • @neontuts5637
    @neontuts5637 3 года назад +1

    Thanks for the video, Which VS Code Theme & Font your using?

  • @kavinamaranayake
    @kavinamaranayake 3 года назад +1

    Sir,
    How can I create a website UI like Facebook web...?
    I'm in which framework I can use...?
    (Facebook web navbar, buttons etc)

  • @ravel1
    @ravel1 2 года назад

    Very nice video

  • @astratow
    @astratow 3 года назад +1

    Great stuff, although title could suggest that you use tailwind...
    Your surname suggests strongly Polish roots. Am I wrong?

    • @AdrianTwarog
      @AdrianTwarog  3 года назад

      Polish indeed, and yes tailwindcss drives the design

  • @yungxix6343
    @yungxix6343 3 года назад +1

    Thanks adrian for always coming through with amazing content, would love you to answer this question is it possible to host a website which was built with html, css and JavaScript on hostinger

  • @eshw23
    @eshw23 Год назад

    Hostinger has to be the shittiest sponsor now of days, why would anyone use that when you can host a website in 3 seconds with Vercel, but great video overall thanks!!! Learned alot

  • @ballonura
    @ballonura 3 года назад

    nice 4K content

  • @semiloreidowu4601
    @semiloreidowu4601 3 года назад +1

    Do you always style your UI screens in HTML & CSS before transferring them to React?

  • @pranavsoma8608
    @pranavsoma8608 2 года назад +1

    From where i will get images?

  • @learningstuff5679
    @learningstuff5679 2 года назад +1

    Hi, Adrian. Is Tailwind CSS an industry standard for front-end development? I just took a course 6.5 hour course on HTML and CSS and had never heard of it until now?

    • @MikeNeder
      @MikeNeder 11 месяцев назад

      I've been developing for a while and hadn't heard of tailwind prior to 6 months ago. And now it seems like I am hearing about it all the time from videos on youtube. so maybe it is gaining popularity. But still at my current job we don't use it.

  • @sejalmore63
    @sejalmore63 2 года назад

    Do you refer figma design's padding and margin and take accordingly into bootstrap ?

  • @MrEscmoba
    @MrEscmoba 3 года назад

    Mister Twarog, i have a tecnical question - why frontend developers can't create images on webp format for better google speed ranking? On ecommerce, a better loading time is very hard

  • @Powerplugz
    @Powerplugz 2 года назад

    Hey there, I am launching a social platform for entrepreneurs. I was originally going to launch on Azure Devops but feel there could be an easier method to hosting and defining relationships between user actions across site depending on "role" (such as user or creator). Aside from Hostinger, what platform/host would you advice for such a big platform.
    Look forward to hearing back,
    Jack

    • @Powerplugz
      @Powerplugz 2 года назад

      Do you have a tutorial on React?

  • @anonymoussloth6687
    @anonymoussloth6687 2 года назад

    How can I make it generic so that if I have a dark mode version and want to switch between that as well? Will it be easier in react?

  • @andrewinim9342
    @andrewinim9342 3 года назад +1

    When can we expect the book.

    • @AdrianTwarog
      @AdrianTwarog  3 года назад +1

      I'd say its 66% done, maybe a bit more :)

    • @andrewinim9342
      @andrewinim9342 3 года назад

      @@AdrianTwarog I'm a developer, but i just never had a eye for design, because i never learnt the principles of design, I've watched a bunch of your videos and i believe your book can change that. Waiting patiently.

  • @manuelamutiu4929
    @manuelamutiu4929 2 года назад

    Hi Adrian! Is there any possibility to import a web design in Figma and to redesign it?

  • @methaguide
    @methaguide 2 года назад

    softs work like tNice tutorials one just did. I saw the sequencer at the start, but it would quickly disappear (I never knew about 'detacNice tutorialng'

  • @PhamQuynhPhu1945
    @PhamQuynhPhu1945 2 года назад

    NICE :)))

  • @daryndandessov7181
    @daryndandessov7181 3 года назад

    Thank you man!!! Like and subscribe!!!

  • @nxone9903
    @nxone9903 2 года назад

    html and css is not code bro

  • @acetheexamsR18
    @acetheexamsR18 Год назад

    MR BEAST??? 🤯🤯😱😱💀💀

  • @CreationVal
    @CreationVal Год назад

    6:46

  • @yuvrajchhatwani
    @yuvrajchhatwani Месяц назад

    Ai is shit it can't turn my website into code 😢

  • @waseemusman421
    @waseemusman421 3 года назад

    @Adrian Twarog Plz contact me ASAP

  • @DanYT92
    @DanYT92 3 года назад

    Lost time....

  • @Icedanon
    @Icedanon Год назад

    i skimmed your hour long video and it looks like you didnt open figma once. is this some kind of joke?