Тёмный

Learn to build a Responsive Website Using CSS Flexbox 

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

In this video, You will learn to make a simple responsive website using HTML and CSS Flexbox. This project will be helpful for a beginner who knows the basics but wants to learn how to apply the basics to build something useful.
What you will learn -
1) making responsive navigation using javascript.
2) Making a Hero section
3) Working with Form elements
4) Aligning content using Flexbox
5) How to use Box Icons
6) Media Queries
etc
Download the project for free - github.com/sgwebdev29/project1
OR
you can support my work by purchasing the template for $1 www.buymeacoffee.com/sgwebdev...
I hope you will like this video.
Regards
Dev

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

 

3 июн 2021

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 85   
@jyotishyamu
@jyotishyamu 2 года назад
Thank you for the tutorial. I can now use box icons for my web site. This tutorial gave me confidence to rewrite the flex box code.
@_trzn_
@_trzn_ Год назад
Thx for a great video! I really like how you teach short-cuts, along with building the website. Nicely done!
@ZircoBen
@ZircoBen 9 месяцев назад
Thank you for teaching some great shortcuts and making such a nice website as a tutorial! I loved this and it was a great way to continue to see CSS in use and practice it.
@ngawai62
@ngawai62 Год назад
This is what I was looking for.. excellent !
@kymyzaiaidosova3165
@kymyzaiaidosova3165 Год назад
Thank you so much!! Your video tutorial helped me to complete my test task and get my job offer letter🎉😊 Thank you so much again!
@SunnyKumar-kj7wt
@SunnyKumar-kj7wt Год назад
Is video bahut kuch sikhne ko mila . Thank you sir
@krishnanm1459
@krishnanm1459 2 года назад
Nice explain super your video I am learning by your video tnq bro ❤️👍
@zuhaaair6963
@zuhaaair6963 2 года назад
Awesome man, thanks a lot.. but I can't find the images in the github link!?
@yuvrajgupta6341
@yuvrajgupta6341 2 года назад
very nice video sir
@tropic44
@tropic44 2 года назад
Thank you ! this is a great work
@sreeharikalesh8493
@sreeharikalesh8493 Год назад
very nice video bro it helped me complete a project in my job
@weekendprojects1692
@weekendprojects1692 2 года назад
cool work 👌👌👌
@lifealliancegroup
@lifealliancegroup Год назад
Thank you, I am very grateful to you, Sir !!!
@niteshprajapat7918
@niteshprajapat7918 2 года назад
Thanks for uploading.... Its much useful for me to understand every concepts of css.....
@kazimzaidi5069
@kazimzaidi5069 2 года назад
sir ek sawal hai kafi logo margin-left ya mrgin - right use krty hain naviagtion k ul mai kia hm flexbox ki gap property use nhn kr skty or ek sawal or b tha jb ap ny nav k ul li ko display block kra to to jo block element thy un ki width itni kaisy ho gayie jb k mai kr rha tha to bhot hi choti thi wo part samjh nhn aiya
@Human_Evolution-
@Human_Evolution- 2 года назад
Great job. I learned a lot.
@pratapsingh6480
@pratapsingh6480 2 года назад
It's really good, nice explanation and good content.
@harshilmaheriya6374
@harshilmaheriya6374 Год назад
How did you put showmenu class in style.css without putting it in html?? I did same as shown in the video.. but when i click on menu btn nothing is happening..
@jamesdarnel
@jamesdarnel Год назад
hello, great tutorial, thank you! i cant seem to find the images though. can you update your GITHUB
@ironwallbrands
@ironwallbrands 2 года назад
images folder not included in project folder on github. How do I get them please?
@ludwigvanbeethoven5005
@ludwigvanbeethoven5005 Год назад
How do I find the pictures used in this tutorial?
@deezedpotato
@deezedpotato Год назад
Awesome man!!!!!!!!
@Prodbyhope.mp3
@Prodbyhope.mp3 2 года назад
I followed your instructions for the box icon EXACTLY how you explained it and the box icon will appear as if it is there by pushing my nav bar to the left for space but it shows up invisible? Beyond frustrating UPDATE: I have solved this by using the icon I was trying to implement as a font instead of a web component. That seemed to fix the issue for me
@anjalichauhan5169
@anjalichauhan5169 2 года назад
thank you so much 😊😊
@brownlion2559
@brownlion2559 Год назад
This is good
@bluesdog88
@bluesdog88 2 года назад
Great video, I would like to see the occasional glimpse at the website progress though, very well explained brother ;)
@SGWEBDEV
@SGWEBDEV 2 года назад
Thanks :)
@heitorbarcellos5312
@heitorbarcellos5312 Год назад
sorry i didnt find the images where can I find?
@abdullahsafi6600
@abdullahsafi6600 2 года назад
It's Superb Video ,,, Love and Respect from "PAKISTAN"
@SGWEBDEV
@SGWEBDEV 2 года назад
Thanks a lot for your encouragement dost :)
@juliusmanuelrobias5199
@juliusmanuelrobias5199 11 месяцев назад
thanks! you have sent from above dude lol.
@priyajadhav8240
@priyajadhav8240 2 года назад
its very useful for beginners ..you r doing great work
@SGWEBDEV
@SGWEBDEV 2 года назад
Thank you for your kind words :)
@rossmyhill2201
@rossmyhill2201 2 года назад
The signup form spills out at the bottom on mobile size???
@shu_ikhsa2868
@shu_ikhsa2868 2 года назад
thank u
@lacosteamine1286
@lacosteamine1286 5 месяцев назад
coolest
@chernettariku1975
@chernettariku1975 Год назад
Very helpful and clear
@trupti9194
@trupti9194 2 года назад
Bhai please make more videos in html css responsive websites
@amaranwachukwu7966
@amaranwachukwu7966 2 года назад
I just saw this video it very straight and I love it. pls can you tell me why my menu box doesn't show but my designs acknowledges the changes but it is invisible
@SGWEBDEV
@SGWEBDEV 2 года назад
did you link the css file properly?
@amaranwachukwu7966
@amaranwachukwu7966 2 года назад
Yes I did the background I added is visible
@mirhumeza
@mirhumeza 3 года назад
It's really helpful for me.
@ayazaslam1362
@ayazaslam1362 2 года назад
its not helpfull its a toucher to watch u.
@Prodbyhope.mp3
@Prodbyhope.mp3 2 года назад
@@ayazaslam1362 tf are you
@DeepeshKukreja-lb1wx
@DeepeshKukreja-lb1wx 11 месяцев назад
where i can find images
@SodiqOlaniyi
@SodiqOlaniyi Год назад
the box icon i imported is not showing. i tried font awesome and that works but it is still not big enough. I tried commenting out the unversal fontsize property and the icon got to the right size. I tried styling it on its own but that doesnt work. Any idea to resolve this block?
@SodiqOlaniyi
@SodiqOlaniyi Год назад
issue resolved, gave the font awesome a class of icon-size, then set .icon-size{ font-size: 5rem; }
@jamesdarnel
@jamesdarnel Год назад
@@SodiqOlaniyi thanks for updating. you rock!
@manjeetsingh-gk4fx
@manjeetsingh-gk4fx 2 года назад
where u created the class showmenu in html file, without get any showmenu class you start coding in css and .js file , and its working how. litrally i didn't see any class showmenu in html file.
@SGWEBDEV
@SGWEBDEV 2 года назад
Show menu class gets toggled on and off using js when the hamburger icon is clicked. If you add showmenu directly in html then the menu will be opened all the time that's why I am toggling this using js. Thia is how you create dynamic webpage. Under the hood I am adding showmenu class to the menu using javascript.
@protamim_32
@protamim_32 Год назад
Just BOOOOOOOOOOOOOOOOOM
@AshikSarkar-yu7jy
@AshikSarkar-yu7jy Год назад
Why would you write the CSS first for elelemts like h1 p img without writing HTML on a beginner tutorial. This is quite misguiding.
@Igor-vk8fl
@Igor-vk8fl Год назад
Right?! I noticed that too, gave up on this "beginner" tutorial after 8 minutes.
@samialvi4226
@samialvi4226 Год назад
It's called utility classes we use them to don't repeat the process for every element like h1 on every section it makes life easier
@prabu2778
@prabu2778 Год назад
What vs theme sir
@seunopeyemi8120
@seunopeyemi8120 Год назад
This is a great video... I was following closely but I got stucked because i don't really understand flexbox tricks. I don't really understand the theories behind display: flex, justify content etc.. Do you have a tutorial that addresses this
@aashishbhawsar4179
@aashishbhawsar4179 2 года назад
hi sir.... i'm interested to know about your vs code theme in this tutorial.....??
@SGWEBDEV
@SGWEBDEV 2 года назад
Its monokai Aashish
@islamelmajic263
@islamelmajic263 2 года назад
thanks broo
@SGWEBDEV
@SGWEBDEV 2 года назад
Welcome :)
@islamelmajic263
@islamelmajic263 2 года назад
@@SGWEBDEV realy you are so telented but i have aquestion i am abeginer front-end i only made 3 websites till now how can i be as you ? should i make 100 project to be as you , you even know the hsl of number of each color and you are so quik while you are writing how can i be as you ? thanks for answering
@SGWEBDEV
@SGWEBDEV 2 года назад
@@islamelmajic263 Thank you for the kind words but I am no way near to what I want to be. You should put in the hard work because talent does not play a great part. You should focus on mastering the concepts rather than focusing on the number of projects. Learn the concepts thoroughly. That will help you. For my courses, I use 2 computers, one in which I refer to the code that I have premade and In the other, I do the recording. So in a way, I just copy and paste the code with my commentary added to it. I can’t remember the HSL value, no one does. Maybe someone with eidetic memory will remember, but I cannot. As for typing, I do have a good typing speed because I worked to improve it. You can very easily do it. There are many websites where you can learn how to type. And lastly don’t try to be anybody. Be yourself. Everyone has to go through a process. You are a beginner now but down the road, if you keep up your zeal and continue to do the hard work, you will definitely improve and realize your goal.Wish you all the best. Regards Dev
@islamelmajic263
@islamelmajic263 2 года назад
@@SGWEBDEV great advices thank you ❤
@astorgadexterpelaez3502
@astorgadexterpelaez3502 11 месяцев назад
+1 sub ka pards
@sreeharikalesh8493
@sreeharikalesh8493 Год назад
17:43 mobile navbar
@rioangkasa5364
@rioangkasa5364 2 года назад
haii, can i get jpg file?
@jamesdarnel
@jamesdarnel 10 месяцев назад
i ended up just using stock images of my choice
@Nephros
@Nephros 2 года назад
I get 20px of white space at the top of the page, maybe you know what is causing it? Very good material :)
@ayazaslam1362
@ayazaslam1362 2 года назад
btw he will never reply u. he only reply fake prasing comments.
@ayazaslam1362
@ayazaslam1362 2 года назад
u r f * * k i n g I d i o t u know why? because 15:23 keep margin 0 why need to set 1.6rem why idiot why tell me one benifit. u idiot. stop f * * king with people minds. h1,p,h2 margin: 1.6 then down setting it :0 u r confusing people thats all. so fu for that.
@SGWEBDEV
@SGWEBDEV 2 года назад
I am targeting h1 which is inside the logo div that's why i have used descendent combinator that is represented by a space so for that i have written " .logo h1" which is targeting h1 inside the logo div but for general h1 the margin will be 16 px top and bottom since i have removed the margin of every thing using the universal selector, but for h1,p and h2 outside the .logo i need to have a margin. Hope you understand.
@ayazaslam1362
@ayazaslam1362 2 года назад
@@SGWEBDEV plz plz explain logo ul>li*4 u r trageting .logo h1 descendent selector means "will effect only h1 inside .logo right?". u mean to say h1 in general (any where in page will have 16px margin) accept in .logo h1. thats what u mean to say? if so i understand then :). plz keep up good work and try to explain small small points. thanks for explanation.resubscribe
@ayazaslam1362
@ayazaslam1362 2 года назад
@@SGWEBDEV plz make a video on flexbox deep navigation bar. as i get confuse plz explain in detail. if there is modern or advance way to create nav bar plz do make video and explain in detail. i do stupid mistake making nav bar some time li have full row length bcolor. btw its eassy for me to create without flexbox strange lol.
@sreeharikalesh8493
@sreeharikalesh8493 Год назад
38:54
@user-jn5pv6oo9d
@user-jn5pv6oo9d 9 месяцев назад
You are just narrating stuff not teaching anything, please add more explanations and play around with stuff so that we get to know when to use what
@SGWEBDEV
@SGWEBDEV 17 дней назад
Sure will do
@shortscut7614
@shortscut7614 8 месяцев назад
title is css flexbox and you are using position 😏
@najmudheenkalapatil4785
@najmudheenkalapatil4785 4 месяца назад
Worst tutorial hard to follow he nothing about responsive design 👎👎👎👎
@SGWEBDEV
@SGWEBDEV 17 дней назад
I will try to do my best next time.
@jamesdarnel
@jamesdarnel 16 дней назад
Lol back from the abyss
Далее
Learn To Make Responsive Website Using Bootstrap 5
30:57
Css Animation Effects Tutorial  | HTML | CSS
0:53
Просмотров 639 тыс.
How to take control of Flexbox
16:01
Просмотров 98 тыс.
CSS Tips And Tricks I Wish I Knew Before
12:12
Просмотров 416 тыс.
Learn Flexbox CSS in 8 minutes
8:16
Просмотров 1,4 млн
Responsive CSS Will Never Be The Same
12:08
Просмотров 264 тыс.
5 simple tips to making responsive layouts the easy way
15:54
How to Make a Website Using CSS Flexbox
18:57
Просмотров 80 тыс.
Flexbox or grid - How to decide?
18:51
Просмотров 697 тыс.