🌐 Responsive Web Development: Building Websites for All Devices! 📱💻🖥️
Вставка
- Опубліковано 20 лип 2023
- Welcome to our comprehensive "Responsive Web Development" lecture! In this engaging session, we will equip you with the skills to craft websites that shine on every device, from smartphones and tablets to desktops and laptops! 🌐📱💻🖥️
In today's digital world, users expect a flawless browsing experience, regardless of the device they're using. That's where responsive web development comes into play. Our expert instructors will guide you through the principles and techniques that enable websites to adapt and deliver optimal performance on all screens.
Through practical examples and real-world projects, you'll learn how to design layouts that adjust effortlessly, images that scale perfectly, and navigation that remains user-friendly across different devices. With the mobile-first approach, you'll discover how to prioritize content for the best experience on small screens, while still catering to larger ones. 📐✨
Whether you're a budding web developer or an experienced professional looking to expand your skillset, this lecture is tailored for you. Join us as we demystify the art of responsive web development, empowering you to build websites that reach a wider audience and leave a lasting impression.
Don't miss this opportunity to become a master in crafting websites for all devices. Enroll now and embark on your journey towards creating the best user experiences across the digital landscape! 🚀🌈
#responsivewebdesign #webdesign #frontenddevelopment #mobilefirst #userexperience #webdev #webdevelopment #responsivedesign #webdesigners #coding #onlinelearning
![[GAMECHANGER🚀] Project 1: Modern Web Development | HTML | CSS | JS](http://i.ytimg.com/vi/InvSEpJUXu4/mqdefault.jpg)
![[GAMECHANGER🚀] Project 1: Modern Web Development | HTML | CSS | JS](/img/tr.png)
Start 🎉
04:46 - Units
28:27 - Absolute vs Flexbox(properties)
37:00 - Media Queries
42:38 - Important key points to remember
Practice! Practice! Practice!
End ❤
Yaar khud kyu nhi dete time stamps video me
@@akashpandey1215 watchtime and ads
Sarthak Bhaiya is one of the best teacher in sheriyans coding school❤
Beautiful topics sir would videos best
😢😢😢😢😢😢😢❤
Pura yt chaan mara…itni detailed video kisi ne nahi banai…to the point and really easy…ty …from 🇵🇰
Watched the whole video without replaying or even getting bored. Believe me, even after completing the whole 1 hr 25 min video I can still watch more without any hesitation... And thats what makes this channel, one of the best for learning development. ❤️❤️❤️
0:00 Introduction of the course
2:07 Starting of course
3:56 Entry of edito
04:46 - Units
28:27 - Absolute vs Flexbox(properties)
37:00 - Media Queries
42:38 - Important key points to remember
Practice! Practice! Practice!
45:00 Responsive web development practice with solution
1:21:00 tricks of website hack😉
Thank you for sharing your expertise with the world. You have made a significant impact on my web development journey, and I'm sure countless others feel the same way. ☺☺☺☺
500 coment se jayda ho gai
tq
Truck work ni horhi Mery sy
One Like for Akarsh 👍
Itne din se web development pd rha hu lekin Aaj ye video dekh ke such me maja aa gya 😁😁😁
Thanks sir 😊
In CSS, "em" stands for "em-height," which is a relative unit of measurement used to define sizes and spacing in a way that is dependent on the font size of the parent element. One "em" is equal to the current font size of an element,2em= 2*size of the parent element and so on.
Are bevkufo unhone Jan bujh kr bola h mujhe nhi pta h , comment me mujhe batana, kyuki bhaiya ji ko comment hi chahiye tha😅😅
All friemds who came here to study , u are at the right place . They have alot of knowledge . Get knowledge from here and utlize it
This is litterally the best Web dev learning channel , your coding skills are too great!. Thanks for teaching this . Love from Pakistan
agree
em: "em" stands for "emphasized" or "emphasis." In CSS (Cascading Style Sheets), it is a unit of measurement relative to the font size of the parent element. For example, if the font size of the parent element is 16 pixels, 1em is equal to 16 pixels. If an element has a font size of 1.5em, it means the font size is 1.5 times the font size of its parent element.
rem: "rem" stands for "root em." It is similar to "em" in that it is a unit of measurement relative to the font size, but instead of being based on the font size of the parent element, it is based on the font size of the root element of the document (usually the element). This makes "rem" more predictable and easier to manage in complex layouts, as it is not affected by nested elements.
Both "em" and "rem" are commonly used in web design for specifying sizes such as font sizes, margins, padding, and other layout properties
Are bevkufo unhone Jan bujh kr bola h mujhe nhi pta h , comment me mujhe batana, kyuki bhaiya ji ko comment hi chahiye tha😅😅
bhai bhai, kamal kr diya
@@softmedun6794 are nhi pta tha bhaiya ab jo imp nhi h wo bhi kya yaad krke chlenge .
@@mradulsonare2458 ha 🤣
Chat-GPT ho to kya kuch nahi ho sakta 😂😂😂
Thanks to the Sheriyans team for providing premium content for us.
This is the best channel in the entire UA-cam web development community.❤
In the context of web development and CSS (Cascading Style Sheets), "em" and "rem" are units of measurement used to define the size of fonts and other elements on a webpage relative to the base font size. Here are the full forms of both:
1. EM: The term "em" comes from the letter "M" in the early days of printing when the width of the letter "M" was often used as a standard for the size of a font. In the context of web development, "em" stands for "em-square," which is a square whose size corresponds to the current font size. In other words, 1em is equal to the font size of the element to which it is applied.
2. REM: "REM" stands for "Root EM." It is similar to the "em" unit, but it is relative to the root element (typically the element) rather than the parent element. This means that the font size specified in "rem" is always relative to the root font size, regardless of the nesting of elements. This makes "rem" particularly useful for creating more consistent and predictable font sizes across the entire webpage.
Using "em" and "rem" allows developers to create flexible and responsive designs that adapt to changes in the base font size, making it easier to build accessible and user-friendly websites across various devices and screen sizes.
copy paste krne ko nhi bolna tha asaan basha me likhde jese mene likha ha
Maine chatGPT se Uthaya Hai taaki sub Deep Mai samaj sake..
"Wow, I can't thank you enough for creating this incredible topic focused on responsive website design!. Your clear explanations and step-by-step tutorials have helped me grasp the concepts of responsive design like never before. It's evident that you're not just sharing your knowledge, but also your passion for creating seamless user experiences across devices. Keep up the fantastic work! Looking forward to more enlightening content."
Quality >>>>>>>>>>Quantity
And this video is the Quality video for responsiveness ❤❤❤
Appreciatted to the instructuctor, he explains quite well with practical examples without making it boring like theory, Thank you so much for explaining the main main topics and with good explanations..
Please bring full clones and react js series also,
T.y✨
In Cascading Style Sheets (CSS), "em" stands for "emphemeral unit". It is a scalable unit of measurement that defines the size of an element relative to its parent's font size.
Here are some examples of "em" in CSS:
1em: Means "equal to the current font size"
2em: Means 2 times the current font size
0.5em: Means 6pt
2em: In a 2em unit of measurement, if your font is 11px (11 pixels), then 2em equals 22 pixels
Seriously bro, thanks a lot. I was struggling with responsiveness and now you have made it all clear. Thanks a lot again.
Premium and quality videos freely available in this UA-cam channel .Loved it ❤❤❤
I found this channel 1 month back and have watched all the "Learn What Matters" series. You people are really raising the bar for web development, please keep going and continue giving the best quality content in the coolest way possible.
भगवत गीता आहे पाठीमागे.... हरे कृष्णा हरे राम
Bhai तुम तो मेरे लिये सच मे भगवान् निकले, मैने अभी पूरा video complete नही किया, और starting देख के ही बहुत अच्छा लग रहा है,
आपको ये भाई के तरह से लाख लाख शुक्रिया, क्युकी youtube मैं ऐसा lecture मिलना rare से भी कम है.
Thanks a lot and blessing in abundance ❤❤❤❤❤
In a word *fantastic*
Bro you literally made me thought what has I learned all these months.
Usually the long lectures becomes boring over time and an individual began to loose it intrest. But with your case your energy and learnings kept me engaged throughout the video. Can't thankyou a lot ❤
Thank you for sharing your expertise with the world. You have made a significant impact on my web development journey, and I'm sure countless others feel the same way. Your dedication to educating and helping others is truly commendable. 👍👍
i just love the energy you bring to coding man after coding all day long when i watch any of your video it makes me learn more to code
bhai pehele insta reel pe fan tha ab yee vedio dekh ke bilkul bada fan hogaya mera responsive ka knowledge bilkul next level per aa chuka hai
one of the best video in youtube for learn resposive webdevlopment
I was always confused about CSS units but now I can use very confident anywhere your teaching style is unique thanks a lot
Your UA-cam channel is an absolute gem when it comes to explaining complex topics. The clarity and depth with which you break down intricate subjects is truly impressive. I appreciate how you seamlessly combine knowledge and entertainment, making learning an enjoyable experience. Your dedication to providing accurate information and engaging visuals sets you apart. Thank you for sharing your expertise and making learning accessible to all. I eagerly anticipate every new video you upload, as I know I'll walk away with a deeper understanding and a sense of awe. Keep up the phenomenal work!
'em': element ( parent element )
'rem': root element ( element )
Dhanyavaad Sarthak ji, I used have confusion in units and responsiveness. Now, I have clear understanding. 🙏🏽
Very good teaching skills
25:35 "em" means element and "rem" means root element, like in your example you set font-size in your parents div element and all the nested elements getting the font-size according to that in case of em and in rem the value mentioned with rem getting the actual size according to the root element font-size , by-default it's value is 16 px.
em has no full form , it's just consideration unit em, rem
nah bro, its em-heigth, "emphasis"
@@ShreyasGalgale i think Chatgpt is wrong then.
Sarthak sir Is the one of the reason I study from sheryians..❤.
Good content sir...
Student needs these types of teacher only.. 💯🙌
hi
your comment are very nice and you also nice.
🌟 Wow, I just finished learning about responsive web design, and your tutorial was an absolute game-changer! 🚀 Your clear explanations and step-by-step guidance made the whole process so much easier to grasp.
🙏 Thank you, sheryians coding school, for sharing your expertise and putting in the effort to create such a valuable resource. Your dedication to helping learners like me is truly inspiring. 👏
I appreciate the time and energy you invested in making this tutorial. It's evident that you have a passion for teaching, and it reflects in the quality of your content.
Looking forward to more insightful content from your channel! Keep up the fantastic work! 👍💻
I found wonderful channel of all other channels and he is making so much effort. It's impossible that viewers don't understand his meaning . He is just amazing🎉❤
I like the content very much, Thank You for creating such valuable videos, also which I come to know that we can well define "vmin" as "atmost" and "vmax" as "at least" while practicing. Thanks again for this video!
Perfect video ❤
At perfect time 😊
I'm learning css and confused about responsive 🔥
Thanku Sheryians Coding School 🏫 For this video
This playlist has made a great impact on my student life with Web Development and the interest to learn the depths. Thank you Sheriyans and Harsh Bhaiya and Sarthak bhaiya. #responsivedone
One of the best free content available for Responsiveness
This series has been an absolutely fantastic learning experience! I sincerely appreciate the effort you've put into creating such high-quality content. I can't wait to see more of your captivating web 3.0 designs and engaging JavaScript tutorials featuring real-time projects. Thank you so much for the dedication and passion you bring to this! ❤❤
This series has been an absolutely fantastic learning experience.
series ka koi playlist hain kya.?
Hey😍😍 Sarthak, your explanations are exceptionally well-crafted, and I find it easy to relate to your perspective, perhaps because we belong to the same age group. Whatever the reason may be, I genuinely appreciate and love your impeccable presentation style. However, there's always room for growth and enhancement. Keep up the fantastic work, and I'm sure your presentation skills will continue to improve and captivate your audience even more!
❤
bahut badiya video banai h bhai mujhe responsive banani nhi ati thi to is bali video ko dekh kr me seekh gya video banane ke liye sukriya ❤
I really like your way of teaching ,I was wandering for any channel to learn how to make responsive websites, then came through your channel .You taught in sooo deep and easy way .Gr8 job and thanks
Best Ever Channel Seen For WEB DEVELOPMENT . Amazing Teaching , Explain concepts in easier way so that students can grab easily . Thank You so Much For all lectures . Keep more uploading , growing . REACH ++
Coding with you is so much fun. I particularly appreciated how you added so much fun to make it easier for others to understand the code.🧡🧡🧡
Bhaiya ke skills 🗿 Bhaiya ki teaching 👌 Bhaiya ki examples 🧒
"Wow, this video on Responsive Web Development is absolutely fantastic! 🌟 I'm genuinely impressed by the way it breaks down complex concepts❤❤Keep up the amazing work, and please continue to share more insightful content like this! Thank You Sheryians Coding School 🤘👍👍👍🤘
Best Part :
1] first part : basic explanation was very nice and clear.
2] Last mobile tip.
To improve:
designing explanation was bit fast, if you try to make that part also bit slow and same as the speed of first part then its 100% perfect.
now also its nice, but need to go back and check again.
This is what I think.
Thanks waiting for more contents.
Thanks for the tips!
@@sheryians making everything in vw is causing too much problems,
in the video you only showed inspect mode for mobile device
you did'nt show that when you make your tab smaller , all text starts becoming smaller and smaller
Here I got all the knowledge I need about HTML and CSS thanks bro.
I watch many videos on UA-cam but, you are the best teacher in coding school 👍
Thanks bhaiya ❤
One of the best teacher for web development I have ever seen ❤❤
#responsivedone
Best educational video i've watched till date. I learnt a lot in a single video, which now-a-day is very difficult but you made that possible.
Hats of to your work Sarthak bhaiya ❤
It is very helpful video for me as I have started my web development journey last 2-3 days and I have learnt html and little about css. I was very confused about resposiveness before watching the video but now I am very happy that I have seen this video in my early phase of web development journey... Thank You
Kaha tak puhancha bhai
well done sir waiting for more wonderful content
Why this guy is thanking us, he is providing knowledge and skills in simpler way, we should be thankful to him.
hi
Thank you Bhaiya For Providing us this Level of Content ♥
love from pakistan 😍😍😍😍
The best video on responsiveness till date....Thanks bhai for taking my fear about css.. Before this video i always get stuck while writing css what to do next and even if i would be able to create a website i always worry regarding its responsiveness but Bhai apny sab suljha diya.. Thank you for making such amazing content...
em means the size equal to or relatively equal to the Capital "M" in alphabets that's why we call it em ,,,M ex: font-size of 1M (em)✨ Thanks for sharing this content nice explanation🎉
Sarthak bhaiya ❤
Hi Sarthak, amazing tutorial on responsive web dev, thank you for going in so much detail and developing a landing page as an example. Sarthak, would be wonderful if you could show us how to tackle a complex layout (like the miranda retro website) in a responsive way. They have used grid in the original website but it seems a bit confusing to practice.
Alright we’ll cover that in further videos
@@saar_thack keep up the great work, we’re learning so much!
Summary: Flexbox vs. Absolute Positioning:
Flexbox: Preferred for its flexibility in item alignment and distribution.
Absolute Positioning: Less adaptable to changes in screen size.
Relative Units (vw, vh, %):
vw (viewport width): Percentage of the viewport's width.
vh (viewport height): Percentage of the viewport's height.
% (percentage): Relative to the size of the parent element.
Responsive Typography:
Style text with relative units (em, rem, percentages) for proportional adjustments based on screen size.
Mobile-First Approach:
Design for mobile devices first, then enhance for larger screens.
Flexible Images and Videos:
Use max-width: 100%; to scale images and videos proportionally with the container.
Visibility and Display:
Visibility: hidden (not visible, takes up space) and visible (visible).
Display: none (not visible, doesn't take up space).
Flex Wrap:
Use flex-wrap to control item wrapping in a flex container.
Options: nowrap, wrap, wrap-reverse.
Media Queries:
Utilize media queries (max-width, min-width, max-height, min-height) for responsive styles. Written by me,improved by chatgpt
You are a Rising Star ⭐ 👍
The energy of Sir is really appreciated!!
It means “emphemeral unit” which is relative to the current font size. For example, if the current font size was set to 16px, then the bottom padding would be set to 160px. letter M, which is where its name originated
bhai aap bohot achha samjhate ho, idk what your qualifications are but you are definitely a qualified teacher :)
Kindly make the playlist of 'Learn what matters'. It will help us to learn the necessaries first. Thanks ❤
please sir🙏
0:00 Introduction of the course
2:07 Starting of course
3:56 Entry of editor
bhai kaafi time baad ek badiya explanation video mili hai .....well done Sarthak Bhai👍👍
Abb jake mera responsive wala confusion clear hua.❤thanks for the topnotch content ❤
Your content is very good and knowledgeable ❤❤❤❤
Interview questions for webdev (Html, Css and JS) Please make a detailed video on this topic ❤
pooray youtube par esa video nahi mila bohat he achay tareeqay say samjhaya hai apnay or bohat achay say samjh agaya hai thank you sir 👍
#responsivedone best video on responsiveness
Start 🎉
04:46 - Units
28:27 - Absolute vs Flexbox(properties)
37:00 - Media Queries
42:38 - Important key points to remember
Practice! Practice! Practice!
And this is quality content 😊
aag laga diya , aag laga diya , aag laga diya🔥🔥🔥🔥
bhiya awsom Content maja agaya 👍👍👍👍👍🙏🙏🙏🙏🙏
Thank You!! bhaiya bahut kux seekha diya apne
Ek nooo content thanks UA-cam for landing me this channel in recommendation ❤❤❤
Got clear concept of responsibness available on UA-cam ❤
wah baba wah kya padhya hai bhai jabardast sala aisa video pura youtube pr nhi h sab jagah dhooda lekin jb nhi mila tb ye mila aur mila to aisa mila ki dhakad jabrdast thanks bhai
Bhai ki girlfriend ka naam bhi lagta hai Riya hai😂😂😂
bhaiya The websites we are creating can be easily created by Ai websites builders or plugins, so I'm confused like should I learn web development or not? will you create a comprehensive video on Ai and web development for students who are learning web development where you will be discussing how can use Chatgpt as a web developer? Love you ❤
bro i understand your problem , i have created 2 videos of ai related websites ,you amy find helpful --ua-cam.com/video/GP0RW_9ZEJI/v-deo.html
No,brother you should learn web development but with AI and you should know how to use chatgpt as a web-developer Okay.
@@user-uf5of8io1s that's what I wanna know how to use it as a web developer?
For the first time, I understood responsiveness very clearly. Thanks, man
your video was really worth it
the level of details that you provided
the in-depth knowledge you have with this subject is just mind-blowing
watched your video for the first time and definitely became a fan of it
samajjh aa riya hai !!😂 😂
bhai last wali trick bohat majedaar thi. now i don't have to change page again and again Thanks.
Literally Most Underrated UA-cam Channel For Coders!
Loved it Boysssss
Keep Rocking!
this is hands down one of the best video on responsive web development. Must watch.
Bro really these guys are real heros they are provoding info and teaching us thins like we are their brother. Thanks for all the content Bro.
sarthak sir ji thank youuuuuuuuuuuuuuuuuu .......................................................
Yaaaar Really Amazing 😍
Finally Meet lagends Of Web On UA-cam. Jo Dil sy Kam krwaty Hein and totally different from Others.
Love From Pakistan ❤❤❤
I have no words to thank this man 🙏 He cleared all my concepts ❤
you guys are the best tutors on UA-cam for web development
Your Examples are amazing
well-done brother
you guys going to hit 1M soon..it's really nice and helpful❤
Thanks brother bht acha samjaty ho
Osm 🔥 , Love you brother 🙂👍
Very helpful thing which is render website through ip address, Thank you Bhai
Subhan Allah subhan allah 😍