Тёмный

How to Make a Website Using CSS Flexbox 

SG WEB DEV
Подписаться 4 тыс.
Просмотров 82 тыс.
50% 1

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

Опубликовано:

 

24 сен 2020

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 134   
@kwhat
@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
@viralworld955 3 года назад
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
@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
@yasinfarzanali 2 года назад
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
@SGWEBDEV 2 года назад
Thank you for your kind words :)
@user-kn4oi9oh4i
@user-kn4oi9oh4i 7 месяцев назад
One of the best tutorials ever! Its good to know how flexbox is used in real life projects! Thank you!!
@raclandcaptainmahesh3486
@raclandcaptainmahesh3486 3 года назад
Simple and very effective way you designed ,developed and explained 💯,, come with more , just keep same simplicity but effective 👍👍👍
@johnmason4264
@johnmason4264 2 года назад
Great video, and a very good form of explanation. I really enjoyed it. Keep up the great work :)
@soumyajitdey5720
@soumyajitdey5720 3 года назад
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.
@muki4861
@muki4861 Год назад
fala buraz u Škopino i moje ime, pomogo sinam za OSMIĆA Allah te nadogradio!!!!!!!!!
@ulamusadag6901
@ulamusadag6901 2 года назад
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.
@JediPhantom
@JediPhantom 3 года назад
Good tutorial, clear and well explained
@karthicksj1936
@karthicksj1936 3 года назад
Super bro ur explanation is good and giving this code is very useful
@anybcd
@anybcd 2 года назад
you write clean codes and very articulate in explaining each line of code.Thank you
@envision_79
@envision_79 3 года назад
Very well explained. Thanks a ton!
@kaly3877
@kaly3877 2 месяца назад
I think you are awesome cos you also explain your process very clearly including shortcuts you use
@manishkumar-bw5iv
@manishkumar-bw5iv 2 года назад
Amazing..Thank you so much sir
@anushreesharma726
@anushreesharma726 2 года назад
Awesome video... Learned many things from it.. Keep up the good work ❤
@ephraimsalas6417
@ephraimsalas6417 3 года назад
Thanks bro. Keep posting
@voicee6744
@voicee6744 Год назад
Well done, what makes you different is that you clarify some stuffs that others just write it
@ubaidkhan1490
@ubaidkhan1490 Год назад
I'm lucky to have found this tutorial. You teach really well
@erdrindemi145
@erdrindemi145 5 месяцев назад
Yo thx i just started to do computer stuff like this and u actually helped me more then my teacher does
@aaroncatolico7550
@aaroncatolico7550 6 месяцев назад
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.
@riteshmauryafullstackdevel3753
@riteshmauryafullstackdevel3753 2 года назад
This is very helpful, thank you so much for making this video and good luck.
@bitingbutt
@bitingbutt 2 месяца назад
Thank you so much for the simple tutorial. It's what I really need, not some high production complex stuff.
@klaudiaizabela78
@klaudiaizabela78 3 года назад
Very clear tutorial! Thank you
@believer847
@believer847 2 года назад
Tnx for clean tutorial for landing page!
@josephwilson28
@josephwilson28 3 месяца назад
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.
@shahrulamir983
@shahrulamir983 3 года назад
Nice work bro. Want to ask when exactly we use other flex properties to define width such flex grow instead of using "width:30%"
@pankajtomar7944
@pankajtomar7944 3 года назад
Excellent explain sir
@uulecrocodile8437
@uulecrocodile8437 Год назад
thank you! just needed a refresher and this video was perfect for that!
@amiralisalehi1955
@amiralisalehi1955 2 года назад
It was really great. Thank you 😊💓
@sardarzed_X
@sardarzed_X 6 месяцев назад
Brother can u also provided resources link in description that you have used in video Btw Great Work Keep it Up🥰
@jeyakani1827
@jeyakani1827 9 месяцев назад
Very useful video to me... tq 💫
@joshh4234
@joshh4234 2 года назад
This was very good. Thank you!
@yonathanalemayehu5700
@yonathanalemayehu5700 11 месяцев назад
Jst simply splended
@Rajakumar-yg4nc
@Rajakumar-yg4nc 3 года назад
Well explained
@amigorankers7486
@amigorankers7486 2 года назад
great how clean code is this...i am subscribing
@kieran2347
@kieran2347 3 года назад
Nice video tutorial. Thank you
@SGWEBDEV
@SGWEBDEV 3 года назад
Glad you liked it Kieran :)
@nailcandy
@nailcandy 2 года назад
This was excellent!
@denniswilmot3086
@denniswilmot3086 2 года назад
amazing brother
@Rawarart
@Rawarart 2 года назад
clean code, easy to understand. definitely sub
@RahulSingh-1
@RahulSingh-1 3 года назад
Very basic but helpul....
@rafaolszak1146
@rafaolszak1146 Год назад
Thank you for this tutorial 👌
@mahadev1050
@mahadev1050 2 года назад
Awesome👍👏
@mr.respect9728
@mr.respect9728 5 месяцев назад
Nyc
@camilohuerta4994
@camilohuerta4994 3 года назад
thank you!!! so useful
@user-jy4tg6qy4i
@user-jy4tg6qy4i 2 месяца назад
I love it man
@charlestoneoyoo
@charlestoneoyoo 6 месяцев назад
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
@SGWEBDEV 2 месяца назад
You are most welcome
@MeenatchiSundaramM
@MeenatchiSundaramM Год назад
very nice explanation
@waterfall-1969
@waterfall-1969 5 месяцев назад
Great Video
@abhiraj1011
@abhiraj1011 8 месяцев назад
Thanks
@mininusequeci
@mininusequeci Год назад
Very useful!
@plabmadeeasy
@plabmadeeasy 3 года назад
Thanks for this!
@plabmadeeasy
@plabmadeeasy 3 года назад
You've got a new subscriber
@achmadjulian74
@achmadjulian74 2 года назад
thank you very much sir🙏
@skshahin5837
@skshahin5837 3 года назад
big thanks bro
@manishkumar-bw5iv
@manishkumar-bw5iv 2 года назад
Make more such videos
@Arnold2.0
@Arnold2.0 4 месяца назад
❤❤
@mohamedriadh0
@mohamedriadh0 2 года назад
thx man that was very helpful
@behmenquliyev
@behmenquliyev Год назад
resbonsiv veb sayt .
@ZanderKodehode
@ZanderKodehode Год назад
Thanks so much
@GhulamMustafa-fz9dm
@GhulamMustafa-fz9dm Год назад
Excellent
@heliamohammadi3556
@heliamohammadi3556 2 года назад
niceeeeeeee
@nadeemakramansari1331
@nadeemakramansari1331 10 месяцев назад
I really like your landing page. Can you make full website ?
@umarbutt7825
@umarbutt7825 2 года назад
Nice Video
@educentre7079
@educentre7079 Год назад
thankyou so much
@techtalentblueprints
@techtalentblueprints Год назад
Thank you
@ajayrabari433
@ajayrabari433 3 года назад
Helpful video.
@SGWEBDEV
@SGWEBDEV 3 года назад
Glad to hear that Ajay :)
@arpitkhandelwal901
@arpitkhandelwal901 3 года назад
very good tutorial but could have been better if you added responsiveness to the website
@museplays3335
@museplays3335 2 года назад
sour could you make a video on this how we can change this desktop version to mobile layout?
@najmudheenkalapatil4785
@najmudheenkalapatil4785 6 месяцев назад
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
@SGWEBDEV 2 месяца назад
I will rectify my problem in the videos to come
@museplays3335
@museplays3335 2 года назад
Thank you bruh
@user-gl3xb1bl3c
@user-gl3xb1bl3c Год назад
Why we use width 30% in content-left, instead can I use margin?
@GameZoneX749
@GameZoneX749 6 месяцев назад
Really good 👍🏻 tutorial
@SGWEBDEV
@SGWEBDEV 2 месяца назад
Glad you think so!
@eyewuenemurphy-akpieyi2623
@eyewuenemurphy-akpieyi2623 2 года назад
Please do you have full course on html css and java?
@shokintouch348
@shokintouch348 2 года назад
It would be better you put the links for images to download and use in our project and explain more about after pseudo class
@Dan-vv5kl
@Dan-vv5kl 3 года назад
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
@SGWEBDEV 3 года назад
i have used freepik.com for the images
@techmix4160
@techmix4160 2 года назад
where is code folder?
@juliusmanuelrobias5199
@juliusmanuelrobias5199 Год назад
where did you get the images?
@newonenewone8685
@newonenewone8685 Год назад
Would you mind telling us the name of this site ? Thanks a million
@jamesdarnel
@jamesdarnel 3 года назад
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
@SGWEBDEV 3 года назад
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
@jamesdarnel 3 года назад
@@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
@SGWEBDEV 3 года назад
@@jamesdarnel ok i will make a video on that topic
@jamesdarnel
@jamesdarnel 3 года назад
@@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
@SGWEBDEV 3 года назад
@@jamesdarnel I checked this, it's appearing at the bottom. here is the codepen link - codepen.io/Devrishi-Gupta/pen/ZEeROra
@MS10.football
@MS10.football 2 года назад
Sir how to make animated pictures that you have putten on your thumbnail..?
@myosotisalderson
@myosotisalderson 2 года назад
hello thanks for your video, to bad not have resource (images logo, and hero banner)
@paprisaha5610
@paprisaha5610 Год назад
Please explain.... Why there is underline coming under the texts of the left section
@Shiraz_Mazhar
@Shiraz_Mazhar 2 года назад
which vs code theme?
@suneelkumar-ju8up
@suneelkumar-ju8up Год назад
is there any github url for the landing page
@estudioslavida8061
@estudioslavida8061 3 года назад
can you put the pictures images so we can do it ourselves
@thechoosen4240
@thechoosen4240 8 месяцев назад
Good job bro, JESUS IS COMING BACK VERY SOON; WATCH AND PREPARE
@darshankothari7180
@darshankothari7180 Год назад
sir to center the LI (home -navigation) and make it responsive
@Vedic_Wisdom_og
@Vedic_Wisdom_og Год назад
why have u written display property in ::after?
@leleemagnu6831
@leleemagnu6831 2 года назад
Great video, thank you. Pity the link is spam!!! And it is SPAM!
@kamallwagun2081
@kamallwagun2081 Год назад
Sir where to find such type of image plz give me the link
@AdTechLearningHub
@AdTechLearningHub 2 года назад
Could you please share the code?
@timmycrown5378
@timmycrown5378 2 года назад
no link to the code and pictures used.. Please drop
@user-pu2kd8xd9g
@user-pu2kd8xd9g 5 месяцев назад
how to get the pictures he is using?
@whard9961
@whard9961 2 года назад
i love you
@spacelover2868
@spacelover2868 Год назад
how do download background images
@GhulamMustafa-fz9dm
@GhulamMustafa-fz9dm Год назад
Link for download project.??
@ibukunoluwadawodu1019
@ibukunoluwadawodu1019 2 года назад
Please where can I download quality illustration for a web design?
@SGWEBDEV
@SGWEBDEV 2 года назад
I use premium freepik.com resources
@techmix4160
@techmix4160 2 года назад
How to get this code file?
@ayio1412
@ayio1412 11 месяцев назад
Where are the files
Далее
How to Properly Layout A Website (For Beginners)
14:50
Просмотров 538 тыс.
Learn Flexbox CSS in 8 minutes
8:16
Просмотров 1,5 млн
شربت كل الماء؟ 🤣
00:31
Просмотров 7 млн
What it feels like cleaning up after a toddler.
00:40
Learn to build a Responsive Website Using CSS Flexbox
1:00:47
Responsive Page Layout Using CSS Flexbox
4:45
Просмотров 21 тыс.
Flexbox design patterns you can use in your projects
15:33
How I'd Learn Web Development (If I Could Start Over)
6:55
CSS Tips And Tricks I Wish I Knew Before
12:12
Просмотров 446 тыс.
Learn CSS Subgrid in 14 minutes
14:19
Просмотров 62 тыс.
شربت كل الماء؟ 🤣
00:31
Просмотров 7 млн