I Built a Website in 10 Minutes using HTML & CSS

Today, I decided to build a website in under 10 minutes. I used HTML & CSS to create the website. If you'd like me to do another 10 minute challenge without using code or designing a website, let me know in the comments below! Do you think you could create a site in under 10 mins?
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign
Source Code
www.codavilla.com/posts/i-bui...
Build a Gym Website using HTML, CSS & Javascript
• How to Make a Website ...
Build a Website without using Code
• How to Make a Website ...
HTML, CSS & Javascript Website
• HTML CSS Javascript We...
Alternative HTML, CSS & Javascript Website
• HTML CSS and Javascrip...

Пікірлер: 203

  • @EricZepeda320
    @EricZepeda3203 жыл бұрын

    As a beginner to all this responsive web design stuff, I found this video very helpful to actually see it all come to fruition so fast. Also helped having my playback speed at x2 since i've been pounding out these computer science crash courses! ha, Good job, bro! I'll have to check out some more vids..

  • @rageofstate2695
    @rageofstate26953 жыл бұрын

    Brian you have no idea how much your videos have helped me. You have a real gift for teaching and great eye for front end design. About to go scour your videos for a CRUD/MERN tutorial. Keep it up and thank you.

  • @lidiabarreiros
    @lidiabarreiros2 жыл бұрын

    this is GOLD! Thanks for all the classes!

  • @skywatching24
    @skywatching2411 ай бұрын

    I am in school for web design, and really I have learned more on KZread than in class! It's all cohesive but these videos are so good! Thank you!

  • @maalikserebryakov

    @maalikserebryakov

    9 ай бұрын

    Design | Development are two *completely* different things.

  • @JoaomdvFerreira
    @JoaomdvFerreira3 жыл бұрын

    Love a good speed run! Keep it coming mate. Well done

  • @briandesign

    @briandesign

    3 жыл бұрын

    Thanks Joao!

  • @geoffreyzziwambazza7862
    @geoffreyzziwambazza7862 Жыл бұрын

    This was extremely satisfying to watch. I’m not one for ASMR, but an ASMR video of just you typing a coding speed challenge would be fun to watch.

  • @sumaira6032

    @sumaira6032

    Ай бұрын

    you can say that again

  • @watt3924
    @watt39243 жыл бұрын

    wooo!! you been quite active lately, love it! now bring on the mern builds!!!

  • @Thushani3869

    @Thushani3869

    2 ай бұрын

    Your video helps me a lot!Thanks bro😊

  • @txmw4464
    @txmw44642 жыл бұрын

    Such an awesome video crazy to think you know all that css off the top of your head

  • @nolandderlugner1351
    @nolandderlugner13517 ай бұрын

    This is an amazing videos and exactly what i searched 1h long videos dont so nothing for nobody But videos like this show me the end goal in a way, which then gives motivation to keep learning via odin project or whatever other programming lectures exist

  • @mirasoaandriambololona6459
    @mirasoaandriambololona6459Ай бұрын

    Awesome video! Keep it up mate!! So fast and effective

  • @fusebox9725
    @fusebox97256 ай бұрын

    This is amazing! Thank you so much Sir!!

  • @shubhamrajput297
    @shubhamrajput2973 жыл бұрын

    Subbed!!!!! This is just insane and super insightful

  • @briandesign

    @briandesign

    3 жыл бұрын

    Thanks Shubham!

  • @nitinsoni9956
    @nitinsoni99563 жыл бұрын

    Was really Fun and useful watching this video. You doing great man 👍👍

  • @briandesign

    @briandesign

    3 жыл бұрын

    Thanks Nitin!

  • @techlordgyan9961
    @techlordgyan99613 жыл бұрын

    10 minutes u kidding me lol I can't even create this great website Nice website and nice video

  • @maalikserebryakov
    @maalikserebryakov9 ай бұрын

    This really drives home the point that all software development is simply the act of translating ideated design and functionality into a manifested virtual space.

  • @squattingtaiwan
    @squattingtaiwan Жыл бұрын

    Impressive and instructive! Nicely done

  • @sumaira6032

    @sumaira6032

    Ай бұрын

    Yeah that's right😇😇

  • @nycmotorider
    @nycmotorider11 ай бұрын

    I am a newborn beginner to html but this video was a great encouragement to me. I just sub'-d in and will be watching and practicing a ton more. Thank you.

  • @looneymuhammed4272

    @looneymuhammed4272

    4 ай бұрын

    How are u doing now? I'm new at this too and I'm kinda freaking out and feel like I won't succeed at this.

  • @Moshei2

    @Moshei2

    3 ай бұрын

    @@looneymuhammed4272 nah bro believe in yourself

  • @williamdortch6441
    @williamdortch64412 жыл бұрын

    That was beautiful💯💯

  • @nomiyahere3466
    @nomiyahere34664 ай бұрын

    Wow its really helping me that so new into this in creating website idea! Thank you

  • @TsTheSeason
    @TsTheSeason5 ай бұрын

    I really love this, Thank You!

  • @arnoldkibira4268
    @arnoldkibira42683 жыл бұрын

    Great video. I'm really about to start paying more attention to grid 😂. Love your channel.

  • @briandesign

    @briandesign

    3 жыл бұрын

    Yeah grid is nice. Thanks btw!

  • @amrkalammansoori4411
    @amrkalammansoori44114 ай бұрын

    Could you explain the padding formula you used? Wonderful video, I learned about each tag in class but didn't know how to put them together. After watching your video I understood the structure. Absolute masterpiece! Thanks for the video mate!

  • @echonabin
    @echonabin3 жыл бұрын

    Great i think need more vids with react js👍👍

  • @zhangyikson3848
    @zhangyikson38485 ай бұрын

    I follow your video's explain ,and build up this web ,thanks a lot for improving my confidence to build a web .

  • @cesarhinojosa1968
    @cesarhinojosa19683 жыл бұрын

    awesome, thanks for the content man!! i have a question, what extensions do you use for making the work i mean auto compleate some parts, etc

  • @briandesign

    @briandesign

    3 жыл бұрын

    check this vid I made of my extensions kzread.info/dash/bejne/YoOflciAlc-af84.html

  • @jaycokebeats
    @jaycokebeats2 жыл бұрын

    I loved this content!

  • @gulagizbroshraje1596
    @gulagizbroshraje1596 Жыл бұрын

    Werry great video, saved my ass in school thanks a LOT.

  • @RakeshKumar-bq3mf
    @RakeshKumar-bq3mf3 жыл бұрын

    gr8 and super. Thanks a lot...keep this up great work...:-)

  • @briandesign

    @briandesign

    3 жыл бұрын

    Thanks Rakesh!

  • @MoloSilly
    @MoloSilly Жыл бұрын

    You are the real deal bruv

  • @mateuspaula_dev
    @mateuspaula_dev3 жыл бұрын

    nice video brohhhh, keep bringing videos with those grid concepts from lux gym, thx for the video!

  • @briandesign

    @briandesign

    3 жыл бұрын

    forsure! I wanna start doing some crazy animations with grid too

  • @mateuspaula_dev

    @mateuspaula_dev

    3 жыл бұрын

    @@briandesign I'm anxious for this! I'm promoting your channel to all college friends here in Brazil, very successful in your life!

  • @briandesign

    @briandesign

    3 жыл бұрын

    @@mateuspaula_dev thanks Mateus! Wish you the best as well!

  • @andyl9920
    @andyl99206 ай бұрын

    10 minutes? Man u did it in 8. Great job man. Question. I couldnt get my CSS to work unless i use on my html sheet....did i do something wrong?

  • @mulqueen82
    @mulqueen824 ай бұрын

    Thank you. Built my first site using this. Much love.

  • @znxrrr

    @znxrrr

    3 ай бұрын

    What engine did you use?

  • @dgswsdfgbsfbfs3260
    @dgswsdfgbsfbfs32603 жыл бұрын

    You’re incredible

  • @thegoose1324
    @thegoose1324Ай бұрын

    Great demo

  • @benatkinson3160
    @benatkinson316010 ай бұрын

    how do you get the highlighter on the left which join the html tags together?

  • @aaronstone8729
    @aaronstone8729 Жыл бұрын

    great job bro

  • @theMadZakuPilot
    @theMadZakuPilot3 жыл бұрын

    Sorry I'm new to coding so I wanted to ask if it's better to make the nav the way you did or using the and tags?

  • @briandesign

    @briandesign

    3 жыл бұрын

    so I wrapped mine with nav tag, so it is essentially stating it is my nav. There's a lot of debate online about using ul li vs a, but when it comes to styling it, it's a pain having to factor in the extra ul, li and a tags vs just having a nav and a tag. I started off with ul li tags when I first started, but now I just use nav and a tag. If anyone has any specific reasons why I shouldn't use it, feel free to let me know. I haven't noticed any issues doing it so far

  • @theMadZakuPilot

    @theMadZakuPilot

    3 жыл бұрын

    @@briandesign thanks for the quick response. Your content is amazing.

  • @briandesign

    @briandesign

    3 жыл бұрын

    @@theMadZakuPilot thanks! Appreciate it

  • @pedromorais2454
    @pedromorais24543 жыл бұрын

    Very good, thank you

  • @syedadam4858
    @syedadam48583 жыл бұрын

    This was fire! 🔥

  • @briandesign

    @briandesign

    3 жыл бұрын

    Aye thanks Syed!

  • @omotayopauloniya9472
    @omotayopauloniya94728 ай бұрын

    nice one bro

  • @ansulp5799
    @ansulp57993 жыл бұрын

    Amazing! More vids on React and mern please!

  • @briandesign

    @briandesign

    3 жыл бұрын

    got a react animation vid dropping soon

  • @polyglot1135
    @polyglot11353 ай бұрын

    thank you so much it was very helpful

  • @ryan_raus
    @ryan_rausАй бұрын

    Incredible

  • @evin1791
    @evin1791 Жыл бұрын

    can you tell me how did you find that SVG it's so cool i wanted more if you tell me the website of SVG i would be thankful

  • @DailyIntern
    @DailyIntern3 жыл бұрын

    Hmmm, that was quick bro.

  • @galihfebrianto9873
    @galihfebrianto98733 жыл бұрын

    Wow only 9 minutes 😂, Thank You Brian

  • @briandesign

    @briandesign

    3 жыл бұрын

    haha I couldn't tell how long it took until after editing the vid cause I didn't have a timer. I just knew it was under cause the length of my recording was around 10 mins

  • @l33t-gaming40
    @l33t-gaming403 жыл бұрын

    Plot twist: He made it in 1 minute and just slowed it down

  • @briandesign

    @briandesign

    3 жыл бұрын

    lol

  • @PhilipJoyner-hs1bc
    @PhilipJoyner-hs1bcАй бұрын

    Hey Brian, Where do you get your images from. I get mine from Pexels. Also, how do you get your images to appear on your site, because I did what you said in the video, but my image isn't appearing.

  • @benatkinson3160
    @benatkinson316010 ай бұрын

    what theme do you use for vs?

  • @yasirusman8641
    @yasirusman86417 күн бұрын

    make more of these much better then hour long courses

  • @adymorris7347
    @adymorris73473 ай бұрын

    Genius!

  • @dakshashar4884
    @dakshashar48843 жыл бұрын

    Bro what resources do you refer for color combination and design.? Your websites are super cool and clean.😍 i m new on your channel and just subscribed it🤟.

  • @briandesign

    @briandesign

    3 жыл бұрын

    there's not really a resource for the way I design. you can check dribbble or other design websites for inspiration, but eventually you'll start to see colors that look good and match. People don't see behind the scenes, but I usually run multiple color variations until I like it, so I started with like white, then green, the blue, then red etc until I landed on yellow and liked the way it looked

  • @anonymousmask9850
    @anonymousmask98508 ай бұрын

    wow, so cool and funny!!!

  • @user-fy9el2zu5g
    @user-fy9el2zu5g Жыл бұрын

    How did you get the logo (the lady with the computer on her lap😅) onto that page before you even started coding it, any explanation would be appreciated.

  • @amanpatil441
    @amanpatil441 Жыл бұрын

    Nice 🎉

  • @xxxxwagger
    @xxxxwagger2 жыл бұрын

    This is great

  • @user-ov4fd1qi6x
    @user-ov4fd1qi6x6 ай бұрын

    yeah man... thats pretty cool

  • @reydelocon629
    @reydelocon6293 жыл бұрын

    hello where did you get that backgroung?

  • @user-cn2on8my7y
    @user-cn2on8my7y Жыл бұрын

    what website/app did you use?

  • @XLOYT
    @XLOYT6 ай бұрын

    thank you so much sir

  • @andreimarinx
    @andreimarinx4 ай бұрын

    What keyboard do you use

  • @samchen5462
    @samchen54623 жыл бұрын

    Wow, great video

  • @briandesign

    @briandesign

    3 жыл бұрын

    you already know

  • @freaxwoz2802
    @freaxwoz28023 жыл бұрын

    thats a bang!

  • @wail2670
    @wail26703 жыл бұрын

    u made it once so easy for u :)

  • @briandesign

    @briandesign

    3 жыл бұрын

    Was still hard just typing that fast lol

  • @4stardenzel
    @4stardenzel3 жыл бұрын

    for some reason when i add an image and i open live server it doesnt show

  • @shielamarieadlawan8457
    @shielamarieadlawan845710 ай бұрын

    2:48 how did it indent, I've been stuck in this step😭 did you just click " enter" then it indent automatically?

  • @SatifyingVideosDaily
    @SatifyingVideosDaily11 күн бұрын

    how do you acctuly make the website and what do you use to write the code

  • @TheJarvishh
    @TheJarvishh9 ай бұрын

    which software u r using?

  • @philoriser
    @philoriser19 күн бұрын

    which program do you use for coding, which software is this in the video? does anybody knows it?

  • @asterCatto9029
    @asterCatto90298 ай бұрын

    Whats your editor?

  • @FlezZyt
    @FlezZyt7 ай бұрын

    Please make more video of this 🙏🙏

  • @ayyanSalam-official
    @ayyanSalam-officialАй бұрын

    Can you tell what code editor are you using

  • @ajithr116
    @ajithr1163 жыл бұрын

    Which software are using ??

  • @deshikshetty997
    @deshikshetty997 Жыл бұрын

    Amazing 👍

  • @briandesign

    @briandesign

    Жыл бұрын

    Thanks Deshik!

  • @hyginusandrew4240
    @hyginusandrew42405 ай бұрын

    What the name of the coder that u was using to make the website

  • @nnastya008
    @nnastya008Ай бұрын

    good video

  • @hevargaming5351
    @hevargaming53518 ай бұрын

    What app dose you use?

  • @lizzybishop814
    @lizzybishop81411 ай бұрын

    you are actually short in breath and it kills me 🤣🤣

  • @douchecanoe3430
    @douchecanoe3430 Жыл бұрын

    At 2:34 of the video when saving the code, the whole code alignment and format changes. How do i do this as I'm new and want to follow the vid step by step. Would greatly appreciate if anybody knows.

  • @douchecanoe3430

    @douchecanoe3430

    Жыл бұрын

    lolz I figured it out. it was the Prettier - Code formatter extension and i right clicked on the code while open like the video, and clicked on "format with Prettier option" for those wondering. Great vid.

  • @carlomagnoilfinto5967
    @carlomagnoilfinto596711 ай бұрын

    Is there a name for this homepage layout?

  • @thsithu5672
    @thsithu56726 ай бұрын

    Everything is good but my problem is : my background color isn't in full yellow when I squeeze the screen. It appears like white bar under the button. Can anyone tell me what should I do?

  • @skulduggery-98
    @skulduggery-985 ай бұрын

    Bro what means the 1fr and rem that u use on margins and paddings i use pixels wtf i dont understand 😢 explain pls

  • @gerardinah
    @gerardinah Жыл бұрын

    Thanks!!!

  • @Gambino482
    @Gambino48211 ай бұрын

    Which text editor do you use?

  • @TCW_Consulting

    @TCW_Consulting

    11 ай бұрын

    It’s called Visual Studio Code (VS Code)

  • @diogomartinez7991
    @diogomartinez79913 жыл бұрын

    in my web store, i have an option for custom CSS , please help me how i can use that to change small adjustment to the design, or where i can learn about it

  • @briandesign

    @briandesign

    3 жыл бұрын

    what did you use to create your store?

  • @josuearreola9998
    @josuearreola99983 жыл бұрын

    A M A Z I N G!! I'm doing it!!!

  • @briandesign

    @briandesign

    3 жыл бұрын

    aye! let's goo

  • @jagdishparihar5168
    @jagdishparihar51682 жыл бұрын

    Great. i made it sucessfully..

  • @Me_mrerror
    @Me_mrerror5 ай бұрын

    Can you help me ? I made a website with html and im confused in giving it an url. Can you help me how to give it an url and share my website

  • @SFBeriK
    @SFBeriK3 жыл бұрын

    Good job, nice page btw:D

  • @briandesign

    @briandesign

    3 жыл бұрын

    Thanks!

  • @harp11991
    @harp119912 жыл бұрын

    How to setup vs code to Show you directly what your doing on website how u Split screen to Show you web site and code on tnhe left side of the screen

  • @prodcdebeatz7205
    @prodcdebeatz720510 ай бұрын

    What is your live server?

  • @elhadipasho8704
    @elhadipasho87047 ай бұрын

    👏

  • @xyhe123
    @xyhe1233 ай бұрын

    What is the editor you are using?

  • @briandesign

    @briandesign

    3 ай бұрын

    vs code

  • @penguin3427
    @penguin34272 жыл бұрын

    good vid

  • @rhaizenjaypagtakhan2248
    @rhaizenjaypagtakhan22486 ай бұрын

    i need the link of the pic please

  • @user-no3pq9hz9d
    @user-no3pq9hz9d Жыл бұрын

    Which code editor did you use?

  • @shawntabuac4558

    @shawntabuac4558

    Жыл бұрын

    Visual studio code blud

  • @UsmanAhmad-rz4ls
    @UsmanAhmad-rz4ls7 ай бұрын

    can someone explain the padding at 4:00

  • @yousefplum
    @yousefplum Жыл бұрын

    What code editor did you use

  • @briandesign

    @briandesign

    Жыл бұрын

    vs code

  • @Heizson
    @Heizson Жыл бұрын

    Were is pictures

  • @nixpaFPS
    @nixpaFPS Жыл бұрын

    How long do you think this would take for a beginner?

  • @briandesign

    @briandesign

    Жыл бұрын

    once you learn the basics could easily replicate it in 15 - 30 mins, assuming you have a design already built for reference

Келесі