Web Development Course | Frontend | Level 1 

Are sound hai ek do baar fir se kholo pata nhi kyu har baar shuru mein kuchh logo ke devices mein dikkat aati hai

You are my favorite teacher online & offline. I love you Sir! You are doing a great job. Thanks for everything!

00:01 Level One Front End Web Development 02:27 Creating a competitive edge in web development 06:52 Encouraging healthy competition in web development 09:26 Changing the perception of Indian developers 13:31 New coding school being proposed 15:45 Importance of VS Code and web browser in web development 20:54 Install VS Code and essential extensions for web development 22:28 Setting up the folder and opening with VS Code. 27:08 Introduction to Web Dev Course 29:46 Understanding closed and open tags in web development 33:45 Focus on learning key HTML tags for web development. 35:45 Installing Live Server extension for web development 39:39 Understanding headings and paragraphs 41:32 Opening and using VS Code and browser 45:10 Understanding the concepts of A6 PBI and SP 47:23 Understanding the order list and image tag in web development 52:16 Creating a form in web development 54:22 Understanding different input types in HTML forms 58:19 Understanding div id and class in web development 1:00:28 Creating shapes using div and understanding elements 1:04:48 Coding standards and best practices 1:06:46 Understanding the basics of CSS 1:10:02 Understanding properties and values in HTML and CSS 1:11:44 Linking and styling elements using CSS 1:15:15 Understanding CSS properties for text and fonts. 1:17:02 Introduction to Units and Pixels 1:20:11 Understanding font weight in web development 1:21:42 Using a div to create rectangle shapes 1:24:56 Introduction to CSS properties 1:26:39 Understanding margins and padding in web design 1:29:56 Using position absolute to move elements vertically and horizontally 1:31:32 Learn how to center elements using CSS positioning 1:35:28 How to use Display Flex for layout creation 1:37:12 Positioning and display properties in web development 1:40:21 Understanding the use of space in front-end development 1:42:00 Creating and customizing projects in Web Development 1:45:40 Creating and styling elements 1:47:15 Creating a navigation bar with HTML and CSS 1:51:04 Accessing and using Remix Icons via CDN 1:53:03 Using CSS to style and position elements 1:56:35 Styling text and creating buttons 1:58:15 Styling and configuring text and button elements 2:01:51 Styling HTML elements using CSS properties 2:03:31 Adjusting background color, width, and alignment 2:07:05 Demonstrating image placement and manipulation in web development 2:08:57 Understanding the transform property 2:12:15 Setting up the project and exploring the code 2:14:30 Using display flex to design the layout 2:18:18 Optimizing font size and spacing for web design 2:20:14 Demonstrating how to manipulate and style elements using CSS 2:24:14 Adding and styling an image in web development. 2:26:05 Creating and styling a div element 2:29:38 Fixing position and width for elements 2:31:16 Styling and positioning elements with flexbox and CSS 2:36:06 Changing colors and styling elements 2:37:59 Learning about Flexbox properties 2:41:37 Explaining CSS animation 2:43:24 Understanding nested elements and hierarchy in web development 2:47:21 Adjusting element sizes and properties 2:49:18 Creating and using classes in web development. 2:53:13 Persistence and focus are key for success 2:54:59 Understanding the phase of not feeling like working 2:58:55 Setting font weight and pixel dimensions 3:00:52 Applying background color and elements positioning 3:04:56 Creating a navigation bar and styling it with background color and height 3:07:00 Introduction to web development and some random conversations 3:11:13 Adjusting font size and positioning elements on the webpage 3:13:09 Creating HTML elements and setting styles 3:17:21 Adjusting letter spacing, font size, line height, and font weight 3:19:11 Understanding the structure and content of Dave and Wright 3:23:05 Creating and organizing projects 3:25:07 Exploring reverse image search 3:29:39 Creating and styling a div element

Small Contribution for project 1: animate all image img { height: 400px; width: 250px; object-fit: cover; position: absolute; border-radius: 20px; top: 50%; left: 50%; transform: translate(-50%,-50%); cursor: pointer; transition: all 0.3s ease-in-out; } #img1 { transform: translate(-50%,-50%) rotate(-30deg) scale(1); z-index: 1; } #img2 { transform: translate(-50%,-50%) rotate(-20deg) scale(0.95); z-index: 2; } #img3 { transform: translate(-50%,-50%) rotate(-10deg) scale(0.90); z-index: 3; } #img4 { transform: translate(-50%,-50%) rotate(0deg) scale(0.85); z-index: 4; } #img1:hover { transform: translate(-50%,-50%) rotate(0deg) scale(1.1); z-index: 5; } #img2:hover { transform: translate(-50%,-50%) rotate(0deg) scale(1.1); z-index: 5; } #img3:hover { transform: translate(-50%,-50%) rotate(0deg) scale(1.1); z-index: 5; } #img4:hover { transform: translate(-50%,-50%) rotate(0deg) scale(1.1); z-index: 5; }

Me Dil se bol rha hu ap diserve krte ho 1million subscribe ke ap itna krte ho ham sab ke liye or sath me roadmap ki madad se guide krte ho sab ko or khas kar merko bohot help mili is journey me ksm se bohot kuch sikha h apke tutorial se . Is video se or bhi new new sikhuga ajj .

You are the best teacher in IT industry ❤️❤️❤️ Love you Harsh bhaiya 😎😎 we always support you 🥰❤

Shoutout to Sheryians Coding School! Your tutorials are Tike a coding compass, guiding us through the vast landscape of programming. I appreciate your dedication to making complex concepts crystal clear. Your knack for breaking down intricate topics into manageable steps is a game-changer for learners like me. Keep up the fantastic work and looking forward to the next class!👨‍💻💻 #CodingMastery"

Best RU-vid channel for web development 😊😊

Love your content Keep it up!! I Hope this masterpiece goes out to as many people possible so justice can be done to the hardwork put into making this video

Your coding tutorials are like a guiding light in the sometimes confusing world of programming. I appreciate your ability to break down complex topics into digestible steps, making it so much easier for learners like me. The practical examples you provide really solidify the concepts. Thanks for your dedication to helping us grow as developers!

And there we gooooooooo.....let's goooooooo...plz guys support them they are making so much effort to make amazing and amazing content which paid course of bhaiya's and didi's are not able to deliver...let's support and share the video

your courses are much better than other

Revolution begins 🙌🔥

Wow, I really appreciate the effort you put into explaining [specific concept/topic] in this video. Your clear explanations and well-organized code made it so much easier for me to understand. Thanks for sharing your knowledge and helping the community grow! Looking forward to more tutorials from you."

1:24:00 500px width aur height main same number of pixels ly rhy hain. lkn screen ki width agr 1920px hai, or uski height 1080px hai. jb hum 40% lkhain gye tb width will be 768px and height wll be 432px Computer Screen's width=1920px and height=1080px. then 40% of width(1920px ) will be 768px and 40% of height(1080px) will be 432px.

Am software engineering student and I have made these projects with you .Finally found real platform of learning. Thanks

The most Underrated RU-vid Channel to learn Frontend Development! 💯

Love you bhaiya i stand with you keep on providing content that is above this RU-vid level❤️

Sir, mai pahle didi-bhaya ka video dekhta tha😅, lekin jab se aaplogoka video dekhna suru kya hai tab se Web development bhot intresting lagne laga hai, aur bohot kuch sikhne ko mila hai ❤❤❤, Aur aab Sherians Coding School became my favorite channel.. Matlab iss channel kaa standard kus alag hai♥️♥️ Thank you so much for providing us this level of premium content for free.😊

You guys are something else! You know that? If you don't, just know that you are unique as fu*k and you will always have my respect!! The way you pour yourself into teaching is out of this world. India needs more great people like y'all.

sarthak bhaiya and harsh bhaiya ! MAZA AYA ,, pure session m ruka rha , sach m maza aya

Finally bhaiya aapka purana intro anne laga Dil ko bhot bhot acha laga ...thank you bhaiya 😊❤

Level 1 Timeline: 0:35 Overview 4:18 Expectations 18:44 Browser Installation 20:17 VS Code Installation 22:31 Folder Setup 24:11 HTML Structure 26:05 HTML Agenda 27:35 What is HTML? 28:40 HTML Tags 31:22 Emmet vs VS Code 35:39 Headings 36:03 Live Server 37:00 Default Browser 39:30 Paragraph, Bold, Italic 45:16 sup, sub 47:04 ol(Ordered List) ul(Unordered List) li(List Item) 47:38 image tag 50:30 a tag(HyperLink) 53:00 Forms and Inputs 58:30 Div, ID and class 1:06:34 CSS 1:07:35 Link CSS 1:08:30 Katrina vs Sarthak 1:09:15 how to give style 1:09:46 text color 1:12:42 Background color 1:13:14 CSS boilerplate 1:16:00 Font formatting/ text formatting 1:21:20 Use of Div in CSS 1:22:20 Dimensions (Height, Width) 1:25:17 Margin 1:29:13 Position absolute 1:31:14 center of page(transform: translate(X, Y)) 1:33:22 Display Flex 1:42:12 Project 1 2:11:27 Project 2 3:03:06 Project 3

Sheriyans doing their cool and amazing stuff ....🔥✅

I was expecting ki Project 1 to aise hi asaan sa hoga kuch but I was shocked when you introduced Project 1. Salute to Sheriyans Coding School for providing such a niche category content. Thank you very much.

Bhai mza a gya ❤ jab bhi apki video dekhta hu dil khush ho jata hai keep it up bro ❤🤜😉

You are doing well sarthak and harsh bhaiya 👏🏻👏🏻

Best teacher ever seen in this field😇

Best video on entire frontend ❤

Sarthak Bhai aapse he influence hoke 1 saal phele iss channel pr aaya thaa Prr ab Bss Harsh Bhayia ka pdaana raas aata hai. Aap b Bhoot acha padate ho, But Harsh Bhayia ne Diwana bna rkha hai 🫡

the only youtuber I want to meet personally ❤. I wish delhi se nahi Bhopal se hota I would have joined that school from day one and would have done anything to help and support you.

Nice, your pushing the community.

You are my favorite teacher online .......bhai m aapka fen ho gya

Ek number content, koi nahi hai takkar mei

Best of luck to all of student ❤❤

The teaching skill of this man is very amazing I appreciate ❤❤❤

for sure the best video for learning frontend development or web development..thank you soo much sir for making this video❤️

future changer video of web and love this line agar galti se amir hogaye toh ...

Really Harsh Bhaiya Dill se Respect. ❤Love you Bhaiya

excited for challenge!

His teaching style is slayer ❤

U r the best teacher bro👌

OK, so I am going to be giving you a selfless review of this video. I have started just now, and I know just HTML CSS and basic concept of JavaScript. My websites are rubbish, and let's see what can I do by the end of the video. I saw few concepts were missing, but guys web development is about exploring, explore more topics read documentations. Don't depend on any channel for learning completely, I think even sir will agree on this point. The more you practice, the more you will learn. Here's my review for any new person visiting this video 00:00 - 17:19 ----> Roadmap and some motivation 17:19 - 24:28 ----> installation and setup (You can skip this part if you have already installed it) 24:28 - 1:06:24 ----> HTML it was good and more than enough. If u wish to continue it, it's on u but better if u once revise all the concept and learn to apply it, it will be great. 1:06:24 - 1:42:12 ----> Complete CSS it was short and simple. BEGINNERS MIGHT NEED SOME PRACTICE before going to projects.

The most brilliant teacher! Your way of teaching is impressive ,interesting and problem solving! Thanks Sir (both of you ) I am a developer , you impressed me very much I learned new and new things from you! Allah apko Khush rakhy aor success day! Ameen From : Asim Irshad , Bhakkar, Punjab, Pakistan

Very helpful for me as a beginner. It helped to clear a lot of basics through projects based learning. I think it is very true when he says the videos will be better than any other playlist on you tube. Thanks a lot for this..😀

Bhaiya 1 number padhaye ho aap❤

I'm in love with his teaching skill ( "tum Jo aaye RU-vid Mei baat baan gaye")..❤️❤️👌😂 underrated as hell...tbvh...

I support your every video and share my friends who doing web development! Because you guys really work hard for us ♥️♥️♥️

Mern full course + 5 full stack projects this is what audience want

Thankyou bhaiya for level 1 love you bro

You are amazing teacher I am learning web development course from Apna college but on screen apki video dikhi or mne apki video Dekhi to bhot Kuch sikhne k liye Mila ❤ or ek ek cheez detail me smjhaiwi he 🎉🎉🎉 thanks a lot

I love you Sir! You are doing a great job. You are great sir.❤

Just scrolling in RU-vid, I hve seen ur video & just watched just 5 mints & I hve decided to participate ur frontend development journey moreover, I hve subscribed also....I am very much interested in web development & app development although I am from commerce background... thanks a lot bro ...👍👍

Alert!! Game on.

We are with You ❣️🤜🤛

Great course!!🎉😮

Abhi to party shuru hui he. 🎉🎉🎉🎉🎉🎉❤❤❤❤❤❤❤

Kon kon wait kar raha tha level 1 ka

2:53:00 काकचेष्टा बकध्यानं श्वाननिद्रा तथैव च । अल्पाहारं ब्रह्मचर्यं विद्यार्थीपंचलक्षणम् ॥

I think for basics this is sufficient with so neat and clean understanding of concepts . thanks for this amazing ...

This channel changed my life and helped me to learn and improve whenever I'm going through tough times ❤

i watched it in 10x speed , but great for beginners❣❣❤❤🙋🙋 must access it out , just trust me...

Found your content to be the best frontend content atleast what I have seen. And a structure like this is what I wanted.

1:32:00 how to center element: position: absolute; top : 50%; left : 50%; transform: translate(-50%,-50%);

Completed.🎉 Ready for level 2

I already know this course is valuable so I shared without watch the video. ❤love from Pakistan ❤🎉

Thank you so much for making these videos 🤩

I was so busy learning Python and Data Science that I almost forgot about web development due to lack of practice but your videos are helping me a lot in sharpening my skills faster. Your teaching style gives a friendly atmosphere which helps in staying engaged with the videos till the end. Thanks for all the efforts and you deserve 1M Subscribers. 😊

English subtitle please watching from Sri Lanka 🇱🇰

Code with harry be like :- mujhe kyu toda?

your teaching style is more better than other teachers i really love you sir ❤

Thanks bhaiya isi video ki jarurat hai hm sabko ❤❤

Aaa Lai Chakk Fer Aaa Gya ❤❤😂😂😂😂

I am so happy to see this video really awesome

Best teacher ❤ GOAT Channel

English caption😢 please

Bhaiya audio nahi hai video mey

You are a really great teacher , you teaching technique is great.

Bhai 2 words bhade achhe Lage roadmap roadmap every year ke according new roadmap nikaal dete hai 3 month, 6 month, love you brother

Need English caption 😢

Bhai please god level unpaid kardo

You deserve millions of subscribers ♥️

Ye toh Bawaal cheez hai be pura system hila dala🔥

Sound kidhar hee😢

Koi BKL hoga(boondi ka laddu ) jo ye poori nhi dhekega

sir mein ap ki mehnat or hamain parhany k liya sir dil sy shukria ❤️🙏

by the way, nice tutorial, For context (viewers) (in:1:59:50):us mei nav button ki id (#nav) mei first background color - white tha. so, btn2 id ko hamare machine ya bholo system, importance na deke, uski parent class "#nav" ko priority dhi. so, background orange nahi hui. then jab white background hatayagaya in #nav then it worked. (!important) use kar saktha tha for this problem. which was used later on.

Next level bhaiya❤

Thankyou so much. This video demonstrates, Project based learning. These 3 projects have been customised by me and the source code is now going straight to a fresh new Github Repo which marks my first contribution as a webdeveloper. Thanks to both the amazing instructors!!

Maine in se behtar Coding Teacher nahi dekha.... Bht kamaal sir❤❤❤ Love from Pakistan

you are my best teacher You guide at a good level, thank you sir

❤❤❤❤❤❤Nice video keep it up Sir Insallah your company will rise

Fire content Boss💗

One of the best video I have e ever seen

Stream finish karke aaya tha thoda late reply Kara kyuki just abhi video finish ki hai and Harsh Bhaiya you have once again proven you are the man of your words. Really this whole video was remarkable there is just no flaw it's literally perfection. And I dare every hater to watch the whole video second by second and then say that it wasn't up the mark. #Sheryians_will_rule #Sheryians_are_Pioneers

Veri excited....superb

Great Content Guys 🔥🔥

There's no doubt! I learn many things from you guys! And still I'm learning my request from you is please make complete front end from nav bar to footer! I'm stuck at making footer! Please ispr ghour dy dein ♥️ other than everything is perfect about you 💯

Really great work, ab hoga web development aasan. Bs ab level 2 ka wait hai. #readyforlevel2

Sheriyans k taraf se ek notification or dil dhak dhakaa jataa ❤️‍🔥❤️‍🔥