Build Your Personal Portfolio Website with HTML & CSS: Step-by-Step Tutorial in Hindi - Part 1
ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2024
- Source code: github.com/cod...
In this video i am going to show how to create a Portfolio website using Html, Css and little bit Javascript. This is the part one of this series. We are going to build this website step by step. You will learn many things in this video. You will learn how to position elements in the header, How to create utility classes, How to use css variables, how to use css flexbox for creating awesome layouts like this one.
Please make sure you watch this video till the end.
Here you can download all the images and icons for the project.
➡️ drive.google.c...
Before watching this video you need to know little bit Html and Css. If you don't know this then i would recommend first to watch my Html, Css quick course video and then continue here so you will understand everything in this video.
Here are the links for quick courses.
Css Flexbox in 20 minutes course ➡️ • Mastering CSS Flexbox:...
How to build a food website ➡️ • Step-by-Step Guide: Bu...
How to make this website responsive and make mobile navigation :
➡️ • [2] How to create a re...
HTML 5 Quick course ➡️ • Learn HTML Quickly: Co...
CSS Quick course ➡️ • Mastering CSS Flexbox:...
👉 Step into the world of full-stack development with our detailed MERN Stack With Microservices course! Transform your ideas into reality: www.codersgyan... 🌐🚀
📚 Web Development Learning Resources
JavaScript Course: • JavaScript Complete co...
Full Stack Developer's Journey: • Full Stack Developer's...
MERN Stack Playlist: • MERN Stack
Interview Questions Playlist: • Javascript Interview q...
Crash courses: • Crash courses
CodersGyan Community Links
🎥 Subscribe to Our Channel: www.youtube.co...
🤖 Discord Community: / discord
🔗 LinkedIn: / codersgyan
💻 GitHub: github.com/cod...
🌐 Website: www.codersgyan...
✅ My gears for everyday work: docs.google.co...
Please Like, Share and Subscribe for the new amazing projects.
#createwebsite #portfolioWebsite #portfolio #learnCoding
![POLYCAT - ข้อความรูปยิ้ม [Music Video]](http://i.ytimg.com/vi/lBhIgPGCgbI/mqdefault.jpg)
i must say this is the best navbar code i have ever seen.....i have never seen a navbar which remains centered and perfectly aligned even after making the screen size so small........The strategy to center the nav bar was great. Hats off to u sirr
Twinkle Twinkle Little STAR, BHAI h SUPER STAR !
I gone through full tutorial, He Explained like, it is for LKG Childs.
Unique Content, Great Tutor Ever Seen !!
Thank you 😊
Do you have proper images given by Coder's Gyan because the given link doesn't contain the same pics as used in the video
first time i watched someone videos who explaining everything very clearly i really enjoy and learn to easy . thanks and love from Pakistan
Thank you so much for watching:)
@@CodersGyan Source code
@@CodersGyan Source code
Must watch animated Modern portfolio 2022
th-cam.com/video/BNuId2OTu48/w-d-xo.html
I am a junior web designer, I have created many web design tutorials
But your design is awesome 😍
kya jazab padha rhe h sir...ye course pura complete krenge...bhut mazaaa arha h bhut din k baad aap jaisa teacher mila h....dil se thanku sir itna achha padne k liye......
Thank you so much for watching 😊
bro the number of likes is not justice with you. you deserve more than it the way you explain the things. go straight in the mind I appreciate it
Thank you so much 😊
+1111111111
You are really the best web developer. You explain all the code in a very good way.
Thanks 😊
I am watching this course and I appreciate your way of teaching, Highly recommended!
this is what i was searching . bhaiya don't stop making videos . your way of teaching is very nice..and in-depth concepts are provided. ..more power to u.thnks a lot .
Thank you much keep watching and supporting 😅
Love the way, How you teach!
Thank you so much 😊
Bhai thumbnail bahut accha tha
Your one of the experienced coder... U code seems very professional …please make videos only with CSS not bootstrap
Definitely, lots of college stuff coming )
Sir video is awesome, shayed main apki tarah programme kar pati toh acchi hoti.
You can be one some day 😊
Great video brother. Started today with this one, hope to finish and learn all the amazing stuff which you shared with us. Thank you so much for the sharing and keep up the great work.
Thank you for supporting)
My flex is not working too..help here please
I really like your teaching skill. You are explaining very step by step and deep. Thank You
Thank you so much 😊
You are #godfather for me.. thanks bruv. You really help me lot.
Thankyou so much. Understanding and coding along with the video was very efficient.
Thank you so much for this video...I loved your content❤
Glad you enjoyed it!
the way you taught and explain things are simply awesome..😍
LOVE FROM BANGLADESH! AMAZING OOOOF BEST VIDEO OF THIS SIDE YAAAR
Thank you 😊
sir aap to professional web development sikha rahe ho dil se thank you sir
with this easiness technic of explaining, this channel will grow up to be one of the best
Glad you think so!
at 24:05 color:var(--secondary); is not declared color:var(--dark); should be used instead.
Great Work !!! Really very very helpfull
One of the best tutorial.tnx for upload
Bro your the best
Teaching method is awesome... Sath sath me output dekhaty ho ap us se kafi deep samj lagti hai... keep it... SUBSCRIBED !!1
Thank you for subscribing 😊 I m trying my best. Keep watching and supporting 🙏
What an amazing explanation 😊😊
Thank you so much 😊
Why utilities.css ?
What is the benefit ?
Thanks for great video
Did you have any video on utilities css Share link please thanks
Amazing and very helpful video
Explanation was so smooth and detailed. Thanks man for your efforts❤.
Glad you liked it!
The perfect tutorial
Thanks man
Indians OP
Great portfolio loved it and you got a new subscriber
Thank you and welcome :)
Great video bro..
It helps me a lot...
Very good explanation sir
Thank you so much 😊
This was very useful and simple to understand. Thanks for making this video
Thank you soo much for being so polite tutor. Really loved the way you explain.
Just one question: where can I get these kind of design file to refer or how can I learn or make these web design.
I wish your channel grow fast with some more sponsors. #HappyCoding
Explanation is really awesome...!
Thank you Juhi 😊
Thank you sir 😊
Thanks a lot Sir for helping us with the portfolio
Super explain
So Heart melting song, "dil diya hai jaan bhi denge ha watan tere liye"🙏🙏🙏🙏🙏🙏
Perfect tuter for students...
Improve your english
From BD😍
Thanks a lot sir ji bhut achee se ek ek chiz samjhaya aapne
sir flex and bootstrap column grid system mai kiya difference hai q ka menu design kerny ka laye mid-col-3 asa hi kuch use kiya krty thay
Flex is css core concept and bootstraps grid system is using that under the hood )
Amazing sir..
Thanks for making this video.. Sir.
The way you explained is awesome..
I am making my portfolio sir 🙏
Thank you Anand :) keep supporting)
bro.. tm flex ki jgh agr "DISPLAY:INLINE-BLOCK" use krte to itna code nh likhna pdta or dono ki position set krne ke liye FLOAT ka use krte to easy rhta syd
Hey Rakesh You always explain in detail ! Thank you so much for this deeply explained tutorial 👍👍
Thanks for explaining in the easiest way..
..
♥️♥️ From BD
Thanks 😊 keep watching
thanks, bro. Keep it up.
please upload more real-world web design tutorial like this
Coming soon awesome projects 😊stay tune )
@@CodersGyan thank you sir
Clean and simple teaching. Nice Bro.
Thank you so much for supporting 😊👌🏽
what an understanding and remarkable video. Keep making such videos cause you are very good at this....
Keep the good work going.You are helping many people out there.
Best of Luck 👍👍
Thank you so much for love and support. Keep supporting 😊
Wow
Really great explanation for each thing thank you sir..
Nice content
Thank you bhai
Very well explained! Thanks!
Thanks!
Brother it’s awesome thank man
Never seen such a tutorial. very professional and easy. defined every step very clearly and easily. Subscribed! Liked too. Keep it up brother.
Thank you for watching and subscribing 🙏😊
Hiii Khansa Ashraf
same this is very great
@@CodersGyan bro i got an problem how can i contact
Thnk you for helping us....please make more tutorials like this...
Sir you are the best programmer ,, Sir which text Editor do you use ,, please reply me
Thank you so much. I am using VS code which is 100% free to use.
boht acha treka ha ap k kam krne ka , ustad g !!!
v nice
Thank you 😊
Portfolio design is awesome...and nicely explained..new subscriber..
Thank you Suraj and welcome 🙏:)
Do you have proper images given by Coder's Gyan because the given link doesn't contain the same pics as used in the video
Great
The flex box you creat in this portfolio is only this extra ?
.flex{
display:flex
}
Do you have proper images given by Coder's Gyan because the given link doesn't contain the same pics as used in the video
Nice explained bro i subscribed now
Sir, can you tell me which software you have used at start by which you would able to pick the color on which part you click on web layout.. Means i want to know how can i pick color of any heading etc from any website..
There is a Chrome extension called colorZila.
thanks you ji
Best of luck
Bro waiting fr ur second part...really loved this one.Can u bring up more video using bootstrap too:)
This series already have completed long back :) just check playlist . There are 10-11 parts.
th-cam.com/play/PLXQpH_kZIxTWgPEnocGfpQo4XLrgcx63M.html
oww...Awesome ..what is the name of your keyboard or model because sound was good ??
गुरु का अनादर करके कभी शिष्य ग्रहण नहीं कर सकता
क्षमा 🙏
sir can u tall me which photoshop editor you are using for know all proparty like width hight etc. because my ps editor not working
It’s Adobe xd 😊
Thank u so much brother, do more videos like this..!!
I will try my best
Love you from Bangladesh
Nice tutorial
Thank you 😊
Nice work only that I could not understand a word you were saying!!. Please provide subtitles
bahut pasand aaya :)
Thank you so much
Waiting for 2nd part
Already there. Please check next part
Awesome video mann
hi, very very good, thunks a lot. 👍👍
Thank you for watching)
Subscribe done bro !
Great video
why didnt we apply "flex" to the "right" class for button. why did the button move to the right by just apply flex to its parent...whereas we had to apply "flex" to the "left" class
Please watch my flex box crash course )
@@CodersGyan I plan too :-) but for now please clear the doubt why button in one child class (right class) moved and the menu in the other child class didn't move
Hi bro, thanks for the great video. I came here to ask you a question about design in Figma and AdobeXd. I am currently learning the newest trends and design prototypes on the internet and learning how to design web pages. But I do not wanna learn the coding part of it. Because simply coding seems a little bit boring for me. I mean building a website using Html and CSS. I just wanna give new ideas and design websites. My question is that "Can I find an internship or job in the future with only knowing skills in designing websites, not coding and structuring them?" I would really appreciate your answer. Thank you in advance!
Hi, yes definitely you can get a job as graphic designer 😊
Bahut aage jaoge
Amazing 🤩...
Thanks 🤗
Sir ,is it important of padding: 0 15px; in the container section?
Brother, I like your work very much. I will follow you from now on. Now whether your site is responsive or not.
Thank you sir
What a knowledge . Great ! ..Sir which vs code theme you are using ?
It’s monokai pro
Excellent tutorial👍👍
Thank you 🙏
thankyou
Explanation 👌 Thanks sir
Thank u for watching)
Hi bro you are amazing. Can you please make a complete website for ecommerce product selling. Thanks
Yes I will do that hopefully
Pura pasand aaya hai❤❤❤
very well explained....
Wow!!! Really insightful information. Get me a headstart on HTML CSS
After doing @import utility.css i get an error in the style.css file. It says "media query expected" at the :root. Please explain
you got a subscriber ❤
After adding flex property mime background turned white and nothing is working, I'm running vs code in windows 10