Web Development Course | Frontend | Level 1
Вставка
- Опубліковано 20 лип 2024
- 🚀 *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
Project 1 - dribbble.com/shots/22620941-D...
Project 2 - pbs.twimg.com/media/Fw72tysXg...
Project 3 - / 1063553268238238174
**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
Visit our website: sheryians.com/
Socials:
Instagram: / sheryians_coding_school
Facebook: / sheryians.community
Telegram: t.me/sheryiansCommunity
LinkedIn: / the-sheryians-coding-s...
Discord: / discord
Peace ✌️
#webdesign #animationtutorials #webdevelopment #css #coding #javascript
Are sound hai ek do baar fir se kholo pata nhi kyu har baar shuru mein kuchh logo ke devices mein dikkat aati hai
Aa gai 😺😺😺
haa aa gayi😂
Sab kuch thik hai bhai dekh rha hu bus video shuru ki hai
ochi.design/ clone video kab aye gy🥱🥱🥱🥱🥱🥱
ochi.design/ clone video kab aye gy🥱🥱
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
thanks bhai.
thnx bro
love you bro, needed this
You are my favorite teacher online & offline.
I love you Sir! You are doing a great job. Thanks for everything!
Bro offline what 🧐
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;
}
ohk
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 🥰❤
Me too ❤❤
Thanks bro ✌️❣️
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"
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
Thanks bro
Are Bhay thx a lot
Habibi🐪 Love from Dubai🔥🏆
Mujhe lga js bhi h
Thanks Bhai ❤
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.😊
Sahi kaha
@@devyanibhosaleehey can we become friends on social media
apna college?
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."
Mern full course + 5 full stack projects this is what audience want
Bhai jke advance clear karna kyu dalali kara h
@@dharmikjain5288😂 good 👍😂😂😂😂😂
@@dharmikjain5288I cracked it before you heard about it
YES !! AGREED , YE HO JAYE AUR AAPKE PADHANE KATARIKA OMG VIEWS KESE NH AYEGA , BUT CONSISTENCY KE SHAATH
Yes we want
The most Underrated UA-cam Channel to learn Frontend Development! 💯
because of galiyan🤣
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.
Good going
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
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
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.
Best UA-cam channel for web development 😊😊
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!
Love you bhaiya i stand with you keep on providing content that is above this UA-cam level❤️
Am software engineering student and I have made these projects with you .Finally found real platform of learning. Thanks
Finally bhaiya aapka purana intro anne laga Dil ko bhot bhot acha laga ...thank you bhaiya 😊❤
Bhai mza a gya ❤ jab bhi apki video dekhta hu dil khush ho jata hai keep it up bro ❤🤜😉
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.
sarthak bhaiya and harsh bhaiya ! MAZA AYA ,, pure session m ruka rha , sach m maza aya
your courses are much better than other
Revolution begins 🙌🔥
Sheriyans doing their cool and amazing stuff ....🔥✅
for sure the best video for learning frontend development or web development..thank you soo much sir for making this video❤️
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.
You are doing well sarthak and harsh bhaiya 👏🏻👏🏻
I'm in love with his teaching skill ( "tum Jo aaye UA-cam Mei baat baan gaye")..❤️❤️👌😂
underrated as hell...tbvh...
true!!!!
Lecture completed ✔️
Learnt a lot
Majja aya😅
Thank you so much sir ❤
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.
Just scrolling in UA-cam, 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 ...👍👍
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..😀
I support your every video and share my friends who doing web development! Because you guys really work hard for us ♥️♥️♥️
future changer video of web and love this line agar galti se amir hogaye toh ...
Best video on entire frontend ❤
2:53:00 काकचेष्टा बकध्यानं श्वाननिद्रा तथैव च ।
अल्पाहारं ब्रह्मचर्यं विद्यार्थीपंचलक्षणम् ॥
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
Really Harsh Bhaiya Dill se Respect. ❤Love you Bhaiya
Bhai please god level unpaid kardo
I love you Sir! You are doing a great job. You are great sir.❤
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
U r the best teacher bro👌
Code with harry be like :- mujhe kyu toda?
I am following Syrian coding school for the last one year and so I thought I could watch this video on 1.5x but suddenly when the project starts when I shift the speed to normal sarthak bhaiya sounds like nashe mai hai #lovefromjharkhand
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
Alert!!
Game on.
Ek number content, koi nahi hai takkar mei
excited for challenge!
You are my favorite teacher online .......bhai m aapka fen ho gya
Best teacher ever seen in this field😇
Kon kon wait kar raha tha level 1 ka
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. 😊
Nice, your pushing the community.
Thankyou bhaiya for level 1 love you bro
i watched it in 10x speed , but great for beginners❣❣❤❤🙋🙋 must access it out , just trust me...
khao maa kasam ki tumne 10x pe dekha
anways it was really awesome
yoo broooo 😄
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 💯
The teaching skill of this man is very amazing I appreciate ❤❤❤
Best of luck to all of student ❤❤
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 🫡
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
2:11:00
for the right bottom part
Best Startup of 2023
.btm-right{
margin: 0;
position: absolute;
bottom: 1%;
right: 1%;
display: flex;
flex-direction: column;
}
.logos{
display: flex;
flex-direction: row;
font-size: x-large;
justify-content: space-between;
}
.logos i{
padding-left: 0px;
padding-bottom: 2px;
}
.btm-text{
margin-top: 5px;
font-size: medium;
font-style: italic;
font-weight: 500;
}
1:32:00 how to center element:
position: absolute;
top : 50%;
left : 50%;
transform: translate(-50%,-50%);
Bhaiya 1 number padhaye ho aap❤
Aaa Lai Chakk Fer Aaa Gya ❤❤😂😂😂😂
I think for basics this is sufficient with so neat and clean understanding of concepts . thanks for this amazing ...
Bhai 2 words bhade achhe Lage roadmap roadmap every year ke according new roadmap nikaal dete hai 3 month, 6 month, love you brother
I already know this course is valuable so I shared without watch the video. ❤love from Pakistan ❤🎉
Abhi to party shuru hui he. 🎉🎉🎉🎉🎉🎉❤❤❤❤❤❤❤
Bhaiya maine aapke kai saare videos dekhen hain aur bahot kuchh sikha hai. You have amazing skills. Bas ek baat kehna tha that aap bahot mast padhate ho par I think that jab bhi ham kisi ke saath competition karte hain to ham hamesa pareshan rahte hain aur actually mein apna best nahi de paate. But I believe that you have amazing skill sets and you actually provide us amazing stuffs. So do not compare yourself with anyone.
We love and respect you bhaiya ❤️
Kai baar jab aap apne aap ko compare karte hain to kai saare log bolte hain ki aap sirf compare hi karte rahte hain, jisse aapka ek negative image ban raha hai.
So I think you are amazing and unique. And we want to learn amazing things from you.
I wrote this much because I read the comments and heard from friends about you comparing all the time. So I thought this would be the right thing to do.
So once again bhaiya thank you so much for your efforts 🙏🙏❤️❤️
Completed.🎉 Ready for level 2
Level 2 ?
English subtitle please watching from Sri Lanka 🇱🇰
Yes please
Thank you so much for making these videos 🤩
Found your content to be the best frontend content atleast what I have seen. And a structure like this is what I wanted.
This channel changed my life and helped me to learn and improve whenever I'm going through tough times ❤
sir mein ap ki mehnat or hamain parhany k liya sir dil sy shukria ❤️🙏
Great course!!🎉😮
English caption😢 please
Yes
Bhaiya audio nahi hai video mey
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!!
Need English caption 😢
Koi BKL hoga(boondi ka laddu ) jo ye poori nhi dhekega
Tu hi hai bkl humm toh Puri video watch krega
Bhai bundi ka laddu toh tu bhi ni h 😂
True
Opinion Rejected, meme generation
Love the way to transfered shit into SHIT 😂
We are with You ❣️🤜🤛
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.
Sound kidhar hee😢
same
Bhai aap ka UA-cam channel ka naam Indian nehi lagta..lakin aap ka videos pura sudh deshi..
I just loved it..
Aap ka channel ka naam hona chaiye--
1. Guruji ka coding.
2. Coding Gurukul.
Etc..
Aap ka face ka beard ek guruji ka feelings delata hay. And I just loved it and really respect your time and efforts to teach us so valuable things..
Guruji aap kavi v low maat hone bakwas logo ka comment suun k..
Q ki aap ka teachings me bohot he ziada valuable hay hum j se logo k liye..
Dil se aap ko naman Guruji 👏👏.
Aap baas apka ye teaching ka journey discontinue maat ki giye..Hum saab log aap ka ye journey ne pura sath dengey..
Jai shree Ram..
Aap ko agar mera comment accha lage to ek like ya heart de dena..muje bohot accha lage ga
Sher_ian, Hindi plus English name to hai
Knowledge =
Background-size & object-fit { 2:06:39 }
Absutulute Rotate method ={ 2:08:53 }
Sheriyans k taraf se ek notification or dil dhak dhakaa jataa ❤️🔥❤️🔥
abhi video start ki hai but my Sir ap k talking style sy boht impressed hu
What a amazing teacher i got in my 3rd year of Engineering. Sir, where were you. I just started watching your video and it just went for 1 hour and I'm in love with your teaching style. If i got a chance to meet you personally it will be my honor.
Lots of Love Sir.
His teaching style is slayer ❤
❤❤❤❤❤❤Nice video keep it up Sir Insallah your company will rise
outstanding sir mai ek jagah se cource puches kiya hu usse zada apki videos me samajh me aata hai aur mai apse bahut kuch learn kar rahah hu apka content esa hai ki pahli baar dekhne me sab kuch samajh me aa jata hai..now days mai react learn kar raha hu aur mujhe bahut difficult face kar raha hu sir kuchh aur thoda usme video bana jati ho helf ho jati ham logo ki
Veri excited....superb
I'll support you till the end Bhaiya, I started from zero and just matched the level of people doing Web D from 1.5 years in my college in 2 weeks, just did your front end and back end playlist
You are awesome sir...💯💯💯
I will support you from my heart...❤❤❤
Thank you for giving this wonderful learning of web development.. 🙏🙏🙏
1:24:22 because in laptop and desktop height is less than width and that's why when you give width 40% and height 40% to div, it shows like rectangular box.
Really great work, ab hoga web development aasan. Bs ab level 2 ka wait hai. #readyforlevel2