I Design a Website In 10 Minutes

Check out my courses to become a PRO!
developedbyed.com/
In todays episode we are going to be using a technique to improve your skills. We are going to be designing a website in 10 minutes to quickly prototype and come up with ideas on the spot.
🎁Support me on Patreon for exclusive episodes, discord and more!
/ dev_ed
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
#design #webdesign

[@developedbyed]

Hit like if you love the floor

[@MaxProgramming]

64th Liker. Lol. BTW, pls make some tutorials on real world React project

[@fire_boat]

floor gang

[@MohsenFarajYT]

FLOOR GANG!

[@tychobrouwer8485]

Thats what a ceiling ganger would say

[@everythingisreal4252]

May be we can have a 10 mins video on how to create an HTML and CSS - Template for Emails

[@eduardoluisrl]

A restaurant with a burger logo, advertising asian sensation, bringing Italian food with a picture of an Spanish paella, i loved this video 😂😂😂

[@dendenmangubat]

Wow democracy

[@dandrevs]

@edu 25 brought to you by 'chef Ed the chef'. :D

[@Drakan21]

Just slap "Bistro" on the end, and you're good to go. 😂😂😂😂

[@eduardoluisrl]

@@dandrevs hahaha

[@aura_a.]

lol

[@xXxTheBogdanxXx]

title: design a website in 10 minutes actual content: Ed struggling with pen tool for 10 minutes

[@rwx4096]

Bogdán true

[@mkroven]

If u r one man, I believe this is the hardest part. Rest is html/CSS. And Ed shows he has balls to try it on cam.

[@xXxTheBogdanxXx]

@@mkroven i totally agree 😁

[@henriherrera9744]

@@mkroven That's true bro. Not everyone is willing to record a video and upload it without anything prepared.

[@asantisibomana3]

exactly even me i see it, this man should improve his knowledge on web design instead of struggling with pen tool for 10 minutes

[@codito7388]

It could be good to make a tut of transforming a design to html css just to see the steps.

[@MaltheHave]

I agree (:

[@santra528]

Yes. Good suggestion 👍

[@one_byte_nodirbek]

Before build html page, it is better design first. Because without design, html will be ugly...

[@TheJogurat]

Ed and WebDevSimplified actually have a two part series on exactly this! Ed did the design, and WDS implemented it in HTML/CSS. I'm sure you can find the videos by searching YT.

[@codito7388]

@@TheJogurat I Believe that dev ed could make the tut better. I saw it from WebDevSimplified and i ddin't like.

[@Jayjay-cg2in]

Would be cool to see a video ahere you convert this design to html and css. Great videos Ed!

[@Blogone100]

If you want to find PNGs faster you can open the "Tools" menu in google images, then in the color submenu select "transparent"

[@gheorghitacristea5750]

Asian Sensation. Then the subtitle is "Quality Italian dish" LMFAO

[@carlo9336]

and logo is a burger

[@briandesign]

nice and simple! Would be dope to see any new website designs added to your course!

[@leouzk9196]

Keep doing these quick videos, i really liked this one!

[@Amilkez]

You just opened my mind with the way you change the color on vectors!

[@__abshir]

one of my favourite KZbinrs 👍🏾 I'm going to give this a go, even though I personally find it soooooo hard to make design decisions. I only recently began dabbling in design 😬

[@oluwafemioyepeju2250]

I'm focusing on the design and with the little time you had, its awesome 👊

[@mrbranmar]

I love how you push boundaries with the shapes. I feel like most would just erase the shape and use the default image

[@rutvikshah4589]

It took me 10 minutes to open my laptop 😅

[@volttideify]

Don't disgrace my old laptop like that 😒

[@Grython]

5400rpm HDD master race unite!

[@DuyTran-ss4lu]

and 10 minutes more to open the app :)

[@Frankslaboratory]

Thanks for teaching us Ed

[@modeal317]

0:15 because.. FLOOR GANG. FLOOR GANG.

[@confusedparticles]

Zanmai Hanabi I see u are a man/woman of culture as well

[@siva6137]

FLOOR GANG OH! FLOOR GANG OH!

[@kushagraacharya6279]

AWOOOOO AWOOOOOOOOO AWOOOOOOOOOOOOOOOO

[@tepesalexandru7855]

Wow your website looks stunning!

[@michaelwiginton8587]

Nice to see the thinking process.

[@Xkill89]

I love this! Even when I have an internship right now, alone... I still have trouble coming up with ideas and following through with them tbh 😅

[@atulpandey0826]

@Dev Ed = fun + magic tricks + new way of teaching + amazing content +...... much more Awesome video

[@jhqcat]

You are the best Ed. Great video!

[@Danachew]

Honestly that's better in 10 minutes then what I could do in an hour LOL. I had sort of a random suggestion for you going off this, it might be fun if you give us a design and we have to code it from scratch or maybe like a design prompt (a fake business looking for a website with some basic specifications) and then we have to come up with a design for it. One of the biggest problems I have with trying to strengthen my coding and design skills is just coming up with ideas.

[@vip007ad]

i love this video, this is a way you can learn designing, just follow and prictice. I would love to see more videos like that! thanks. Subscribing you!

[@naitikkathiriya]

it's so beautiful explaination by you brother... i haven't pigma software bcz there's only photoshop, illustrator and XD in my syllabus! but as a designer i watched this video despite not having such programme.. bcz just have to watch color combination, font style, composition of shapes etc . as we are web designers.. so i watched this..thnx,,, well done bro✔👍

[@shreysaxena9840]

You are my favorite seriously ❤️❤️❤️❤️

[@devyoma]

Really love your sense of humour... Cheers to my best youtuber :)

[@mrmellow5484]

Your literally the best dude. I watch your videos just for entertainment lol

[@thatcoul]

I no longer watch you for the tutorials alone but also in my bad days you funny guy 😂

[@aaronflowers5395]

I love this guy!! He makes my day!!! Great teacher as well!

[@louispg3114]

So cool, you should do more vidéo like that !

[@ericgoerens425]

This is a really cool idea !

[@tryfanevans7047]

I love how in the thumbnail it just shows you looking at your wrist without a watch.

[@AnirudhIsOnline]

The website looks clean 👍

[@remax110]

You are so hilarious. I love your energy.

[@doublejjification]

Awesome desktop background!

[@mathewsmulambia8804]

Wow ed..im happy to see your video...its been a while...its good to be creative..

[@kamalouiguemmane4371]

One of my best guys on KZbin ❤

[@dhiopalem]

It's nice and clean man

[@WorldHighlighted247]

a special thank you to the sock for taking all those shots, and still being able to provide quality content!

[@jiminshi_bts_]

It was really amazing thank you sir 😊❤

[@rymbouchetara1066]

Hey Ed! Could you please do a video about browsers support, an example of HTML and CSS website that looks good on edge and internet explorer? You would become my eternal hero xD you're already a great hero btw, thanks for everything!

[@KylePrinsloo]

Wow this is cool :) You got far in 10 min! Nice one

[@FurkanGulsen]

Ed, you are full fullstack 🔥🔥🔥

[@nzundemessien]

you fosure know how to make design cool, you are one interesting youtuber, thanks for your videos, they really help

[@ShinigamiVivi]

Yaaas!! More web design videos!! 👩‍💻

[@chorko696]

Oh, how I like to hear the "Oh my gorgeous friends on the Internet".

[@DuyTran-ss4lu]

You're so good, Ed.

[@Heading370]

I would love to see a design for a career page!

[@rubencifreschunke5829]

How would you do a real estate website? I'm learning about web design with KZbin. And you are helping me a lot Thanks for your videos :)

[@bastianeichenberger]

I'm sure our awesome developer master is already aware but - if you simply click (instead of click and drag) a text box, you don't have to resize the blue box as it is automatically adjusted to fit the text content.

[@kaytesun6447]

Ooooh I wanna try this! I just started Figma though so that could be a wreck but I love it

[@louisethomas8437]

Haha... Ed you are so funny! Love your channel! I signed up for your DevelopedByEd course.. loving the content! Thank you! Would love you to do lessons using Python/Django.

[@robertudrea]

A iesit misto, ai putea sa faci te rog un tutorial cu ce chestii poti sa mai faci in Figma?

[@rivomananamandaniaina5193]

Good Morning my gorgeous professor on the internet :-D thanks for keeping me employed

[@mayagoldy]

hello! im new at all of this and i really not only enjoyeed this video but also learned a lot from it! thank you! i really wished for you to do a full tutorial about figma and how to translat it to a code file ( html\css )! one question please - how can i change a specific color at an image to another like what you did with the burger? i cant seem to find the tab you used it

[@delllatitude299]

A section = a Website.......... Seriously ? Keep Going

[@chilly1g]

I love it how you have same OCD problems as I do, you couldn't leave "Ed" by himself in a row :D

[@helluci6449]

Quick Question: If you design like the background and sutff, how to do manage to code them too? For example that splashy part, how would you turn it into code?

[@iradukundapatrick6414]

Hey dev, now with your almost 300k subscribers you are like a small Romanian (if i spelled it well) city mayor 🤣🤣. And by the way; you are the most famous person from Romania i know.

[@stephen9849]

Bună, și eu sunt un programator din România!

[@madukomablessed4712]

Deved....yooooo....I just used figma to make a simple design..this is my first time opening figma and it was easy, no tutorial, not even the figma guide and I could create something basic. I struggled with Adobe xd, didn't get the hang of it, it stopped working on my pc, I think that was a good sign. I'm stuck with figma now😊😊😊😊

[@gavinjuen2764]

i really love ur videos ED !!! i just bought ur courses on udemy !! much love

[@kapoork4129]

Sir loved your videos 🎥🥺

[@srikanthkante]

This is real fun during pandemic

[@gyanwithmannan2592]

Good work

[@theharrypeter_xd1237]

Next challenge : manually coding this within 1 hour!

[@lucasgarcia8086]

hello, Is there any resource on the internet to find specific projects in sketch figma ... to be able to practice passing them to css and html?

[@ahmednouralhouda4511]

Hi , actually I liked your question coz I'm asking for the same thing , pls notify me if you found the answer and I appreciate that for you BTW , what the tool he is using to do this creative designing ??

[@davidalejandroballen4223]

No entiendo bien el ingles POR AHORA pero solo escuchar a este tipo me pone feliz XDD

[@adarshkumar3518]

11:28 Exactly my reaction 🤣🤣

[@thomschery2800]

What is Your favorite website for choosing color palette?

[@costa_4764]

Can you design websites with this program without html or css or this is just for creating prototypes?

[@deltofontoz6382]

Hey man, I love your videos, what is the program you're using to design? and can you make a vid about all the must-have apps, please 😁🙌

[@blackxthink]

figma

[@peshanghiwa]

nobody: ed: why you do dis to me?

[@enthusiast526]

In Google Images you can use filetype:png in the searchbar to only show png files.

[@techtransformers7464]

Hi Dev, Its a great tutorial, can i know the software you used designng mockup

[@ilverin.matriam]

Hey Ed, is this really helpful? Designing something really fast I mean? Does it help you get more ideas faster or something? I really like to think about and flesh out my ideas before moving to the designing bit, but I may try your way some time.

[@abdulmunim3722]

Thanks for make me laugh Ed

[@nathandesign98]

Tip: instead of writing 'png', use the 'tools' option and filter by 'color -> transparent' in Google.

[@arielspalter7425]

Cool. Is it Toronto in your background? Have you moved?

[@gregtegreg]

What monitor are you using? I need to get one but no idea. Thanks.

[@developerfilip]

Interesting challenge - I might give it a crack. It's funny how with a time deadline you stick to the theme but forget the cuisine genre lol. I never used figma. What's the deadline? ;)

[@sir.buttersworth]

Dev Ed is floor gang confirmed

[@dhruv4558]

He reminds me of Floki from Vikings.

[@TeamCGLikeandsub]

Hey btw which camera (screen recoreder) do you use?

[@nglx5846]

OBS/Streamlabs

[@zamiraxhemali2164]

Love you videos

[@aezakm1_1]

You can use blobs plugin for figma to create these splashes

[@jashmorekar]

So basically... FLOOR GANG!!!!

[@knightcode8865]

Wow very nice sir .i like it

[@gyanganga8441]

Okay how to design the image at right side trough the code . I mean how set that curve using code. Please help me

[@raju_rapper7544]

He did it. He did it. Floor gang.........

[@chirilcugureanu1853]

Super! Apropo, am vazut că trăiești în Arad 😆. Can you maybe do some tutorials and animations with HTML Canvas ? It would be amazing!!!

[@hamzaanis2321]

Great Ed but I don't have a knowledge of illustrator I try without vectoring the image ❤

[@stride.10]

If you ever consider switching back to Adobe as you said before. I would love to see a After Effects tutorial from you.

[@schniffenhausen]

Haha😂😂 "Why you do this Google... " Brought to you by chef Ed

[@deaddoctor]

Brought to you by chef Ed the chef.

[@mahmood6482]

what's the app name,and what is the out file format?do you have the tutorial?

[@imxron]

Wait hold up. Did you guys here a voice of an Angel when Ed was singing?

[@mustafasalih5328]

We love you Dimitri 🖤

[@v8gamerhd488]

Again a nice Video

[@tuxdinosaur1672]

Nice video! Greetings from México :)

[@abe10]

Hey Ed, When's the Javascript course coming to Udemy?

[@naidenmatyas925]

you said that you're gonna do a challenge with building a website in 1 hour with the viewers