I Built a Website in 10 Minutes using HTML & CSS

[@briandesign]

Check out my favorite resource for learning front end development: v2.scrimba.com/?via=briandesign

[@SonOfGod320]

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]

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

[@maalikserebryakov]

Design | Development are two *completely* different things.

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

[@BlackShadow_2010bd]

But the video's about web development...

[@wizzgaeasl]

Man I be saying this all the time

[@rageofstate]

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]

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

[@briandesign]

Thanks Joao!

[@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]

you can say that again

[@watt3924]

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

[@ANNA-q8g5k]

Your video helps me a lot!Thanks bro😊

[@techlordgyan9961]

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

[@aaronbradley8617]

What an absolute BEAST! After programming with C++ for two years and python for almost two months I now wanted to learn to build a website because I got a few ideas that my homies and other people would enjoy. I just finished with the basics of HTML and done a small project using all the basics.I got the hang of it and it was pretty easy to understand. Now I’m on the learning the CSS part then JS after that. But man this speed run really INSPIRED me because I can make something cool as that website! I’ll definitely be watching and learning more off of your videos! 🤝

[@lidiabarreiros]

this is GOLD! Thanks for all the classes!

[@txmw4464]

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

[@MDMD0009]

This is great for people like me, no patience for longer videos and you explain everything I need to know. 👍🏼 Good job

[@YasunaLou]

Damn this taught me more than our 3 hours of lectures about HTML and CSS combined. Thank you so much!

[@nolandderlugner1351]

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

[@VictorVictory-te2ij]

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

[@exploringthedepths74]

holy shit, this is amazing. i was confused why theres such dense html code for just 4 basic elements. its like a suit being designed, have to specify what each part is to the css code to design it

[@shubhamrajput297]

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

[@briandesign]

Thanks Shubham!

[@fusebox9725]

This is amazing! Thank you so much Sir!!

[@mirasoaandriambololona6459]

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

[@almightyformula]

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

[@nitinsoni9956]

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

[@briandesign]

Thanks Nitin!

[@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]

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.

[@maalikserebryakov]

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.

[@arnoldkibira4268]

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

[@briandesign]

Yeah grid is nice. Thanks btw!

[@gulagizbroshraje1596]

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

[@mulqueen82]

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

[@Z08K]

What engine did you use?

[@squattingtaiwan]

Impressive and instructive! Nicely done

[@sumaira6032]

Yeah that's right😇😇

[@l33t-gaming40]

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

[@briandesign]

lol

[@andyl9920]

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?

[@nomiyahere3466]

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

[@RakeshKumar-bq3mf]

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

[@briandesign]

Thanks Rakesh!

[@amrkalammansoori4411]

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!

[@ericj199]

same question, want to know the logic behind the padding formula...

[@nycmotorider]

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]

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]

@@looneymuhammed4272 nah bro believe in yourself

[@sherazawan1221]

@@looneymuhammed4272 am also

[@mateuspaula_dev]

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

[@briandesign]

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

[@mateuspaula_dev]

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

[@briandesign]

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

[@williamdortch6441]

That was beautiful💯💯

[@zhangyikson3848]

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

[@TsTheSeason]

I really love this, Thank You!

[@cesarhinojosa1968]

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]

check this vid I made of my extensions kzbin.info/www/bejne/ZoDOZJl9mtFnhc0

[@theMadZakuPilot]

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]

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]

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

[@briandesign]

@@theMadZakuPilot thanks! Appreciate it

[@echonabin]

Great i think need more vids with react js👍👍

[@jaycokebeats]

I loved this content!

[@MoloSilly]

You are the real deal bruv

[@syedadam4858]

This was fire! 🔥

[@briandesign]

Aye thanks Syed!

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

[@shielamarieadlawan8457]

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

[@rah.248]

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

[@UnconventionalSpiritualist]

best video ever!

[@theMadZakuPilot]

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

[@briandesign]

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

[@benatkinson3160]

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

[@ansulp5799]

Amazing! More vids on React and mern please!

[@briandesign]

got a react animation vid dropping soon

[@philoriser]

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

[@mapachrod]

Visual Studio code

[@nana-z8h3v]

what website/app did you use?

[@wail2670]

u made it once so easy for u :)

[@briandesign]

Was still hard just typing that fast lol

[@Gambino482]

Which text editor do you use?

[@UltimatePoliceClips]

It’s called Visual Studio Code (VS Code)

[@lizzybishop814]

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

[@carlomagnoilfinto5967]

Is there a name for this homepage layout?

[@galihfebrianto9873]

Wow only 9 minutes 😂, Thank You Brian

[@briandesign]

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

[@maxthedevp]

btw is it possible to make it responsible fully with flexbox?

[@polyglot1135]

thank you so much it was very helpful

[@SFBeriK]

Good job, nice page btw:D

[@briandesign]

Thanks!

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

[@pedromorais2454]

Very good, thank you

[@dgswsdfgbsfbfs3260]

You’re incredible

[@aaronstone8729]

great job bro

[@صليعليالنبي-و6غ]

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.

[@nixpaFPS]

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

[@briandesign]

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

[@dakshashar4884]

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]

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

[@samchen5462]

Wow, great video

[@briandesign]

you already know

[@skulduggery-98]

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

[@AuraLamp1]

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

[@diogomartinez7991]

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]

what did you use to create your store?

[@dromotayopauloniya]

nice one bro

[@thsithu5672]

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?

[@kulsoom2788]

what was the last bit of css code for? the line that goes “@media screen….”

[@juliab3326]

Responsive Design. You need to specify how the website is supposed to be displayed on different devices (pc, phone, tablet). In this specific example the defined rules apply to displays with less than 768px in width. 1fr stands for "one fraction". This means: Small screens (

[@haryp95]

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

[@benatkinson3160]

what theme do you use for vs?

[@UsmanAhmad-rz4ls]

can someone explain the padding at 4:00

[@reydelocon629]

hello where did you get that backgroung?

[@BlueLobsterVlogs69]

I tried to follow your code but I have around 20 errors now on the css code

[@ayyanSalam-official]

Can you tell what code editor are you using

[@_b_l_x_c_k_]

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

[@Carsporty]

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

[@unchart_d]

Hmmm, that was quick bro.

[@hyginusandrew4240]

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

[@4stardenzel]

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

[@asterCatto9029]

Whats your editor?

[@Zano1st]

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

[@mapachrod]

Visual Studio code

[@pindist15]

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

[@andreimarinx]

What keyboard do you use

[@yasirusman8641]

make more of these much better then hour long courses

[@hevargaming5351]

What app dose you use?

[@_b_l_x_c_k_]

So it resize as well?

[@anonymousmask9850]

wow, so cool and funny!!!

[@TheJarvishh]

which software u r using?

[@prodcdebeatz7205]

What is your live server?

[@ajithr116]

Which software are using ??

[@xyhe123]

What is the editor you are using?

[@briandesign]

vs code

[@StolenX]

What program is this?

[@Jadavg55]

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

[@briandesign]

Sure anything specific?

[@Jadavg55]

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

[@deshikshetty997]

Amazing 👍

[@briandesign]

Thanks Deshik!

[@sumukhakb2701]

Nice tutorial. I am working on a project in react, in that project I want to make only certain pages to hidden(overflow-hidden). How to do this, please help me

[@briandesign]

What do you mean certain pages hidden?

[@sumukhakb2701]

@@briandesign I want to set overflow:hidden only to home,about and i dont want it apply all other pages

[@briandesign]

@@sumukhakb2701 why would you use overflow to hide a page? I don't understand what your project is

[@sumukhakb2701]

@@briandesign Here is my design in figma, here i want set overflow:hidden property to only home and not to about page, but when i apply this it doesnot work, content is still overlowing www.figma.com/file/lazvEF82CRVXzn7fQ59p7j/videoder

[@briandesign]

have you tried asking on stackoverflow?