Це відео не доступне.
Перепрошуємо.

I Built a Website in 10 Minutes using HTML & CSS

Поділитися
Вставка
  • Опубліковано 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....
    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...

КОМЕНТАРІ • 220

  • @EricZepeda320
    @EricZepeda320 3 роки тому +165

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

  • @dandy_handy_mandy
    @dandy_handy_mandy Рік тому +27

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

    • @maalikserebryakov
      @maalikserebryakov 11 місяців тому

      Design | Development are two *completely* different things.

    • @ManifestingADream
      @ManifestingADream Місяць тому

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

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

  • @geoffreyzziwambazza7862
    @geoffreyzziwambazza7862 Рік тому +20

    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 2 місяці тому +1

      you can say that again

  • @JoaomdvFerreira
    @JoaomdvFerreira 3 роки тому +19

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

  • @watt3924
    @watt3924 3 роки тому +15

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

    • @Thushani3869
      @Thushani3869 4 місяці тому

      Your video helps me a lot!Thanks bro😊

  • @techlordgyan9961
    @techlordgyan9961 3 роки тому +89

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

  • @nycmotorider
    @nycmotorider Рік тому +6

    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 5 місяців тому

      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 5 місяців тому

      @@looneymuhammed4272 nah bro believe in yourself

    • @sherazawan1221
      @sherazawan1221 Місяць тому

      @@looneymuhammed4272 am also

  • @VictorVictory-te2ij
    @VictorVictory-te2ij 19 днів тому

    I gave you a personal standing ovation and applause in my room -- simply SUPERB...and BRAVO, super HERO! God bless you Brian Sir! AWESOME!!!

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

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

    this is GOLD! Thanks for all the classes!

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

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

  • @nolandderlugner1351
    @nolandderlugner1351 8 місяців тому +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

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

  • @andyl9920
    @andyl9920 7 місяців тому +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?

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

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

  • @l33t-gaming40
    @l33t-gaming40 3 роки тому +5

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

  • @almightyformula
    @almightyformula Місяць тому

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

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

  • @shubhamrajput297
    @shubhamrajput297 3 роки тому +3

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

  • @mirasoaandriambololona6459
    @mirasoaandriambololona6459 3 місяці тому

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

  • @fusebox9725
    @fusebox9725 8 місяців тому +2

    This is amazing! Thank you so much Sir!!

  • @maalikserebryakov
    @maalikserebryakov 11 місяців тому +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.

  • @gulagizbroshraje1596
    @gulagizbroshraje1596 Рік тому +2

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

  • @amrkalammansoori4411
    @amrkalammansoori4411 6 місяців тому

    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 2 місяці тому

      Yeah that's right😇😇

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

  • @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 ua-cam.com/video/0Ok3fGel4Ok/v-deo.html

  • @carlomagnoilfinto5967
    @carlomagnoilfinto5967 Рік тому +1

    Is there a name for this homepage layout?

  • @lizzybishop814
    @lizzybishop814 Рік тому +1

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

  • @mulqueen82
    @mulqueen82 5 місяців тому

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

    • @znxrrr
      @znxrrr 5 місяців тому

      What engine did you use?

  • @benatkinson3160
    @benatkinson3160 Рік тому +1

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

  • @Gambino482
    @Gambino482 Рік тому +1

    Which text editor do you use?

    • @TCW_Consulting
      @TCW_Consulting Рік тому

      It’s called Visual Studio Code (VS Code)

  • @philoriser
    @philoriser 2 місяці тому +1

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

    • @mapachrod
      @mapachrod 13 днів тому

      Visual Studio code

  • @RakeshKumar-bq3mf
    @RakeshKumar-bq3mf 3 роки тому +1

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

  • @nomiyahere3466
    @nomiyahere3466 6 місяців тому

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

  • @user-cn2on8my7y
    @user-cn2on8my7y Рік тому +1

    what website/app did you use?

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

    Great i think need more vids with react js👍👍

  • @zhangyikson3848
    @zhangyikson3848 7 місяців тому

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

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

  • @MoloSilly
    @MoloSilly Рік тому +1

    You are the real deal bruv

  • @XLOYT
    @XLOYT 8 місяців тому +1

    thank you so much sir

  • @williamdortch6441
    @williamdortch6441 2 роки тому +1

    That was beautiful💯💯

  • @ehtishamullah1510
    @ehtishamullah1510 16 годин тому

    Challenge: "I converted a ms word document to latex in less than 10 mins". Doc must be 3+ pages with images, tables, titles, subtitles and math equations

  • @PhilipJoyner-hs1bc
    @PhilipJoyner-hs1bc 3 місяці тому

    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.

  • @jaycokebeats
    @jaycokebeats 2 роки тому +1

    I loved this content!

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

    Amazing! More vids on React and mern please!

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

      got a react animation vid dropping soon

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

    u made it once so easy for u :)

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

      Was still hard just typing that fast lol

  • @ChrisStandford
    @ChrisStandford 2 місяці тому

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

  • @yasirusman8641
    @yasirusman8641 Місяць тому

    make more of these much better then hour long courses

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

  • @thsithu5672
    @thsithu5672 8 місяців тому

    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?

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

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

    This was fire! 🔥

  • @nixpaFPS
    @nixpaFPS Рік тому +1

    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

  • @TsTheSeason
    @TsTheSeason 7 місяців тому

    I really love this, Thank You!

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

  • @_b_l_x_c_k_
    @_b_l_x_c_k_ 12 днів тому

    So it resize as well?

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

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

    You’re incredible

  • @thegoose1324
    @thegoose1324 3 місяці тому

    Great demo

  • @Me_mrerror
    @Me_mrerror 6 місяців тому

    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

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

    Very good, thank you

  • @ayyanSalam-official
    @ayyanSalam-official 3 місяці тому

    Can you tell what code editor are you using

  • @dromotayopauloniya
    @dromotayopauloniya 10 місяців тому

    nice one bro

  • @_b_l_x_c_k_
    @_b_l_x_c_k_ 12 днів тому

    Man after watching this i can kinda read and know some of the coding words now except for what the symbols stands for.

  • @aaronstone8729
    @aaronstone8729 Рік тому

    great job bro

  • @skulduggery-98
    @skulduggery-98 7 місяців тому

    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?

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

    Hmmm, that was quick bro.

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

    why did you use flex-direction in 5:34 ? couldn't you just write
    justify-content: flex-start;
    align-items: center;

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

      display flex puts it on one line, so flex direction:column stacks them back on top of each other

  • @polyglot1135
    @polyglot1135 5 місяців тому

    thank you so much it was very helpful

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

    Wow, great video

  • @anonymousmask9850
    @anonymousmask9850 10 місяців тому

    wow, so cool and funny!!!

  • @Zano1st
    @Zano1st 13 днів тому

    qhat editor program is this? i am so lost on where to put codes in

    • @mapachrod
      @mapachrod 13 днів тому

      Visual Studio code

  • @hyginusandrew4240
    @hyginusandrew4240 7 місяців тому

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

  • @4stardenzel
    @4stardenzel 3 роки тому

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

  • @UsmanAhmad-rz4ls
    @UsmanAhmad-rz4ls 8 місяців тому

    can someone explain the padding at 4:00

  • @FlezZyt
    @FlezZyt 9 місяців тому

    Please make more video of this 🙏🙏

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

    hello where did you get that backgroung?

  • @StolenX
    @StolenX Місяць тому

    What program is this?

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

    This is great

  • @benatkinson3160
    @benatkinson3160 Рік тому

    what theme do you use for vs?

  • @andreimarinx
    @andreimarinx 6 місяців тому

    What keyboard do you use

  • @xyhe123
    @xyhe123 4 місяці тому

    What is the editor you are using?

  • @ryan_raus
    @ryan_raus 3 місяці тому

    Incredible

  • @hevargaming5351
    @hevargaming5351 10 місяців тому

    What app dose you use?

  • @adymorris7347
    @adymorris7347 4 місяці тому

    Genius!

  • @deshikshetty997
    @deshikshetty997 Рік тому

    Amazing 👍

  • @rhaizenjaypagtakhan2248
    @rhaizenjaypagtakhan2248 8 місяців тому

    i need the link of the pic please

  • @prassyah
    @prassyah Місяць тому

    may I ask for a image?

  • @nnastya008
    @nnastya008 3 місяці тому

    good video

  • @shielamarieadlawan8457
    @shielamarieadlawan8457 Рік тому

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

    • @Metro248
      @Metro248 15 днів тому

      Im pretty sure his editor auto indents , but to manually do it depending on your device, I just press the tab button

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

    Which software are using ??

  • @asterCatto9029
    @asterCatto9029 10 місяців тому

    Whats your editor?

  • @TheJarvishh
    @TheJarvishh 11 місяців тому

    which software u r using?

  • @prodcdebeatz7205
    @prodcdebeatz7205 11 місяців тому

    What is your live server?

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

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

    can you make a video of all shortcuts youve learn and use specially on how you go down after a code im still doing the arrow btn to make it down
    e.i.
    width: 100%|;

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

      you can check out my extensions I use and see if that helps ua-cam.com/video/0Ok3fGel4Ok/v-deo.html

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

      @@briandesign no sir, i watch that video already... i mean how you go to the next line without using arrow button... its kinda a hassle and it think maybe pressing a key to go down ...
      e.i.
      display: flex | ;

  • @amanpatil441
    @amanpatil441 Рік тому

    Nice 🎉