Web Development Course | Frontend | Level 1

🚀 **Exciting Announcement: Level 1 Frontend Tutorial !**

🔍 Ready to embark on a journey to enhance your frontend development skills? Look no further! We're thrilled to introduce our Level 1 Frontend Tutorial, a comprehensive guide designed to set the stage for your coding success.

🌟 **What's the Level 1 Frontend Tutorial About?**
This tutorial is your first step in mastering the fundamentals of frontend development. Geared towards beginners and those looking to reinforce their basics, this tutorial is an essential resource as we gear up for future challenges, including the highly-anticipated "Reimagine Frontend Hackathon."

🚀 **What to Expect:**
- **Introduction to HTML, CSS, and JavaScript:** We'll cover the core building blocks of frontend development.
- **Hands-On Exercises:** Dive into practical exercises to solidify your understanding.
- **Preparing for the Reimagine Frontend Hackathon:** Gain insights into the skills you'll need for the upcoming challenge.

🔗 **How to Dive In:**
1. Watch the Level 1 Frontend Tutorial.
2. Subscribe to our channel for more frontend tutorials and updates.
3. Stay tuned for announcements about advanced levels and the Reimagine Frontend Hackathon.

📅 **What's Next?**
Level up your frontend skills with our Level 1 Tutorial, and stay tuned for more tutorials and resources to prepare you for the challenges that lie ahead.

👉 **Ready to kickstart your frontend journey? Watch the Level 1 Tutorial now and set the foundation for coding excellence!** 💻✨

Instructor in this video: Harsh Sharma & Sarthak Sharma

***Content of this Video***

00:00 - Introduction
04:16 - What, Why, How to learn?
17:50 - Setting up the Environment
20:05 - VS Code installation
25:44 - Understanding HTML
1:06:38 - Cascading Style Sheets (CSS)
1:13:57 - CSS Boiler plate
1:20:03 - Styling Text
1:29:11 - Position Properties In CSS
1:35:05 - Flex box properties
1:43:11 - Project 1
2:12:50 - Project 2
3:05:20 - Project 3

Socials:
Peace ✌️

#webdesign #animationtutorials #webdevelopment #css #coding #javascript

[harshsharma]

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

[bhaimohsin]

You are my favorite teacher online & offline.

I love you Sir! You are doing a great job. Thanks for everything!

[Do-while-loop]

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

[mnnchvn]

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 .

[AsifAli-qwij]

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.😊

[Technical_Ved]

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

[hexagamerz]

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

[luffydono]

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.

[deepkshithnandagopal]

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.

[jethalal]

And there we 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

[SohailKhanYouTube]

Lecture completed ✔️
Learnt a lot
Majja aya😅
Thank you so much sir ❤

[rohitpatle]

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"

[rohitpatle]

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!

[fatimashafique-fefc]

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

[TATAENews]

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

[mayanksh]

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.

[ihgamingfun]

Just scrolling in YouTube, 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 ...👍👍

[yrnxxiv]

00:00 - Introduction
04:16 - What, Why, How to learn?
17:50 - Setting up the Environment
20:05 - VS Code installation
25:44 - Understanding HTML
1:06:38 - Cascading Style Sheets (CSS)
1:13:57 - CSS Boiler plate
1:20:03 - Styling Text
1:29:11 - Position Properties In CSS
1:35:05 - Flex box properties
1:43:11 - Project 1
2:12:50 - Project 2
3:05:20 - Project 3

[CodingJoySoul]

The most Underrated YouTube Channel to learn Frontend Development! 💯

[vansh_sethi]

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