I Design A Website In 20 Minutes

Поділитися
Вставка
  • Опубліковано 16 лис 2024

КОМЕНТАРІ • 937

  • @developedbyed
    @developedbyed  5 років тому +1080

    We a yoga channel now.

    • @chien3839
      @chien3839 5 років тому

      😜😜😜

    • @mdmahmudulhasan6448
      @mdmahmudulhasan6448 5 років тому +10

      Sorry to say,, what software u use for this design

    • @serioussam9400
      @serioussam9400 5 років тому +3

      Thanks Dev Ed

    • @sainath66666
      @sainath66666 5 років тому +37

      @Dev Ed Dude I strongly believe you did practice this before doing this, if you stop at 3:11 you can see that he already had the same webpage in the google chrome peek view in the taskbar
      WIth the same exact pic and color.
      Anyways your work is great!!!!!!

    • @franz1533
      @franz1533 5 років тому

      hi, are you from Romania? xd

  • @archimidiz
    @archimidiz 5 років тому +1643

    I thought he was actually gonna code it

  • @slunkeh
    @slunkeh 5 років тому +1403

    at 3:11 mins you can see he already had it designed in a seperate chrome window ;)

    • @anycolouryoulike9160
      @anycolouryoulike9160 5 років тому +103

      What's up, guys. This is Joey Salads and today I'm going to design a web site in 20 minutes or less.

    • @ozzyfromspace
      @ozzyfromspace 5 років тому +229

      That sucks, I was so impressed. He pretended to spontaneously find the yoga girl 😞

    • @bashovski
      @bashovski 5 років тому +35

      get rekt

    • @toldfable
      @toldfable 5 років тому +49

      Wow, eXposEd...

    • @vixtorocha
      @vixtorocha 5 років тому +110

      yikes I almost subscribed

  • @ozzyfromspace
    @ozzyfromspace 5 років тому +597

    3:10 respect points lost = 5000. You designed the whole thing ahead of time 😞. The search for yoga girl was staged, this hurts.

    • @venzeti
      @venzeti 5 років тому +26

      Exposed

    • @paininmydroid4526
      @paininmydroid4526 4 роки тому +3

      Wow.

    • @nrapiera
      @nrapiera 4 роки тому +12

      And he still struggle to make it in 20 mn

    • @MyFukinBass
      @MyFukinBass 4 роки тому

      The font-awesome didnt tho

    • @abinasha543
      @abinasha543 4 роки тому +6

      @@nrapiera he could've if he wasn't explaining to us

  • @faizanali5435
    @faizanali5435 5 років тому +441

    Tools that he used in this video
    1. Affinity Photo (Photo Editing Tool)
    2. Figma (UI/UX Designing)
    I just Love Your Videos. Make More Awesome Website Designing Videos.
    Waiting..................

  • @rafasantos23
    @rafasantos23 5 років тому +1072

    Now make this same website with Html and Css in 20 minutes hehe

    • @visusmedia5273
      @visusmedia5273 5 років тому +43

      I was about to say that

    • @mr_kamuran
      @mr_kamuran 5 років тому +43

      20 is too much

    • @ryry6145
      @ryry6145 5 років тому +1

      ez

    • @hafohaf
      @hafohaf 5 років тому +17

      I was to about to say that xdd btw to much ? I want see your potatoe in 20 min

    • @aymadkhan7771
      @aymadkhan7771 5 років тому +67

      just add a nav bar and then take a screenshot of that design and add to your website and add a button on that pic for download and you will be done in 10 minutes hehe

  • @randomdude0
    @randomdude0 5 років тому +248

    Selection of photo looks so natural :D but you have already planned everything 3:11 chrome

    • @heyramineni
      @heyramineni 5 років тому +2

      Good catch!

    • @JudeCornish
      @JudeCornish 5 років тому +5

      Very good spot with the (1) on the filename!

    • @aminekarimi8379
      @aminekarimi8379 5 років тому +10

      Thats what ive noticed too haha he's trying to make this video like a realtime creativity but in this frame he had the design already done in Figma ! Wow

    • @GerardoBecerra597
      @GerardoBecerra597 5 років тому +9

      I was going to coment that I was amazed at how some details fit and worked perfectly together, like the waves with the body posture and the color of the buttons with the gradient of the circle for a supposedly spontaneous design haha.

    • @mynameisgleeriplaypiano4620
      @mynameisgleeriplaypiano4620 4 роки тому +5

      The acting was so natural

  • @vu4991
    @vu4991 5 років тому +235

    3:30 - *Suggestion* -> Use www.remove.bg website to remove the background. it is very very accurate

    • @bubadibaka2974
      @bubadibaka2974 5 років тому +1

      Thanks

    • @christophervistal5070
      @christophervistal5070 5 років тому +1

      Thank you!

    • @momitsacat914
      @momitsacat914 5 років тому +2

      thank you so much now from now i stop using Ps

    • @karamfd
      @karamfd 5 років тому +1

      They recently launched a desktop app so you can use it offline.

    • @Xomoda
      @Xomoda 5 років тому +2

      This one works great, too: www194.lunapic.com/editor/?action=transparent

  • @AK-Star007
    @AK-Star007 5 років тому +138

    real time or not, i learned alot, thanx

  • @w0wg0g0
    @w0wg0g0 5 років тому +198

    Maybe do one that is not staged? 3:10

    • @bowrawie277
      @bowrawie277 5 років тому +12

      I WASNT THE ONLY ONE WHO NOTICED THAT

    • @ozzyfromspace
      @ozzyfromspace 5 років тому +22

      Fakes hurt the community 😭

  • @vinniehat
    @vinniehat 5 років тому +40

    Disappointed. Didn't actually code it, but thats fine you said design.
    Respect was lost when we saw it preplanned.

  • @rphuntarchive1
    @rphuntarchive1 5 років тому +9

    Of course we're lacking a mobile version. And it would be interesting to see you code this now, especially w/o using a giant background image.

  • @BoostedBoi
    @BoostedBoi 5 років тому +14

    My favorite channel! I got a lot better at HTML and CSS just watching 3 videos so thank you so much!

  • @imvirpil
    @imvirpil 5 років тому +6

    Can you continue to make this into a tutorial series please? I would love to see this in a website where you can interact with the buttons, or can Figma only export it as a png?
    If you continue this, can you make another time based challenge for yourself? I'd love to see how much you can achieve.

  • @i_m_veer_singh
    @i_m_veer_singh 5 років тому +7

    Love your content and especially your enthusiastic way of delivering it.
    CAN YOU PLEASE MAKE A VIDEO TO CHANGE THIS DESIGN INTO A WEBSITE/CODE. It will be something to follow along to close the project. Thanks

  • @Pegglez
    @Pegglez 4 роки тому +1

    The title clearly says DESIGN and not CODE. So idk why some of you were expecting him to code an entire website in 20m?

  • @miletadulovic577
    @miletadulovic577 5 років тому +194

    3:11 I mean.. C'mon buddy

  • @iclapcheeks
    @iclapcheeks 4 роки тому +9

    "What do people use these day? Font Awesome??"
    apple already in the search history..
    What a player.

  • @kamalhm-dev
    @kamalhm-dev 5 років тому +15

    How would you go on after this, what's the process looks like after you have a design, and then create the real website?

    • @JakeTilk
      @JakeTilk 5 років тому

      Kamal Mahmud you use html, css, and JavaScript to make it

    • @canvaapplessons1224
      @canvaapplessons1224 5 років тому

      Why tf did he create this then?

    • @JakeTilk
      @JakeTilk 5 років тому +2

      @@canvaapplessons1224 Usually UI/UX designers don't actually know how to code. They make the design and then the other department will code it.

    • @MrNiraj43
      @MrNiraj43 5 років тому +1

      @@canvaapplessons1224 this is the work of ui/ux designers. Then front end developers had to code it in html, css etc.

    • @canvaapplessons1224
      @canvaapplessons1224 5 років тому +2

      Front end developers know it all. If not, they're not front end developers.
      This is just a redundant, useless piece of crap. A rough sketch would be enough, if at all you need one.

  • @sperniac1274
    @sperniac1274 5 років тому +29

    After u design a site, u try to give it life in Html, js, css?

  • @froopi2
    @froopi2 4 роки тому +17

    "Who speaks French these days?"
    French people- are we a joke to you?

  • @parthkumarchaudhary
    @parthkumarchaudhary 5 років тому +2

    Oo Man it okay if your camera is old.
    Because "OLD IS GOLD".
    Love Your Tutorials.
    Thanks man.

  • @TheCrazyKenshin
    @TheCrazyKenshin 4 роки тому +13

    I like his videos and I really appreciate that everything is planned, but acting as it is the first time searching for the picture etc. is just silly ...

  • @NoBrainerLanguages
    @NoBrainerLanguages 4 роки тому

    My favorite tool for dev: Notepad++. Unfortunately, it takes a bit longer than 20 min when you literally have to hardcode every bit of your website. You've got some really good implicit tips in this video, actually.

  • @nGryTV
    @nGryTV 5 років тому +16

    I speak French

  • @shriya3265
    @shriya3265 5 років тому +1

    You never bore in your videos and make web development more fun! I am loving your videos.

  • @adamtak3128
    @adamtak3128 5 років тому +10

    Any chance of getting a full react project series? It's probably waaaay too much but I thought I would ask anyways haha

  • @Iamtechboy
    @Iamtechboy 3 роки тому +1

    this is the first video I ever watched about design now im pretty good at it ,, and watching it again gave me a really really good feeling 🥰

  • @AhUzzol
    @AhUzzol 5 років тому +21

    "That was tough, I am not gonna lie!"
    You lied but still love your video.

  • @kieranosgood3297
    @kieranosgood3297 5 років тому +1

    I love these kinds of videos tbh, not much of a designer and just pretty good at converting designs to html/css, enjoying seeing some process to give me ideas :)

  • @alperenozkan
    @alperenozkan 5 років тому +3

    I really liked your tutorials but in fact, I prefer to see this tutorial's second part like implementing this design to the code.

  • @sayedmisbarizvi2524
    @sayedmisbarizvi2524 4 роки тому +1

    you are a great person i mean humble even when someone talk you badly......(fiverr 5$ website) i follow you....like you too!

  • @SonsofYe
    @SonsofYe 5 років тому +35

    I liked your way, It's new way on youtube, in 2020 you will got million subscript

    • @indianathe3rd742
      @indianathe3rd742 4 роки тому

      Unfortunately ppl that's not the case but I think he's fine his type of content makes revenue better than those for entertainment

    • @indianathe3rd742
      @indianathe3rd742 3 роки тому

      @@faikburakersoz4562 it's actually nice and clean did you use react?

    • @sudoalex
      @sudoalex 3 роки тому

      Subscript lmao

  • @ujjawal5923
    @ujjawal5923 3 роки тому +1

    your first impression on me is the clarity of ur video.....

  • @tijanimoro6528
    @tijanimoro6528 5 років тому +9

    please can you give us the HTML , CSS version

  • @ahmedshalaby992
    @ahmedshalaby992 3 роки тому

    you've such a cool, useful, self trusting, outstanding personality, Dev! well done and you got yourself a new subscriber!

  • @ArjunSarthi
    @ArjunSarthi 5 років тому +3

    @6:35 .."She Can be a Monkey"....died laughing bro...I love your videos..Addicted...:)

  • @nikhilb3880
    @nikhilb3880 4 роки тому

    Once you have an idea of how the website looks like, it doesn't take 30 mins. But the idea and refining those ideas take a lot of time

  • @canvaapplessons1224
    @canvaapplessons1224 5 років тому +4

    What was that? A website? Everything was an image.
    I could do more or less same thing using PowerPoint, but where would I use that?

    • @BlueWhaleYT
      @BlueWhaleYT 5 років тому

      This is only a image of the web design to prepare to do it with html,css and javascript of you.
      That's no any function.

    • @canvaapplessons1224
      @canvaapplessons1224 5 років тому

      實況主藍鯨[BlueWhaleStudio]
      Can you pay me a few bucks? I will make you practice English with me.

  • @mattiashorvath9865
    @mattiashorvath9865 5 років тому +2

    buy the x-t3, much better image quality for video. body and lenses are also much cheaper then the a7m3.
    but the most important thing is for me usabillity, i love the x-t3 and its customization.
    i switched from sony to fuji a couple of months ago :)

  • @niemurrahmanemon7876
    @niemurrahmanemon7876 5 років тому +3

    Video Request :
    In this video you just showed how to design but how can I implement that in the webpage.

  • @kieran1990able
    @kieran1990able 4 роки тому +1

    Simple yet looks pro. Damn man you are quick.

  • @josephpopoola1194
    @josephpopoola1194 4 роки тому +3

    😂😂😂
    I couldn't stop laughing at your jokes but at the same time that was a good job. 👏👏
    Yikes, here is your Grammy Award. 🤭😂

  • @pouyaabbasi
    @pouyaabbasi 5 років тому +1

    I saw all of your videos, but this one forced me to subscribe!!!

  • @vu4991
    @vu4991 5 років тому +6

    i appreciate this website design videos but please do videos where you actually create a working and responsive website from scratch. website that you have designed using this software.

  • @cube.9816
    @cube.9816 5 років тому

    am watching this in 1.25 speed and its HILARIOUS!!
    btw Ed please make a video on how to create these designs in HTML/CSS pleaaase!!

  • @majklzumberi1761
    @majklzumberi1761 5 років тому +33

    Nice vid, Can you replicate this in HTML?🐻

    • @iamwhatiam1221
      @iamwhatiam1221 5 років тому

      check my comment. share some views on it. i am new.

  • @bunnyrivard5248
    @bunnyrivard5248 4 роки тому

    Why are people getting mad that he already designed it? Obviously he had to practice, he was just showing how much time things take to be done, the thinking process takes longer, that’s not his problem.

  • @zariously1401
    @zariously1401 5 років тому +4

    A web dev pewdiepie 😂😂 i like this guy. Like the way he enjoys his doing 🤣🤣

  • @fvgoya
    @fvgoya 5 років тому +2

    Awesome! Will be good if you can do more videos like this one and also code it. Thanks man!

  • @sivamylapilli9497
    @sivamylapilli9497 5 років тому +30

    My gorgeous friend on internet Dev😉

  • @sddhrtha
    @sddhrtha 4 роки тому

    I dig how he's comfy with his low self esteem. Bruh, you good af.

  • @kurotenshi67mugenprogrammi57
    @kurotenshi67mugenprogrammi57 5 років тому +11

    "Who speaks French these days?"
    Tout à fait d'accord lol

    • @ihcenegourari
      @ihcenegourari 4 роки тому

      Bah les français parlent le français ces jours xd

    • @BenMelluish
      @BenMelluish 4 роки тому

      I've heard the French are quite fond of it.

  • @bhavikkalariya4836
    @bhavikkalariya4836 3 роки тому

    I can understand. Some videos must be pre planned in order to make it perfect. I totally agree. Nice video. I am seriously appreciating your work. I really learned a lot from you.

  • @sidharth5665
    @sidharth5665 5 років тому +7

    I'll take 20 mins just to select the images 🤣🤣

  • @Thanveershah
    @Thanveershah 5 років тому +1

    Tell us what did you do to your hair? Clean AF 🙌

    • @developedbyed
      @developedbyed  5 років тому +4

      Washed it lol

    • @Thanveershah
      @Thanveershah 5 років тому

      @@developedbyed Yai Boiii lol , Good tutorial btw, Keep up the good work sir

  • @bassamazizi7505
    @bassamazizi7505 4 роки тому +3

    Amazing job, I laughed a lot man Okay I learned a lot as well ;) Thank you ))

  • @kelvinsixtus3646
    @kelvinsixtus3646 4 роки тому

    I was watched because I was curious on how you were going to code in 20mins they I remembered you said design. Nice work

  • @adamsandler4364
    @adamsandler4364 5 років тому +6

    When I read the title "I designed a website in 20 minutes", a thought You will code it. :/

    • @BoisNation
      @BoisNation 4 роки тому

      adam sandler Well, designing is different from coding, right? However, I would have preferred if he coded it.

    • @adamsandler4364
      @adamsandler4364 4 роки тому

      @@BoisNation You are right! :D

    • @BoisNation
      @BoisNation 4 роки тому

      @@adamsandler4364 Really? I thought you'd get mad at me for saying that. But yeah, I would have preferred it coded 😀

    • @adamsandler4364
      @adamsandler4364 4 роки тому

      @@BoisNation why would I get mad? :D

  • @TheCookieMuncher96
    @TheCookieMuncher96 5 років тому

    Loved the video, its nice to know that I'm not the only one who keeps second guessing what I'm doing when designing lmao. It would be interesting to see how you would go about planning and designing a real website with a normal timescale.

  • @atheistcrusader1160
    @atheistcrusader1160 4 роки тому +4

    3:10 that's a curb meme right here

  • @pushkardeotale3019
    @pushkardeotale3019 5 років тому +2

    Love your channel man, makes me wanna work on my website every day.

  • @asiangamer4251
    @asiangamer4251 5 років тому +3

    No coding ? Just graphics how to post it and make it working ?

    • @kellthusad
      @kellthusad 5 років тому +2

      Make it your own project then, and look at it as a form of an exercise to make this design a fully functional web page. The best possible way to learn this kind of stuff is to get your hands dirty and start doing it on your own. Its going to be hard at the beginning but trust me, that is the only way. And since this is pretty easy it makes the perfect proj. for a beginner

  • @bowss111
    @bowss111 4 роки тому

    Man I like this guy's energy.

  • @mobarakjama5570
    @mobarakjama5570 4 роки тому +6

    3:10 😭😭😭 I feel betrayed 🤮

  • @hcm4019
    @hcm4019 4 роки тому

    This is my career goal. Front-end web dev , UI/UX + Graphic design :D

  • @junaidbinkibria9403
    @junaidbinkibria9403 5 років тому +3

    "Your new friend that make you relaxed." HAHAHAHAHAHAHA

  • @Jayjay-cg2in
    @Jayjay-cg2in 5 років тому

    Great video! Next time can u do a long one page website? Like one where you can scroll down. I really love your designs and i really want to see how youre going to do something like that. Thanks!

  • @tripulante404
    @tripulante404 5 років тому +4

    I thought you were going to write the code in 20 m

  • @Phoca_Vitulina
    @Phoca_Vitulina 5 років тому +1

    I love your design videos! Please keep them up :)

  • @ManishSingh-nx6lq
    @ManishSingh-nx6lq 5 років тому +5

    You look like floki a Vikings character.......and your behaviour is also very similar to floki.

  • @awwabientg4845
    @awwabientg4845 5 років тому +1

    Ok,so i noticed something a bit weird. On an old video (1 week ago) Dev ed created a python bot for twitter which gets him, followers. While he was installing geckodriver which is something you need to use this bot he went through his files and folders and one of the folders i noticed was Riot games which implies that he actually plays lol (league of legends for the normies). Dev Ed plz reply wats ur rank and main

  • @anshikgupta2993
    @anshikgupta2993 5 років тому +6

    I thought this gonna be html css Javascript

  • @dailydoseofchocolate9411
    @dailydoseofchocolate9411 4 роки тому

    can you make a video about how to code it too? and maybe design and code a website for desktop tablet and phone? would appreciate it. thanks for teaching us.

  • @PappuShankar
    @PappuShankar 5 років тому +3

    #Dev Ed... Hi can you post some video in parallax effect using multiple images. Its might be very helpful for me.. thank you..

  • @MoAmeer
    @MoAmeer 5 років тому

    Bro if you just searched for “apple store button” you will find the whole brand in their website open to use and you could save like 4 minutes 😄
    For the camera i do recommend you to get a Sony A7s III; it’s just the BEST
    ✌️

  • @nikolastojanovic5623
    @nikolastojanovic5623 5 років тому +3

    You designed Slider and Navigation in 20 minutes ...

  • @jeffersonestevam5960
    @jeffersonestevam5960 5 років тому

    hey i'm brazilian and i really like the content of your videos and the natural form that exposes them! surely this channel will grow a lot! can you talk a little bit about nodejs workers? I found some videos explaining, but very superficial, I hope your next video! Thank you.

  • @ivanesamson5286
    @ivanesamson5286 4 роки тому

    Hi sir, what application did you use it there? I really love it!
    Thank you so much!!

  • @dangchinhle
    @dangchinhle 5 років тому

    For auto-focus, just go with Canon, 80d is a good choice for awesome autofocus with cheap price, for more expensive u can go with canon 6d or 5d3 and etc

  • @edsonsilva-id1sx
    @edsonsilva-id1sx 4 роки тому

    Pretty good design, dude. Congrats!!

  • @cybermats2004
    @cybermats2004 5 років тому +1

    So I need to learn this when I want to program Websites?

    • @mik4466
      @mik4466 5 років тому

      no, for design

  • @drawbu_
    @drawbu_ 3 роки тому

    ed: "who speaks French these days?"
    me: "c'est pas très gentil"

  • @roadperk
    @roadperk 4 роки тому +1

    My favorite youtuber and teacher!

  • @majesticknight3189
    @majesticknight3189 5 років тому

    Is it essential to learn Graphics design to become a web designer?

  • @yoezerdorji8204
    @yoezerdorji8204 4 роки тому

    one of my best tutor.
    my best online UA-cam Channel

  • @kentakeias9162
    @kentakeias9162 4 роки тому +1

    I was waiting for him to say "now let's head to atom" or vscode

  • @peluso_palit
    @peluso_palit 5 років тому +4

    I love when you're laughing. 😂
    Please can your do Power Point animated tutorial?

  • @Svetoz
    @Svetoz 5 років тому

    Canon camera with DualPixel technology is much better with auto-focus ;) recommend! it's really convenient

  • @TeckFlyer
    @TeckFlyer 4 роки тому

    the title of the video should be, I design a hero section in 20 minutes

  • @sohaibshaikh7208
    @sohaibshaikh7208 5 років тому +2

    Can u make a video on larvel for PHP...how to use and many more about it??

  • @jaya3688
    @jaya3688 4 роки тому

    Really enjoyed this. You enjoy what you do. Thanks

  • @shashgo
    @shashgo 5 років тому

    Hello, Wonderful videos. Can you show step by step how to make an ecommerce site that we can create on own machines and then when everything is finalized, we can upload it to a website to make it go live on the internet? Also, is it advisable to use a CMS system like wordpress, or just go at it from scratch?

  • @iamwhatiam1221
    @iamwhatiam1221 5 років тому +1

    @dev ed
    i am new web des/dev...i kind of get the point of making this as a reference to show someone...but i can make it in html css in kind of same time..so i just need to know what was the point of making a website template like this?
    sorry...in advance....im lill nervous asking all this. but i am confused.

    • @TheSumitBanik
      @TheSumitBanik 5 років тому

      It acts as a prototype. By the way, in Adobe XD we can export it to HTML format,too.

  • @andrekeidel6414
    @andrekeidel6414 5 років тому +1

    I bought a book about html and CSS but why would I use html and CSS if even you as a professional uses this ?

  • @vircaecilius
    @vircaecilius 5 років тому +2

    I am learning a huge amount from your videos, so thanks. Could you please show how to animate an SVG image in an HTML webpage with css and /or JavaScript where both the css Stylesheet and the SVG file are external to the page so it could' for example, be differently animated on separate pages of the website. I seem to be only able to succeed when the SVG code is placed directly in the webpage itself. That would be great!

  • @Sauceonspill17
    @Sauceonspill17 3 роки тому

    I have a question: is it better for me to design website with wix or do it this way then bring it to life through back end coding? Which way is more efficient? Am I able to make cool UI designs using wix etc? (Saving me time on coding)

  • @AndreWilliams876
    @AndreWilliams876 5 років тому +1

    U should code this now bro. I’d love to see that

  • @manishasardiwal6105
    @manishasardiwal6105 4 роки тому

    Plss make a video on prototyping how navigation bar works after prototyping

  • @adamwright6284
    @adamwright6284 4 роки тому +2

    Thanks Ed. Great work, great content! I would love to see some more Greensock 3 animations - more so, animating accross different viewports with JavaScript.
    Example: you use media query’s for different screen sizes. For instance you have let’s say a grid of 6 boxes with just images. For large screens they they slide in up but on small screens they slide in from the left or right, if you understand that.
    How would you create the animations for different viewports using just JavaScript?