How To Create A Website using HTML & CSS | Step-by-Step Tutorial
Vložit
- čas přidán 15. 05. 2021
- #HTML #CSS #Loginbox
------------------------------------
insta follow : p.roz.2001
-----------------------------------------------------------
Make it RESPONSIVE : • How To Make Responsive...
---------------------------------------------------------------------------------------
(Link.txt) For Icons . Put this in index.html:
"unpkg.com/ionicons@5.4.0/dist..."
----------------------------------------------------------------------------------------
Background Image : postimg.cc/QHXgDzSQ
---------------------------------------------------------------------------------------
Source Code: codepen.io/PraRoz/pen/mdmZvwv
--------------------------------------------------------------------
Instagram id : p.roz.2001
------------------------------------
For more thanks giving, you can donate me as much as you can afford:
ESEWA: 9849427460
----------------------------------------------------------------------
In this video we will learn how to create an amazing website with a login option using only Html & Css. With 🆅🅾🅸🅲🅴 Tutorial. Must watch for Beginners.
-------------------------------------------------------------------------------------------------------------
Facebook Group Join : / 577400563258704
Twitter follow: RozanC2001
------------------------------------------------------------------------------------------------------------------------------
Do like👍👍 and subscribe🔔🔔 my channel.
One Page Responsive Website:
👉👉 • Responsive Website | O...
Coffee shop | Responsive Website:
👉👉 • Responsive Website | H...
Learn to make Layered Hovering Icons with Html and Css:
👉👉 • How to make a Hovering...
Learn to make Animated Text with Html and Css:
👉👉 • How to Create An Anima...
Learn to create a portfolio frontpage image slider using Html & Css:
👉👉 • How To Make Portfolio ...
Learn how to create a Search-Box using Html & Css:
👉👉 • How To Create A Search...
Learn how to link pages in website using Html | Html Tutorial :
👉👉 www.youtube.com/watch?v=nG94c...
Learn how To Create A Navigation Bar using HTML & CSS :
👉👉 • How To Create Amazing ...
Learn to Create a Website using Html & Css | Step-by-Step Tutorial :
👉👉 www.youtube.com/watch?v=M5JJx...
Learn to Create a Login Box using Html & Css | Step-by-Step Tutorial:
👉👉 • How To Create a Login ...
Learn To Make a Drop-down Menu Using Html and Css
👉👉 • How To Make a Drop-do... - Zábava
I am begginer but i have no words how to express your hard work for us .Thanks again you have done the best ever
First of all i would like to present my deep gratitiude for your hard work. I have completed full website but i don't know how to bring background image,i cant put menu items like about,contact on the top row of the website and social media icons like facebook are not appearing on my website.Thank you once again
we are HND coputing and software engineering students. so your video was our turning point for web designing. thank you very much
Flappy Birds Game Using Python With Source CODE
czcams.com/video/C0H8D74f-Ys/video.html
This was one of the best, shortest and cleanest tutorials ever! Thanks dude.
Thank you 💗💓💞💕
Website link kya ha
Bhejana
You teach better than most instructors and professors. Thank you brother.
Flappy Birds Game Using Python With Source CODE
czcams.com/video/C0H8D74f-Ys/video.html
can you make a video where the now the login buttons work if a user tried to login/sign up with flask
tell me about it
very bad tutorial
very bad tutorial@@DirtyFan2
Ya ALLAH har insan kamyab ho har insan ko sehat izat or beshumar Dolat ata farma.
May Allah bless you with all you need in your life 😇
Awesome man, after long search finally got what I looking for 💖👍
Thank you so much sir.. stay tuned
New video coming soon..
Full website with Bootstrap 5..
I'm gonna pass my website design assignment thanks to you, appreciate it
Welcome bro🥰
FUN FACT , AM GRAPHIC DESINGER ,UI DESINGER TOO WITH 3 THREE EXPREINCE NOW BY THIS Tutorial i cant wait start right away tq man
Actually I am a very Beginner to html and css i have been through certain CZcams channel but I don't get the clarity and practical execution as you did thank you alot expecting more website like this and i would like to know about framework using python dijango and how we connect the website to the database so yea it's very useful
Blessed is he that teaches and shares code. Great work
So nice of you
First time found on CZcams best explain of html,css thanks 🎉
Glad you liked it
I managed to build together with you a website in html, I am very excited, thank you very much
Hello! I just wanna say that it would be better if you explain it little by little because some people here (including me) who's beginner at this kind of field, might not understand what you're doing but your work is amazing. I appreciate it! :)
Sorry mam for my careless.
I will do better soon..
Please I am trying to remove border from images I downloaded to my system but not getting a way how to do that??
You know if images are downloaded online it will have default border ,so if I want the border to go so dat it can have a pure border in my google page that what I mean
0-0
🍌
ya bro thats why I have to search for those things to understand the working
you can remove the border with photoshop ;-;@@tech_bite
Thanks for sharing this informative tutorial. I enjoyed it and was able to learn a lot. We appreciate your kind efforts. Have a good one mate.
Thank you! You too!
czcams.com/video/2A9EpKCz3SQ/video.html
Thanks a lot brother you explained this project such a wonderful way that even who don't no 1% of HTML and CSS they can understand it easily👌
Glad it was helpful!
আপনার এই ডিজাইনটা আমার কাছে অনেক ভাল লেগেছে। আমি প্র্যাক্টিস করেছি। অনেক কিছু নতুন শিখেছি। আপনাকে অনেক ধন্যবাদ।
Thanks for all the detailed information you have provided in this video. I like your way of explaining every point. Keep sharing such great videos in the future also.
Thank you!! Luna
Amazing video ... watching from pakistan
Awesome work bro....
God bless you!!❤️
Thank you for some introductory elements in html+css, it was really helpful ! 👍
Welcome sir
@@PraRoz which framework
Parabéns, pelo compartilhamento deta grande aula. Muito obrigado.
How you think of designing part, color combination, font, theme.... Everything is perfect
All about some practice and Google search.. and some extra skills..
What are the skill for designing
Maybe he will make web deign first and then he makeing web page❤
Hmm ☺️
My image dosent even showing in bg can u please help
Beautiful. I'm working on a project. Thanks for the tutorial.
Awesome man, Finding something like this for a days now.. Finally.
Thanks. 😉
@paroz can I get the code for this?
@@PraRoz ;
You are doing it exactly what I want . Pls make tutorial videos of html, css from basics to advance, it will be so much helpful.
Flappy Birds Game Using Python With Source CODE
czcams.com/video/C0H8D74f-Ys/video.html
It's think about awesome 👌 👏
I'm back after watching the video, just know you got a new subcriber from Uganda and thank you for the work keep it up
interface looks so beautiful.
Thank you sir❤️
czcams.com/video/2A9EpKCz3SQ/video.html
💖💖💖
This is a very awesome tutorial 🥰
I understood everything even as a beginner
But please... could pls do a JavaScript tutorial using this same website?? 🙏
You really cleared out my doubt. Thank you so much. next time, make it a lot of projects that may last for 2 hours
Thanks man
Really helped 😊
I am a beginner and some things were a bit difficult but after 12 hours I fully understand what you did. I did make changes to suit my style.
I love this man keep it up
Thanks man sorry for little careless.. I I trying best to do better
Thanks for this sir! I'm working on a project and it came through for me as a beginner
Welcome 🤗
Thank you...for all details information. ..😊
such a nice tutorail really helpful for me to learn how to build beautiful web pages using html and css
In terms of this tutorial it's really good ,I am a beginner and I have learned HTML Now onto CSS.
Your video motivate me to Stay strong and learn programming😇
we are in this together
Flappy Birds Game Using Python With Source CODE
czcams.com/video/C0H8D74f-Ys/video.html
Hello my name is mansur Muhammad from Nigeria.
Your tutorial in this video is exactly what I'm looking for since🤗 thank you for sharing ideas👍, I will be very thankful and grateful if you make video tutorial for how to make SEO tools website. Thank you and all your videos are recommendable🙏
You are very welcome😋😊
Thank you so much,🙏 waiting for next video
wow,this is the first website i actually created. very good direct to the point . im just trouble shooting here in my Log in css
Great video brother ❤️
Subscribed ❤️❤️❤️
Great man
Hello i really like your work it's professional and detailed but please if u dont mind can u add some details like when u write a code u say why and what he does for example float:center or margin-left:62px (job .....) And thank you for everything hope the best for u and for all
Thank you sir❤️
This was actually my first voice tutorial so. I don't really know what to say. And
Thanks for the suggestion. ❤️
Good job
first time and am realy understand well THANKS
Some worth time .... learning this content through this way .....
Your designs are really something. They are beautiful, and attractive. Make a video about designing ideas. How do you come up with such unique designs...
It's all about Internet sir.
I search for latest website design on Google.. and try to make it on my own way with some modifications..
Not that hard. Not so easy. Medium😅
I am a web designer I need some love I want to make my channel better than before.
czcams.com/video/6lCozTTSdjY/video.html
Thank you so much.
Great lesson for simple understanding and excellent summary. 😍👏
You're very welcome!
Super Bro - Thanks Bro ❤
I just subscribers just reading the comment section. Wish me the best to know and learn how to code. You have my like also.
Thank you my teacher and helper.
this is excellent
This is so easy to learn
I’m a beginner but I learnt a lot in this video
Happy to hear that!
WOW, this is so sweet. well done brother
I really found this help helpful. Thanks bud
Thanks I needed to create a website just like it I love your channel and have subscribed and liked it 😀😀😀😀😀
Welcome sir 😊
@@PraRoz hi friend, can you please post a vedeo of how to upload a website into google for free
Thank you so much sir for this amazing tutorial. I’m a beginner as well. Very detailed and was a bit lost on why we put some of these codes as of my studies didn’t have all these infos. If you please would be kind and explain your choices of why we do that and what easier steps to make choices on the adding a code.
Thank you again and hope to see more videos soon
Thank you sir. And sorry for some mistakes. As it was my first voice over video, so was bit nervous to actually explain everything. I have been improving my presentation. You can watch my new trending website videos❤️💗
Thanks, I appreciate your time, I learn a lot. You are the best
I watched numerous tutorial videos, but you explained it in such an easy way, that I am taking interest in learning CSS as well, else CSS was a headache for me.
Css is really a headache
how do we open a live web browser please?
Good Tutorial, Hope you will get famous soon, 1 subs +
😍
Thanks for the tutorial! My web page turned out great-except I can't get the icons to show up. I'm assuming the code you used was JS, which I haven't studied yet, but I'll figure it out. Everything else was great though, thanks for the help!
Source Code: codepen.io/PraRoz/pen/mdmZvwv
you can also add thourgh html and css with ancor tag to create image into link if you dont know javas then
You are a saviour I had a project of designing a fastfood/restaurant website thank u
Welcome bro 😊
Thank you so much
This took me a whole day
this is excellent, Thank you so much
Thank you sir♥️
czcams.com/video/2A9EpKCz3SQ/video.html
Given an opportunity if possible. I could have given you infinity likes. This video is awesome 👏. Very simple and easy to follow the steps. Many thanks to you. Wish you all the best in everything. I'm forever grateful
Thank you so much 😀
@@PraRoz You're welcome 😊. I'm so happy today
thanks this video was realy,realy,realy,realy helpfull😉
Thanks for sharing, it's really helpful.
I really like this website. It's look very good.
Glad you like it!
czcams.com/video/2A9EpKCz3SQ/video.html
A very nice and easy tutorial to follow- except my form overlapped with the main image such that it was outside the webpage.. other than that its very beginner friendly
Glad it helped!
thank you so much for the amazing teaching and a clear work you have shown us
Pro thank you so much i have doing this for 7 hours
I finish it thanks 1000 times
Thanks Sir for this video it's so good and easy to understand
But why you don't use header , nav and aside i think it's better than div it's just a note and thank you again for this great work ☺️
Welcome sir 😊
Amazing!! thank you so much brother.
This was so much helpful
keep up the good work👍✌.
plz... video 2 of this video upload. I need video 2
plz.... help me....
I already have a video on how to upload this live.
click the link
czcams.com/video/tjhPwFQCQUQ/video.html
Ok thanx but next process of home page , about page
Please🙏🙏 help me...
one of the best, shortest and cleanest tutorials😍
Flappy Birds Game Using Python With Source CODE
czcams.com/video/C0H8D74f-Ys/video.html
Nice teaching ,,very clearly each tag step by step u tell nice one ,,thank you sir👍
Very nice and informative tutorial. 🥇 Thank you for the great job and all your efforts. 👍 I think width 1200px a bit old for our days with screen resolutions like 1920 x 1080 and bigger...
Yes, you are right
Thank you for this good work but please I have a request if you can explain why you do what you're doing in more detail because we're beginners thank you again
Noted, Thank you
That point is missing in all the css tutorials on yt
I am a web designer I need some love I want to make my channel better than before.
czcams.com/video/6lCozTTSdjY/video.html
@@Truth_Seeeker coz the video may go longer than 5 hours 👀
U will getting one option in chrome like inspect option so if u click on the inspect it will show some interface so there u can change the value an check that wher its moving wher its coming an all thats it thank you
wow! it's very good. keep it up !
Thanks a lot!
I'm so happy with you, this video helps more
Thank you and keeping posting like this :)
Thanks broo
Bro that's was unbelievable, thanks for the tutorial you mad me impact some little knowledge on about web development.Thanks and remain blessed 🤩
Happy to hear that!
I am a web designer I need some love I want to make my channel better than before.
czcams.com/video/6lCozTTSdjY/video.html
thanks you so much brother I will be to try learning with you!
New sub amazing video !! Thank you for the free source code as well !!
Please classify us ab beginners never code
Sometimes I confuse whether you clicked 'enter ' or other place. But understood very well . Tnx
Noted.. //thank you sir
Understood everything but i am having confusion in the padding, border and margin
Overall nice video👍🏿👍🏿
Nice buddy, keep on learning, its not that hard. & also im sorry for not explaining more
I can turn your website into a great and unique application
I can discount 80% of the price for you
thank u so much man, im a beginner and this helped me a lot
thank you so much..your explanation is very clear and very useful to me
Thanks for this lovely tutorial. Good work💪🏼💪🏼❤️❤️. I am just having a little problem aligning the icons in the center. The Skype logo keeps overlapping the .div form
Sorry for error sir.
Please check the SOURCE CODE given in description..
Thank you for watching 👀 😊
can you do a tutorial for how to make so you go to another page when you press home, about, service, design and contact? Very good tutorial ;)
I was also keen to look at the navigation and routing elements of this site
Just paste the link of that file instead of # in link
This video is awesome ...💛
Amazing, thank bro .
I love to build these websites but would be nice to know if you can explain what some codes are for. as an example: why you're using transition: .4s ease and not just simply transition: .4s. I'm sure I can find somewhere why but sometimes I just cant seem to find the information/answer Im looking for.
It's an editing style. It helps with the overall look. There's an app I write for, and if you regularly direct an overlay w no easing functions it'll just move linear. Easing functions give it more life; it's visually more pleasing.
Thank you for this html and css code. I tried to add a little bit still to this code and I had a major problem. For example I tried to hover the btn class inside the a tag in the search class. Any idea on how to go about that please. I used a couple selectors and combinators but it didn’t work out.
.search button:hover {
background-color: ;
color: ;
}
@@PraRoz thank you.
as a begginer i really enjoyed make it happen with you brother keep up the good work
czcams.com/video/C0H8D74f-Ys/video.html
Thank you for the tutorial bro... I followed it from start to finish. I learn so much from this video. Thank you very much !!
Welcome sir
It's really amazing 👍🏻
Thank you sir
@@PraRoz it's ok Sir, I also upload these types of videos 😍
@@TechNand Do watch this.. It is full one page website:
czcams.com/video/h39m-e8JHDc/video.html
I'm actually a very beginner in web designing, currently I know about HTML and basics of JS, can you please suggest me what languages are really mandatory and how should I start to make a career in web designing?
Html, CSS. Should be your main choice at first.
JS is used after you know little of CSS. Part. To make it work.
W3school. Will help you a lot.
Or You can watch my videos. For learning as well thank you♥️
Me to and sir your a boss
You deserve like bro 💗
I've subscribed your channel because I've seen most websites for practice. Thank you Soo much Sir
🇵🇰
So nice of you
i got a problem where my home about.etc wont change the position from left to top of website need help here is my css code {
margin: 0;
padding: 0;
}
.main{
width: 100%;
background: linear-gradient(to top, rgb(0,0,0,0.5)50%,rgb(0,0,0,0.5)50%), url(image1.jpg);
background-position: center;
background-size: cover;
height: 100vh;
}
.navbar{
width: 1200px;
height: 75px;
margin: auto;
}
.icon{
width: 200px;
float: left;
height: 70px;
}
.logo{
color: #ffffff;
font-size: 35px;
font-family: Arial, Helvetica, sans-serif;
padding-left: 20px;
float: left;
padding-top: 10px;
}
.menu{
width: 400px;
float: left;
height: 70px;
}
ul{
float: left;
display: flex;
justify-content: center;
align-items: center;
}
ul li{
list-style none;
margin-left: 62px;
margin-top: 27;
font-size: 14px;
}
By looking into source code you can solve your problem sir , thank you!
Background Image : postimg.cc/QHXgDzSQ
Source Code: codepen.io/PraRoz/pen/mdmZvwv
Hi, even I got error at the same stage, did u find the solution
At 2:12 I am not able to type 50% I have done everything and if I type 50% it will immediately red line below can you tell me what to do?
u can directly do:
background-image: url( .....);
@@PraRozthank you very much i will follow you
@@chenindiexd8208 man how did u did i still cant do it? how you writed it?
You write everything exactly like in the clip until 2:33 and then you stop writing and delete : background: linear-gradient(to top, ⬛rgba(0,0,0,0.5)50% ,⬛rgba(0,0,0,0.5)50%), url(1.jpg);
@NDGames You could also check to see if index.html contains because you have to write it in 1:09.
woow this is great!!!!😊
absolutely perfect bro i had to subscribe cause of hw much dis helped me bro good job every single step is brief 💛💛
Where can I find sharp images like that?
I found this on wallpapercave.com
Also here :
www.wallpaperflare.com/tree-brown-tree-and-full-moon-aero-creative-blue-beautiful-wallpaper-pinhj
Thanks brother
How safe is the JavaScript ion-icon link? My Vs code warns me...
@@benogega2543 It is completely safe sir. Around 100k viewers have used it no .. probem
Great tutorial, but your semantics and your use of floats and position is outdated. Flex box and grid are easier and user friendly.
Thanks for Suggestion.