Exercise 5 - Solution & Shoutouts | Sigma Web Development Course - Tutorial #40

[@AJSTUDIO07]

I learned 10000X in just 40 videos, and I'm so excited to see what I'll achieve after watching the entire course!

[@TejasWasnik]

Tutorial 40 done. ✅ SIGMA BATCH OP!

[@RAHAT_PY]

NICE WORK BRO

[@owaisahmadshah6744]

Every day I am very excited for your coming video.

[@rdxprince8745]

me also bro

[@pratikkumarsingh8114]

Maza aa gaya bhaiya, kuch bolne ke liye sabdh nahi hai !!!!!!!!!! Itna badhiyan course wo bhi free main, unbelievable!!!!!

[@WaseemZaman2007]

YES I SO EXCITED SIR AND ALSO DONE EXERCISE -5 ......LOOK SO BEST ,.... THANK'S FOR YOUR EFFORT SIR..................MAY ALLAH BLESS YOU SIR WITH ENDLESS HAPPENISS............FROM PESHAWAR PAKISTAN.

[@umarsiddique1207]

You're one of the most honest people in the world harry bhai❤

[@Ravimandal952]

Harry sir is the best teacher of coding love you sir Thanks.

[@Kingofbackbenchers]

❤ se sukriya for Free web development course I'm a poor guy. अगर ये कोर्स paid होता तो मैं स्यायद ही पड़ पता अगर मैं success हुआ तो वजह तुम्हारे फ्री वाले वीडियो होंगे 😢❤❤🎉❤🎉❤🎉❤🎉❤🎉❤🎉🎉🎉❤❤🎉🎉❤🎉❤❤🎉🎉❤🎉❤👍🇮🇳👍🇮🇳🇮🇳🇮🇳🇮🇳जय हिंद

[@swastikachatterjee8814]

Thank you for solving this sir! I was having some problems but my approach was same! You are amazing! #sigmabatchop!❤

[@RehanPathan-3221]

Great job on providing the solution and shoutouts in Tutorial #40 of the Sigma Web Development Course! I really appreciate the effort you put into explaining the solution clearly and giving shoutouts to contributors. It's these little details that make the learning experience more engaging and rewarding for viewers. Keep up the excellent work, and I'm looking forward to more tutorials from Sigma Web Development Course! 🌟💻🚀 #SigmaBatchOpl

[@KnowledgeBoxInfinity]

#SigmaBatchOp I completed the challenge successfully. Thanks a lot sir.

[@cheryrj8305]

harry always motivates for learning and hardworking he is such a postive teacher , learning from him is really easy , eveything is concise and easy he is the best teacher , thank u soo much harry sir

[@navedkhansta]

Haris bhai aap bahut achhe ho aap log ki bahut help krte ho thank you ❤

[@Vishalkumar-j6n]

Harry sir after the Arrived sigma web development Express to the destination you should bring the new "Sigma App Development Express" Please and we will all support 💖💖

[@anita_singh23]

#SIGMA_BATCH_OP! I HAVE BEEN WATCHING THIS COURSE FROM STARTING AMD I HAVE NOTICED A LOT OF DIFFERENCE IN ME AND HAD LEARNT A LOT TILL HERE. I AM EXCITED TO FINISH THIS FULL COURSE SOON AND WILL BE CREATING WEBSITE WITH CONFIDENCE.

[@tockastudent52]

I'm late but I'm covering my backlog and coming soon to you... I'm enjoying everything. Too much interested Love it❤

[@ja3r]

Harry Bhai I am super excited for next exercise and literally Harry Bhai maja aa rha hai iss #SWD (Sigma web development) ko karne me and we are very lucky ki hume ye web development course free 🆓 of cost 💵 Mila hai 👋🏻! Thankkk youuuuuuuuuu harry bhai❤😀

[@Beauty_salon56]

Very well done , harry bhai May GOD give you its reward for helping others.

[@sayantan2.1shorts50]

Superb excited for projects❤❤❤

[@liliandel]

I'm very Excited for Ex 6

[@akashparmar7861]

best web devlopment course on youtube

[@bijaldharne5677]

12:08 Harry bhai. I made border-radius as 50% for the image I used and I got a perfect circle.

[@abhishekmathur1042]

Sigma course of your harry bhai is OP🔥🔥🔥🔥🔥💥

[@movehard1851]

❤️🙏 Sigma Batch OP ❤️🙏

[@mdsahilkhan5535]

this course is exciting me every day

[@Prashant_2_1_0]

Best Ever Course 💀

[@ayushmaanraturi]

Tutorial - 40 Done ✅ #SigmaBatchOP #HarryBhai Thank you ❤ Harry bhai for this amazing course

[@ShubhVerma-CSE-ENGR]

Sigma Batch OP❤❤

[@Coding_contents]

# SIGMA BATCH OP❤❤

[@elonmusk23213]

The video is a tutorial on how to solve exercise 5. The creator starts by designing the layout using HTML semantic tags and CSS. They create a navbar, body, header, footer, and main content. They use flexbox and apply styling to make the layout visually appealing. They also add two boxes, one pink and one blue, and adjust their dimensions and padding. They add a welcome message and a footer with a sticky navbar. They also style the text box with padding, border, background color, and font size. Finally, they adjust the margins to achieve the desired layout.

[@yug.gaming]

sigma batch op 🙌🙌

[@vansolaarth9600]

Sigma batch is op 🎉

[@mayanksharma_WebDeveloper]

Sigma Batch OP.

[@Debojyoti_Saha]

nice sir.. just salute you ..

[@KaranpurWalaOfficial]

Amazing harry Harry bhai OP

[@OmairZahid-y8j]

Sigma Batch OP!

[@AnshumanPM]

Sigma Batch OP 🔥

[@shantanu_saraf]

this series is so addicting

[@Memorialschoolchak]

Sir, for how many videos will this CSS last?

[@SohamSinghRajput69]

I think css aur grid ke exercise man ke chalo 5 video

[@AnshumanPM]

Total 78 video ayega sayad

[@SohamSinghRajput69]

sayad 103

[@AnshumanPM]

@@SohamSinghRajput69 Intro me 1 to 78 seat likha hai isilye 😂

[@SohamSinghRajput69]

nahi be do aur course jisme 103 video hai

[@mdsohanurrahmanhridoy1343]

✅Completed40❤

[@rohitstudyclube7270]

who people not wasting there time and learning this course they will become the legends of the universe

[@akashparmar7861]

great sir for this free course

[@FOOTBALLAddicted342]

#challeneg accepted note: this is not responsive web (just a demo ) * { margin: 0; padding: 0; } header { position: sticky; top: 0; } nav { background-color: rgb(80, 96, 245); padding: 25px; } ul li { list-style: none; display: inline; padding: 40px; font-size: 20px; color: white; font-weight: bold; } main { background-color: rgb(49, 134, 252); /* display: flex; */ /* flex-wrap: wrap; */ } .container { border: 2px solid black; display: flex; /* padding: 20px; */ justify-content: center; /* align-items: center; */ /* margin: auto; padding: auto; */ gap: 200px; /* flex-wrap: nowrap; */ } .boxes:first-child { /* border:2px solid black; */ height: auto; width: auto; /* margin:50px auto 50px 50px; */ /* margin-right: 100px; */ } .boxes:nth-child(2) { /* border:2px solid black; */ height: auto; width: auto; /* margin:50px auto 50px 50px; */ /* margin-left: 100px; */ } /* card 1 */ .card { height: 600px; width: 350px; border: 2px solid black; background-color: rgb(210, 214, 245); border-radius: 10px; padding: 20px; margin: 30px; } .img { width: 350px; border-radius: 10px; } div span { border: 2px solid black; padding: 5px 8px; border-radius: 10px; background-color: rgb(111, 137, 213); border: none; } .name { margin: 16px 0px; } .heading { margin: 25px 0px; } .para { font-size: 20px; } .btn { text-align: center; margin: 30px auto; padding: 0px; } div button { font-size: 20px; border-radius: 10px; padding: 10px 25px; background-color: rgb(111, 137, 213); border: none; } .btn button:hover { background-color: rgb(159, 206, 237); /* color: rgb(50, 151, 240); */ } /* text */ .text { /* border:1px solid black; */ font-size: 20px; border-radius: 50px; /* margin:20px 400px; */ display: inline-block; text-align: center; padding: 40px 10px; /* display:inline; */ /* background-color: rgb(111, 137, 213); */ } .foot { background-color: black; color: white; text-align: center; padding: 30px; border: 1px solid white; } .p1 { margin: 30px; font-size: 35px; border: 2px solid white; display: inline-block; padding: 20px 30px; border-radius: 20px; } .p2 { display: inline; /* border:2px solid white; */ font-size: 25px; margin: 20px 30px; } .txt-img { background-color: black; /* align-items: center; */ justify-content: center; color: white; border: 1px solid white; } .photo { border-radius: 50%; width: 150px; float: left; margin: 10px 20px 10px 40px; } .orangebox { background-color: orange; height: 30px; width: 30px; border-radius: 50%; bottom: 20px; right: 20px; position: fixed; } Services Projects About Us Contact Us

[@HassanAli-qi3fm]

Harry Bro you're awesome

[@muhammadsaif6130]

i couldn't make the best and couldn't finish the website layout but i tried and learn a new thing that we should add top:0; to make some nav sticky....

[@bhishek_]

#Harrybhai aap google form bna do ek taki ham log answer submit kar paye or sabke answer aap access kar paye, kafi sare logo ka motivation aapka shoutout bhi hai and of course sigma web development course to hai hi

[@amitmauli]

Harry Sir India will win the World cup....❤

[@anchalsingh0000]

#doubt Harry sir mujhe widht me problem aa rhi h width 100% lens pr bhi neeche scroll bar aa ja rha h #doubt

[@YourCricPoint]

sigma batch always op

[@Bestmomentsboys]

Sigma Batch is OP❤

[@himanshujha7919]

best web deb course by harry bhai...❤❤

[@Amaan895p]

Pls some one help, i mistakenly disable my "Live preview icon" on vscode how do i enable it again? #SigmaBatchOP

[@ayushparate4745]

41th Day Completed 5star⭐⭐⭐⭐⭐

[@SyedAliMurtaza-sv8pz]

*{ padding: 0px; margin: 0px; } header{ position: sticky; top: 0px; } .orange-box{ background-color: orange; height: 33px; width: 33px; border-radius: 23px; position:fixed ; bottom: 12px; right: 23px; } nav{ background-color: pink; height: 34px; } .container{ background-color: green; margin: 11px 34px; text-align: center; padding: 34px 23px; } main{ background-color: black; color: white; border: 2px solid white; padding: 23px; } .box1{ background-color: palevioletred; height: 60vh; width: 40%; display: inline-block; margin: 0 23px; } .box2{ background-color: blue; height: 60vh; width: 40%; display: inline-block; margin:0 23px; } footer{ background-color: bisque; height: 150px; } .text-box{ background-color: black; padding: 50px; margin:0 50px; color: white; text-align: center; font-size: 23px; border-radius: 23px; border: 2px solid white; }

[@stellen996]

thank you so much sir. i had so much fun solving this exercise .

[@Hafijur0211]

🎯 Key Takeaways for quick navigation: 00:00 🏆 *Introduction and Exercise Solution Overview* - Overview of the video, discussing the solution to Exercise 5. - Shoutouts to viewers who successfully completed the exercise. - Emphasis on the importance of learning and continuous effort. 10:51 🎨 *Designing Layout Elements* - Creating a navbar with HTML's semantic tags and setting background colors. - Establishing a container with specific styling and designing two colored boxes within it. - Demonstrating the process of making layout elements responsive and adjusting margins and padding. 12:20 🧩 *Styling and Positioning Additional Elements* - Implementing a sticky navbar using the "position: sticky" property. - Adding a fixed position orange box for visual appeal. - Fine-tuning styling details, such as colors, sizes, and border radius. 13:15 📣 *Shoutouts to Viewers* - Giving shoutouts to viewers who successfully completed Exercise 5. - Encouraging the importance of learning and hard work. - Expressing gratitude to the viewers for their continuous support. 15:03 🚀 *Encouragement and Closing* - Encouraging viewers to focus on learning and self-improvement. - Reminding viewers that their hard work will contribute to their success. - Promoting access to the playlist and source code for ongoing learning. Made with HARPA AI

[@sukharanjandebanath6310]

body{ background-color: aqua; } *{ padding: 0; margin: 0; } nav ul { list-style: none; display: flex; /* padding: 5px; margin: 5px; */ background-color: rgb(28, 158, 158); justify-content: center; } header{ position: sticky; top: 0; } li{ padding: 10px; margin: 7px; font-family: Arial, Helvetica, sans-serif; font-weight: 700; } li a{ text-decoration: none; color: aliceblue; /* border: 2px solid gray; padding: 5px; border-radius: 19px; */ } .container{ display: flex; margin: 20px; justify-content: center; } .container .item:first-child{ background-color: antiquewhite; } .item{ height: 580px; width: 580px; border: 2px solid black; margin: 20px; background-color: rgb(167, 129, 80); } img{ height: 60px; width: 60px; border: 2px solid black; border-radius: 40px; position: fixed; right: 0; /* z-index: 1; */ bottom: 0px; } .tx{ margin: 40px; padding: 110px; } .kk{ margin: 40px; padding: 20px; border: 2px solid black; background-color: rgb(43, 216, 216); font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-weight: 500; border-radius: 10px; } .kkk{ border: 2px solid black; height: 40px; width: auto; background-color: rgb(171, 183, 179); }

[@AsadUllah-l8y8o]

GREAT JOB ❤❤❤

[@hamnajaveed9249]

So beautiful ,so elegant just looking like a WOW ,just looking like a WOW.................................. #SigmaBatchOP

[@owaisahmadshah6744]

Today finally I got a heart from my motivation. This heart will make my whole year. Love you @CodeWithHarry bhaii

[@gamingbeasts111]

#Sigma Batch OP❤❤

[@malayaranjanswain8282]

Harry bhai position tag use karke bhi ye ho sakta hai ya nahi

[@AshwithRai-qs8ob]

Tip: If you want a perfect circle then, border-radius:50%;

[@Code_gen]

I took 4hours to design this nav bar 😂❤❤ but i did It 🎉🎉🎉

[@rajafahad6619]

which programming language should we choose? please tell us

[@KishanSolanki001]

Sigma batch go❤

[@jannie_wannie]

So Far So Good !!

[@Kamlesh43545]

harry bhai ek request hai please course thoda fast kardo please ek video bhut kam hai ek din me please din me do video banana shuru kar do please course thoda fast ho jayega is se please please very humble request hai aapse

[@vishalchouhan-z7y]

sigma bacth op

[@GameVerse215]

May i know .. when you write lorem32 then it auto generates 32 words … without copy paste the words .. thanks

[@Iplhiligh2024]

I also finished this exercise 💪💪💪 #SigmaBatchOP

[@Ashish...114]

iss baar pura solve hi nhi hua😤 isliye it's okay yadi mujhe shout out nhi mila😉 bs apki mehna + mera effort = somthing fantastic will happen for sure 😊💓 lv u Bro:⁠) #SigmaBatchOp

[@manshalkhatri9289]

Like the Solution videos ,🙌

[@UzairAwan121]

which theme and font harry is using in vscode

[@SigmaCoder.]

Sigma Batch OP...🔥

[@TraptiGupta-s2s]

this man is legend , bro thank you for everything ... #SigmaBatchOP

[@Abhishek-qe9tr]

Container me padding aur box me margin same result hoga ya Different plz Tell.

[@music54321]

#CodeWithHarry, harry bhai can we use position fixed in navbar instead of using position sticky in header ??

[@nishandeb2054]

try kiya mene but kam nahi kara

[@anjanbonster1]

Ten class students learning this❤❤

[@Lv_La_Lr]

Harry Sensei OP ❤❤

[@FF_INX]

#Doubt - Harry Bhaiya! I used table to create the container and it's boxes is it a Good Practice? Pls tell❤

[@ganeshtechandediting885]

it's better to use table only when content on website actually need of table,using table for design this layout prevent you to clear and practise the concept of padding,margin ,display,position

[@kishankoli2269]

Sir inspect me properties ki dimensions ko change kiese karte ho?

[@Muhammadkamran-lp1ig]

Sigma batch is op❤

[@biswajeet9826]

Don't know what day it is for me But its time for milestone till 50 to start Each day Proclamation till a set of 10 vids finishes Alright I am good to go!! Jai Hind!!

[@nilayguhe1927]

Harry bhai..is it good to refer ChatGPT for creating layouts...because as a beginner it's quite confusing while we create such website...please tell

[@cheryrj8305]

10:55 i got the same prob when i was developing this layout , it took me a hour to realize i have to put the position in the parent , i was so confuse why it was not stickng but then i google it and found the solution 😂i almost use the same method as you are using harry sir ,

[@seridongamingtume.14]

Please 🙏 I am requesting you to upload videos in day 🙏🙏 #SigmaBatchOp

[@ApnaCinemaReview]

Github kyu open nahi ho rha sir

[@rahulpawar.47]

Yes I am did it 5 exercise ❤👑

[@faizbaloch18]

Very good sir from Pakistan ❤

[@anujchaudhary4724]

I maded a really nice layout with good color combination and also responsive

[@foodwayswithankita1457]

sir box1 and box2 ma tau padding dani chahiya thi thau apna margin kyu di haa?

[@sahilmaharjan4010]

Sigma Batch OP⭐⭐⭐⭐⭐

[@Sabach993]

Sigma batch op ❤❤❤❤

[@ranjeetroya1]

Bro I like and Practice all your courses in this playlist, I have question when you start JavaScript? #SigmaBatchOP

[@FaranSahotra-vt9zn]

Harry bhai agr ap nav mein he position fixed kr dety toh wo thk nhi tha??

[@learndaily01]

Harry bhai ...op❣️

[@ManishKushwaha36]

0:11 Sigma Batch op

[@saurabhsoni4325]

HARRY BHAI OP

[@himanshumishra5857]

Sigma Batch OP from Nepal