I Built a Website in 10 Minutes using HTML & CSS

Поделиться
HTML-код
  • Опубликовано: 3 дек 2020
  • 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...

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

  • @EricZepeda320
    @EricZepeda320 3 года назад +155

    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
    @rageofstate2695 3 года назад +35

    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.

  • @JoaomdvFerreira
    @JoaomdvFerreira 3 года назад +18

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

  • @lidiabarreiros
    @lidiabarreiros 2 года назад +4

    this is GOLD! Thanks for all the classes!

  • @geoffreyzziwambazza7862
    @geoffreyzziwambazza7862 Год назад +18

    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 Месяц назад +1

      you can say that again

  • @watt3924
    @watt3924 3 года назад +15

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

    • @Thushani3869
      @Thushani3869 3 месяца назад

      Your video helps me a lot!Thanks bro😊

  • @skywatching24
    @skywatching24 Год назад +26

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

    • @maalikserebryakov
      @maalikserebryakov 10 месяцев назад

      Design | Development are two *completely* different things.

    • @ManifestingADream
      @ManifestingADream 15 дней назад

      @@maalikserebryakov unicorns exist. Ive known plenty of UI people who learnt to code. Thats what happens when the coders don't always live up to a UI person's standards, they adopt that, I'll do it myself, mindset.

  • @mirasoaandriambololona6459
    @mirasoaandriambololona6459 2 месяца назад

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

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

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

  • @nolandderlugner1351
    @nolandderlugner1351 7 месяцев назад +2

    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

  • @fusebox9725
    @fusebox9725 7 месяцев назад +2

    This is amazing! Thank you so much Sir!!

  • @almightyformula
    @almightyformula 16 дней назад

    Great presentation of great value! Well done, Dr. Malik, indeed you are the best.

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

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

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

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

  • @techlordgyan9961
    @techlordgyan9961 3 года назад +82

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

  • @nomiyahere3466
    @nomiyahere3466 5 месяцев назад

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

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

    That was beautiful💯💯

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

    I loved this content!

  • @TsTheSeason
    @TsTheSeason 6 месяцев назад

    I really love this, Thank You!

  • @zhangyikson3848
    @zhangyikson3848 6 месяцев назад

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

  • @amrkalammansoori4411
    @amrkalammansoori4411 5 месяцев назад

    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!

  • @squattingtaiwan
    @squattingtaiwan 2 года назад +4

    Impressive and instructive! Nicely done

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

      Yeah that's right😇😇

  • @maalikserebryakov
    @maalikserebryakov 10 месяцев назад +1

    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.

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

    Great i think need more vids with react js👍👍

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

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

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

      Yeah grid is nice. Thanks btw!

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

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

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

    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 года назад +1

      check this vid I made of my extensions ruclips.net/video/0Ok3fGel4Ok/видео.html

  • @benatkinson3160
    @benatkinson3160 11 месяцев назад +1

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

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

    You are the real deal bruv

  • @l33t-gaming40
    @l33t-gaming40 3 года назад +5

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

  • @RakeshKumar-bq3mf
    @RakeshKumar-bq3mf 3 года назад +1

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

  • @nycmotorider
    @nycmotorider Год назад +5

    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 4 месяца назад

      @@looneymuhammed4272 nah bro believe in yourself

    • @sherazawan1221
      @sherazawan1221 10 дней назад

      @@looneymuhammed4272 am also

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

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

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

      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 года назад +1

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

  • @omotayopauloniya9472
    @omotayopauloniya9472 9 месяцев назад

    nice one bro

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

    Very good, thank you

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

    great job bro

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

    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

  • @thegoose1324
    @thegoose1324 2 месяца назад

    Great demo

  • @mulqueen82
    @mulqueen82 4 месяца назад

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

    • @znxrrr
      @znxrrr 4 месяца назад

      What engine did you use?

  • @polyglot1135
    @polyglot1135 4 месяца назад

    thank you so much it was very helpful

  • @ryan_raus
    @ryan_raus 2 месяца назад

    Incredible

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

    You’re incredible

  • @andyl9920
    @andyl9920 6 месяцев назад +1

    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?

  • @PhilipJoyner-hs1bc
    @PhilipJoyner-hs1bc 2 месяца назад

    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.

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

    This was fire! 🔥

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

    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

  • @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.

  • @yasirusman8641
    @yasirusman8641 24 дня назад

    make more of these much better then hour long courses

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

    what theme do you use for vs?

  • @XLOYT
    @XLOYT 7 месяцев назад +1

    thank you so much sir

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

    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 года назад +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

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

    Amazing! More vids on React and mern please!

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

      got a react animation vid dropping soon

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

    hello where did you get that backgroung?

  • @anonymousmask9850
    @anonymousmask9850 9 месяцев назад

    wow, so cool and funny!!!

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

    Hmmm, that was quick bro.

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

    This is great

  • @adymorris7347
    @adymorris7347 3 месяца назад

    Genius!

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

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

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

    Nice 🎉

  • @user-cn2on8my7y
    @user-cn2on8my7y Год назад +1

    what website/app did you use?

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

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

  • @andreimarinx
    @andreimarinx 5 месяцев назад

    What keyboard do you use

  • @SatifyingVideosDaily
    @SatifyingVideosDaily 28 дней назад

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

  • @ayyanSalam-official
    @ayyanSalam-official 2 месяца назад

    Can you tell what code editor are you using

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

    thats a bang!

  • @TheJarvishh
    @TheJarvishh 10 месяцев назад

    which software u r using?

  • @asterCatto9029
    @asterCatto9029 9 месяцев назад

    Whats your editor?

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

    Which software are using ??

  • @user-ov4fd1qi6x
    @user-ov4fd1qi6x 7 месяцев назад

    yeah man... thats pretty cool

  • @nnastya008
    @nnastya008 2 месяца назад

    good video

  • @4stardenzel
    @4stardenzel 3 года назад

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

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

    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

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

    Thanks!!!

  • @FlezZyt
    @FlezZyt 8 месяцев назад

    Please make more video of this 🙏🙏

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

    u made it once so easy for u :)

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

      Was still hard just typing that fast lol

  • @hevargaming5351
    @hevargaming5351 9 месяцев назад

    What app dose you use?

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

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

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

    Wow, great video

  • @StolenX
    @StolenX 7 дней назад

    What program is this?

  • @hyginusandrew4240
    @hyginusandrew4240 6 месяцев назад

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

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

    Good job, nice page btw:D

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

    Is there a name for this homepage layout?

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

    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 Год назад +1

      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.

  • @skulduggery-98
    @skulduggery-98 6 месяцев назад

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

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

    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?

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

    Amazing 👍

  • @elhadipasho8704
    @elhadipasho8704 8 месяцев назад

    👏

  • @xyhe123
    @xyhe123 3 месяца назад

    What is the editor you are using?

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

    Which text editor do you use?

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

      It’s called Visual Studio Code (VS Code)

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

    Great. i made it sucessfully..

  • @thsithu5672
    @thsithu5672 7 месяцев назад

    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?

  • @prodcdebeatz7205
    @prodcdebeatz7205 10 месяцев назад

    What is your live server?

  • @Me_mrerror
    @Me_mrerror 5 месяцев назад

    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

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

    good vid

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

    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

  • @user-no3pq9hz9d
    @user-no3pq9hz9d Год назад

    Which code editor did you use?

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

    Hey Brian If it possible so can you make a video on Github for beginners?

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

      Sure anything specific?

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

      How to use GitHub in a professional job or how to upload our project and by the way thank you for your reply

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

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

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

    What code editor did you use

  • @rhaizenjaypagtakhan2248
    @rhaizenjaypagtakhan2248 7 месяцев назад

    i need the link of the pic please