How to Make a Website Using CSS Flexbox

In this video, you will learn how to make a simple one-page Webpage using HTML and CSS Flexbox. This project is good for beginners who are learning about HTML and CSS and want to do some practice projects.
.

[@kwhat]

I spent most of the day attempting to find a decent tutorial on how to structure a basic webpage and this is by far the best video. Thank you very much!

[@viralworld955]

I love this clean code, you are not using extra divs to confuse begginers and the best thing is you are using semantic elements which make your code extravagant... Can you please create more videos of this?

[@bahauddinchishte]

Mann please don't stop making content for noob! I can't thank you enough for this video. It helps me a lot. Everyone creates projects like this without any explanation or clue they just write the code and show but you do these both in a short time! Thanks a lot again, from Bangladesh!

[@yasinfarzanali]

holy shit. you're succinct, explained EVERYTHING you did, gave the right amount of data, got to the point, didn't waste time on a dumb intro, and, AND you're better than my web dev teachers!

[@SGWEBDEV]

Thank you for your kind words :)

[@user-kn4oi9oh4i]

One of the best tutorials ever! Its good to know how flexbox is used in real life projects! Thank you!!

[@raclandcaptainmahesh3486]

Simple and very effective way you designed ,developed and explained 💯,, come with more , just keep same simplicity but effective 👍👍👍

[@soumyajitdey5720]

Wow very simple yet cool landing page! I believe this SVG is from undraw. I am very afraid of using CSS but i think I'll start now seeing how easy it was to design this simple yet elegant page.

[@johnmason4264]

Great video, and a very good form of explanation. I really enjoyed it. Keep up the great work :)

[@JediPhantom]

Good tutorial, clear and well explained

[@ulamusadag6901]

I appreciate you , you're perfeeeeeeeeeeeeccccccccccct, simple, effective, easy, understandable you must be a lecturer and a professional one, this my first video for me but dammmmmmn I'll go through your entire videos. Thank you for sharing.

[@anybcd]

you write clean codes and very articulate in explaining each line of code.Thank you

[@ephraimsalas6417]

Thanks bro. Keep posting

[@manishkumar-bw5iv]

Amazing..Thank you so much sir

[@muki4861]

fala buraz u Škopino i moje ime, pomogo sinam za OSMIĆA Allah te nadogradio!!!!!!!!!

[@envision_79]

Very well explained. Thanks a ton!

[@erdrindemi145]

Yo thx i just started to do computer stuff like this and u actually helped me more then my teacher does

[@karthicksj1936]

Super bro ur explanation is good and giving this code is very useful

[@kaly3877]

I think you are awesome cos you also explain your process very clearly including shortcuts you use

[@klaudiaizabela78]

Very clear tutorial! Thank you

[@believer847]

Tnx for clean tutorial for landing page!

[@uulecrocodile8437]

thank you! just needed a refresher and this video was perfect for that!

[@voicee6744]

Well done, what makes you different is that you clarify some stuffs that others just write it

[@anushreesharma726]

Awesome video... Learned many things from it.. Keep up the good work ❤

[@bitingbutt]

Thank you so much for the simple tutorial. It's what I really need, not some high production complex stuff.

[@ubaidkhan1490]

I'm lucky to have found this tutorial. You teach really well

[@riteshmauryafullstackdevel3753]

This is very helpful, thank you so much for making this video and good luck.

[@joshh4234]

This was very good. Thank you!

[@pankajtomar7944]

Excellent explain sir

[@amiralisalehi1955]

It was really great. Thank you 😊💓

[@josephwilson28]

Brother you have one more subscribe, your explication is fantastic, and you create a site for beginners and who can use for some intermediate. Now try to create a site a little bit difficult, so that we will learn in different ways withyou. Your channel is one of the different I see, Congratulations Brother.

[@mahadev1050]

Awesome👍👏

[@nailcandy]

This was excellent!

[@Rajakumar-yg4nc]

Well explained

[@denniswilmot3086]

amazing brother

[@user-jy4tg6qy4i]

I love it man

[@yonathanalemayehu5700]

Jst simply splended

[@jeyakani1827]

Very useful video to me... tq 💫

[@rafaolszak1146]

Thank you for this tutorial 👌

[@camilohuerta4994]

thank you!!! so useful

[@Rawarart]

clean code, easy to understand. definitely sub

[@amigorankers7486]

great how clean code is this...i am subscribing

[@kieran2347]

Nice video tutorial. Thank you

[@SGWEBDEV]

Glad you liked it Kieran :)

[@RahulSingh-1]

Very basic but helpul....

[@waterfall-1969]

Great Video

[@mininusequeci]

Very useful!

[@MeenatchiSundaramM]

very nice explanation

[@charlestoneoyoo]

Thank you so much sir, this came handy. explained in a concise and comprehensive way ...Sure all my doubts have been cleared. Thank you once again for the conteent and channel

[@SGWEBDEV]

You are most welcome

[@sardarzed_X]

Brother can u also provided resources link in description that you have used in video Btw Great Work Keep it Up🥰

[@mohamedriadh0]

thx man that was very helpful

[@skshahin5837]

big thanks bro

[@shahrulamir983]

Nice work bro. Want to ask when exactly we use other flex properties to define width such flex grow instead of using "width:30%"

[@plabmadeeasy]

Thanks for this!

[@achmadjulian74]

thank you very much sir🙏

[@aaroncatolico7550]

I thought that you should use the CSS grid for main website structure, then use Flexbox to handle the smaller inner elements of the website.

[@mr.respect9728]

Nyc

[@ajayrabari433]

Helpful video.

[@SGWEBDEV]

Glad to hear that Ajay :)

[@GhulamMustafa-fz9dm]

Excellent

[@ZanderKodehode]

Thanks so much

[@manishkumar-bw5iv]

Make more such videos

[@heliamohammadi3556]

niceeeeeeee

[@plabmadeeasy]

You've got a new subscriber

[@educentre7079]

thankyou so much

[@umarbutt7825]

Nice Video

[@Arnold2.0]

❤❤

[@abhiraj1011]

Thanks

[@museplays3335]

Thank you bruh

[@GameZoneX749]

Really good 👍🏻 tutorial

[@SGWEBDEV]

Glad you think so!

[@techtalentblueprints]

Thank you

[@najmudheenkalapatil4785]

Good video but some problems : hig speed and hard to follow, black screen with red text of class names and id that not clear in robust network resolution (480p), otherwise this is the good tuturial

[@SGWEBDEV]

I will rectify my problem in the videos to come

[@arpitkhandelwal901]

very good tutorial but could have been better if you added responsiveness to the website

[@behmenquliyev]

resbonsiv veb sayt .

[@museplays3335]

sour could you make a video on this how we can change this desktop version to mobile layout?

[@nadeemakramansari1331]

I really like your landing page. Can you make full website ?

[@user-gl3xb1bl3c]

Why we use width 30% in content-left, instead can I use margin?

[@juliusmanuelrobias5199]

where did you get the images?

[@eyewuenemurphy-akpieyi2623]

Please do you have full course on html css and java?

[@shokintouch348]

It would be better you put the links for images to download and use in our project and explain more about after pseudo class

[@MS10.football]

Sir how to make animated pictures that you have putten on your thumbnail..?

[@paprisaha5610]

Please explain.... Why there is underline coming under the texts of the left section

[@Dan-vv5kl]

Thank you for the amazing course! Btw where can I download the background and logo image, I couldn't find them in the code folder I downloaded.

[@SGWEBDEV]

i have used freepik.com for the images

[@techmix4160]

where is code folder?

[@myosotisalderson]

hello thanks for your video, to bad not have resource (images logo, and hero banner)

[@suneelkumar-ju8up]

is there any github url for the landing page

[@newonenewone8685]

Would you mind telling us the name of this site ? Thanks a million

[@Shiraz_Mazhar]

which vs code theme?

[@estudioslavida8061]

can you put the pictures images so we can do it ourselves

[@kamallwagun2081]

Sir where to find such type of image plz give me the link

[@jamesdarnel]

At 10:26 when your selecting the "a" tag why did you need more than the "a"? Also please go through adding the underline animations in greater detail. I do not understand what all the attributes/setting were doing individually. Thanks in advance

[@SGWEBDEV]

so as to be more specific, since i need to target the a tag inside the ul, otherwise all other a tag would also get the styling which i intended for the navlinks.. its better to be more specific than to mess the styling of other elements accidently. Hope you understand Regards

[@jamesdarnel]

@@SGWEBDEV I thought that was the reasoning, Thank you! if possible can you also can you go through adding the underline animations in greater detail. I do not understand what all the attributes/setting were doing individually. Very helpful video by the way, you area wonderful instructor.

[@SGWEBDEV]

@@jamesdarnel ok i will make a video on that topic

[@jamesdarnel]

@@SGWEBDEV Thanks! i cant wait to see it! BTW im actually having trouble with animation. its appearing above the links! ul li { padding: 0 20px; text-decoration: none; color: #3a3a3a; position: relative; } li a::after{ content: ""; display: block; height: 4px; width: 0; background: #c4c4f7; transition:all .5s; } li a:hover::after{ width: 100%; } please help if you can.

[@SGWEBDEV]

@@jamesdarnel I checked this, it's appearing at the bottom. here is the codepen link - codepen.io/Devrishi-Gupta/pen/ZEeROra

[@darshankothari7180]

sir to center the LI (home -navigation) and make it responsive

[@Vedic_Wisdom_og]

why have u written display property in ::after?

[@user-pu2kd8xd9g]

how to get the pictures he is using?

[@timmycrown5378]

no link to the code and pictures used.. Please drop

[@ibukunoluwadawodu1019]

Please where can I download quality illustration for a web design?

[@SGWEBDEV]

I use premium freepik.com resources

[@leleemagnu6831]

Great video, thank you. Pity the link is spam!!! And it is SPAM!

[@spacelover2868]

how do download background images

[@whard9961]

i love you

[@GhulamMustafa-fz9dm]

Link for download project.??

[@techmix4160]

How to get this code file?

[@AdTechLearningHub]

Could you please share the code?

[@davidbaraiya2649]

How to find this type of img ?

[@SGWEBDEV]

freepik.com

[@techtalentblueprints]

calc(100vh - 100px) is not working for me. Still I getting scroll bar. How can I remove it? please help.

[@SGWEBDEV]

check the spacing between 100vh and 100px. if you write like this (100vh-100px) it will not work. add space and then check

[@techtalentblueprints]

@@SGWEBDEV I checked, and it's working but still got small space below because of that scroll bar appear. Is there any other suggestions to remove it?