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

Access the Sigma web development course playlist: • Sigma Web Development ...
➡️ Source Code: github.com/Cod...
➡️ Notes and CheatSheets: www.codewithha...
➡️ English Subtitles are now up for all the videos!
►Checkout my English channel here: / @programmingwithharry
►Instagram: codewithharry
Download UltraEdit Trial for Free: bit.ly/UltraEd...
python, C, C++, Java, JavaScript and Other Cheatsheets [++]:
Playlist: • Coding CheatSheets 🧾 b...
►Learn in One Video[++]:
Python Course with 5 Projects: • Python Crash Course in...
Python[15 Hr]: • Python Tutorial For Be...
Python Advance[3.5 Hr]: • Python Programming Cou...
Python[1 Hr]: • Learn Python In Hindi ...
Python[2 Hr]: • Python Tutorial In Hin...
Python[15 Min]: • 15 Minute Python Tutor...
JavaScript[1 Hr]: • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial...
php[1 Hr]: • Learn Php In One Video...
php[2.3 Hr]: • Php Tutorial for Begin...
php[Project]- • Login And Registration...
HTML[30 Min]: • HTML 5 Tutorial For Be...
CSS[8.5 Hr]: • CSS Tutorial In Hindi ...
CSS[1.4 Hr]: • CSS 3 Tutorial For Beg...
Wordpress[3.2 Hr]: • How To Make a WordPres...
Angular[2 Hr]: • Angular Tutorial in Hindi
Java[2.3 Hr]: • Java tutorial in hindi 🔥
Web Scraping[1 Hr]: • Web Scraping Tutorial ...
MongoDB[2 Hr]: • MongoDb Tutorial For B...
Numpy[1 Hr]: • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tu...
Linux[1 Hr]: • Linux Tutorial For Beg...
JQuery[1.1 Hr]: • jQuery Tutorial For Be...
Git and GitHub[1.1 Hr]: • Git & GitHub Tutorial ...
►Complete course [playlist]:
React: • React Js Tutorials in ...
Python- • Python Tutorials For A...
OOP Python- • Object Oriented Progra...
Java: • Java Tutorials For Beg...
JavaScript- • JavaScript Tutorials I...
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials I...
C++- • C++ Tutorials In Hindi
Git & GitHub- • Git and GitHub Tutoria...
Android Dev- • Android Development Tu...
Python GUI- • Python GUI: Tkinter Tu...
Web Development- • Web Development Tutori...
Python Django: • Python Django Tutorial...
Projects Using HTML, CSS & Javascript- • Projects Using HTML, C...
Data Structure and Algo: • Data Structures and Al...
Follow Me On Social Media
►Website (created using Django Rest & Angular): www.codewithha...
►Facebook: / codewithharry
►Instagram: / codewithharry
Twitter: / codewithharry
Comment "#HarryBhai" if you read this 😉😉

[@AJSTUDIO07]

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

[@owaisahmadshah6744]

Every day I am very excited for your coming video.

[@rdxprince8745]

me also bro

[@TejasWasnik]

Tutorial 40 done. ✅ SIGMA BATCH OP!

[@RAHAT_PY]

NICE WORK BRO

[@pratikkumarsingh8114]

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

[@umarsiddique1207]

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

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

[@Ravimandal952]

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

[@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

[@swastikachatterjee8814]

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

[@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

[@KnowledgeBoxInfinity]

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

[@navedkhansta]

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

[@sayantan2.1shorts50]

Superb excited for projects❤❤❤

[@akashparmar7861]

best web devlopment course on youtube

[@Kingofbackbenchers]

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

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

[@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🔥🔥🔥🔥🔥💥

[@liliandel]

I'm very Excited for Ex 6

[@Beauty_salon56]

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

[@movehard1851]

❤️🙏 Sigma Batch OP ❤️🙏

[@mdsahilkhan5535]

this course is exciting me every day

[@Prashant_2_1_0]

Best Ever Course 💀

[@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❤😀

[@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

[@ShubhVerma-CSE-ENGR]

Sigma Batch OP❤❤

[@rohitstudyclube7270]

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

[@shantanu_saraf]

this series is so addicting

[@Coding_contents]

# SIGMA BATCH OP❤❤

[@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

[@OmairZahid-y8j]

Sigma Batch OP!

[@Debojyoti_Saha]

nice sir.. just salute you ..

[@mayanksharma_WebDeveloper]

Sigma Batch OP.

[@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 💖💖

[@yug.gaming]

sigma batch op 🙌🙌

[@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; }

[@vansolaarth9600]

Sigma batch is op 🎉

[@amitmauli]

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

[@ayushmaanraturi]

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

[@AnshumanPM]

Sigma Batch OP 🔥

[@KaranpurWalaOfficial]

Amazing harry Harry bhai OP

[@tockastudent52]

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

[@mdsohanurrahmanhridoy1343]

✅Completed40❤

[@HassanAli-qi3fm]

Harry Bro you're awesome

[@akashparmar7861]

great sir for this free course

[@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); }

[@himanshujha7919]

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

[@YourCricPoint]

sigma batch always op

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

[@Bestmomentsboys]

Sigma Batch is OP❤

[@ayushparate4745]

41th Day Completed 5star⭐⭐⭐⭐⭐

[@Code_gen]

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

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

[@KishanSolanki001]

Sigma batch go❤

[@SigmaCoder.]

Sigma Batch OP...🔥

[@vishalchouhan-z7y]

sigma bacth op

[@gamingbeasts111]

#Sigma Batch OP❤❤

[@manshalkhatri9289]

Like the Solution videos ,🙌

[@Iplhiligh2024]

I also finished this exercise 💪💪💪 #SigmaBatchOP

[@stellen996]

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

[@Muhammadkamran-lp1ig]

Sigma batch is op❤

[@AsadUllah-l8y8o]

GREAT JOB ❤❤❤

[@AshwithRai-qs8ob]

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

[@SonuKumar701]

1st year student like here

[@realsecret]

Kau college tar

[@ItsAndroidDeveloper]

I also in 1st year

[@VampireGaming138]

I am in in Bscit 1 st year

[@Progamer57]

1st year ka mtlab 11 hota h kya

[@ItsAndroidDeveloper]

@@Progamer57 11 ka matlab years he ya 11standard

[@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

[@rahulpawar.47]

Yes I am did it 5 exercise ❤👑

[@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

[@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

[@himanshumishra5857]

Sigma Batch OP from Nepal

[@Lv_La_Lr]

Harry Sensei OP ❤❤

[@hamnajaveed9249]

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

[@TraptiGupta-s2s]

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

[@faizbaloch18]

Very good sir from Pakistan ❤

[@ManishKushwaha36]

0:11 Sigma Batch op

[@anjanbonster1]

Ten class students learning this❤❤

[@Sabach993]

Sigma batch op ❤❤❤❤

[@jannie_wannie]

So Far So Good !!

[@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 ,

[@owaisahmadshah6744]

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

[@sahilmaharjan4010]

Sigma Batch OP⭐⭐⭐⭐⭐

[@a8hi_24__]

Harry bhai kya bnaya apne wa 😂

[@KrishnaKumar-kj5sw]

hey hello

[@a8hi_24__]

@KrishnaKumar-kj5sw hlo

[@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

[@anujchaudhary4724]

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

[@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!!

[@xyzmasoodofficial]

Sigma batch OP🎉🎉

[@bhoorasco2826]

❤❤ Sigma batch OP ❤❤

[@manishprakash3527]

2 Din ka gap hone se m video ni dekh paya or sala tb se video dekhne ka flow hi tut gyaa😥😒 Na video dekh para hu na practice 😥 21 Video Piche Chla gya m ab😐

[@hiphop861]

I also finished this exercise #SigmaBatchOP

[@mawaisseo3281]

SIGMA BATCH OP 🔥

[@learndaily01]

Harry bhai ...op❣️

[@KartikMittal-jb3ek]

vid_40 completed!

[@sambhavheda]

sigma batch op lets go ex5

[@CricketFanClubvm1wy]

Sigma Batch OP

[@Amaan895p]

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

[@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

[@RohanDasRD]

5 Million is close

[@Engineering_Unlocked]

thnx bhaiya :) completed on 8/3/24

[@rajafahad6619]

which programming language should we choose? please tell us

[@kirtigupta7655]

#day 40 completed

[@biswajeet9826]

40!! Aa gaya hoon mein!!