How To Make Complete Website Using HTML And CSS | Responsive Website Tutorial
Вставка
- Опубліковано 1 жов 2024
- LEARN HOW TO MAKE A COMPLETE WEBSITE USING HTML AND CSS STEP BY STEP FROM SCRATCH, RESPONSIVE WEBSITE DESIGN TUTORIAL WITH HTML AND CSS
LEARN TO CREATE A FULL WEBSITE IN ONE VIDEO
❤️ SUBSCRIBE: goo.gl/tTFmPb
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialsp...
#Website #HTML #CSS
❤️ Upload website online: • How To Upload Website ...
In this video you will learn to make a complete website using HTML and CSS step by step from scratch, without skipping any part. This will be fully responsive website design.
This complete website have multiple sections so you will learn to design different website layout using HTML and CSS. We will use media queries to make this website full responsive for all devices.
◼️ Download all images: drive.google.c...
02:21 Make HTML and CSS Files for Website
04:30 Connect HTML and CSS Files
05:10 Create Header Section of Website
19:30 Create Side Menu on Website
27:36 Create About Section on Website
35:16 Make Services Section of Website Design
44:16 Create Courses section of website
52:02 Offer section design of website
55:44 Contact section design for website
01:04:40 Website footer design using HTML and CSS
01:18:42 Add Floating Social media icon using HTML & CSS
01:22:14 Make website responsive for all device
01:34:02 Add scrolling effect on website
01:36:36 Your complete responsive website is ready
◼️ Smooth Scroll GitHub link: github.com/cfe...
-------------------------------------
◼️ More videos from Easy Tutorials
Make eCommerce website using HTML CSS Bootstrap
► • How To Make ECommerce ...
Make travel website suing HTML and CSS
► • How To Make A Website ...
Create Job Search Website With HTML And CSS
► • How To Make Website Us...
Create Resume Website With HTML CSS Bootstrap
► • How To Make A Website ...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
◼️ Image Credit
www.freepik.com
-------------------------------------
◼️ Like, Follow & Subscribe us:
👍 UA-cam: goo.gl/tTFmPb
👍 Facebook: goo.gl/qv7tEQ
👍 Twitter: / itsavinashkr
I've no idea of codin but you make me feel confortable & motivated me to try it. Thanks a lot for ur tutorials and ur time. Wow!
Hi, can you share code with me if you have available because I have not, also if you like we can learn and understand jointly ☺️pm me
@Asad Ali, can I join in the team? Will love to learn together with someone else...
I salute your dedication and consistency man ! Awesome videos everytime!
Thanks a lot for comment
ua-cam.com/video/R-rkHXt7TUI/v-deo.html
love the commentary on what you are doing, definitely much easier to learn from a pro unlike other youtubers. they dont actually run through why they do things step by step as much as this guy.
dude what he just repeating what he typing
@@ahmedmani1051 lol no🤣
can i write this code in notepad of windows 10,?
You can, but notepad isn't the best for coding. Visual studio code is better.
Hello, where do you find the pictures, cartoons drawing that you use as background and other images ?? Not the link where you can download them, but i mean in, do you draw/make them of is there a site where you could downloading them for free, but also more of those kind of cartoons / images ?
I want to learn html, css, javascript from you
Are you a full stack dev now?
Really amazing💕😍.How to make online exam website like NIELIT CCC
Great layout, I like how the position of the text and illustrations is different in each section.
It was very helpful.Thank you sir
5 Comments for entire source code
good job...but bro menu onclick pr open ho ra but wapis close nhi ho ra...q???
Hi ET i have tried to recreate your website for self learning but it's not commit properly in about page flex display. the text will be display at down the pic not on right side at flex wrap. even i google it and tried to change css too but nothing works. the img width 100% took full screen it works in 50% mode so pls help me out to fix this
This is my first complete responsive website..I did it.Thanks alot!!
After minute
After minute 35 I dont know why my features do not form a row, I've been doing everything step by step, any suggestion?
does the image size matter?
Thank you so much sir for such an interesting video... where I get to learn more practically about HTML and CSS.. little bit of JS also...!! It was great experience while watching this video.Keep making videos sir .❤️🙏😊✨
Thanks again Pooja
18:39 sir after applying br tag the lines are coming one upon another and not on below
Are u using notepad ++
html {
scroll-behavior: smooth;
}
🧐🤷🏻♂️ Why use a js library when you can just do this
Is there any benefit?
It doesn't support in ie
it did'nt work
@@anonyfeed1076 well, in that case yeah.
@@anonyfeed1076 no one cares about internet explorer, the last time it was updated was 2013
@@ts8960 but still many people use it (no reason to, came with windows?)
U have done all these without Bootstrap. Great Man! Salute boss!!!!
thank u sir u r my mentor i complete the whole tutorial and made the complete website
Great 👍
After minute 35 I dont know why my features do not form a row, I've been doing everything step by step, any suggestion?
You can share me your code so that i can check. [avinashdm@outlook.com]
That was very helpful ,but i am stuck and images are not visible on small screen like mobile , only image icons are visible.
Please suggest something.
all images are invisible on only header's background image?
Sir koi Aisa video banao jisme Ek sant bahut sari css file ko add kiye ho aur aur Navigation bar pe jab tak kare to hide jaye aur fir tab kare to fir open ho slide hote huye Animation Accha ho
How to make png files?
I want use different imgs but on Google only jpeg files are available
i use photoshop tool, you can use www.remove.bg/ online tool also
hello sir,
I have an issue with the logo position .its appears on the bottom but I need it on the top left side and I will use your following code but there is nothing change then what happens, sir. what will I do? please explain...
Where do you collect those amazing stock images and also your layout was amazing
Super
Loved the layout, looking forward to building this myself from the video.
@Supreme Fate Just follow the tutorial guy. That's the point
Try to make a modern website like this using SVG.
Make different beautiful Navigation Bar!
Ja bhrat
A VOTE up for this!! @Easy Tutorials
Hi Umer, There is one video with SVG on my channel. Also working on 2 other design with SVG, Will share it soon. Thanks for comment
@@GreatStackDev Can't wait!!!
@@GreatStackDev Okay Thank you for your valuable time.
Just a request please make a vid to show how to choose certain style And graphics related to it. Although these are great, one needs to do something by oneself to be better.
You're doing a great job btw!
Search for keywords related to your website content on this website: www.freepik.com/
I searched for "people illustration" on this website and found images for this website design.
Very nice and full explained tutorial. But I am having an issue. I followed you correctly but when I click on menu button, the navbar is not coming. Please can you solve this?
Hi, thanks for great content. I have a question though = how do you prevent scrolling back to the top once you scroll to the specific section of a page and then you click the hamburger menu to hide. Thanks in advance :)
poo 🤗 🤗
I love you
ua-cam.com/video/R-rkHXt7TUI/v-deo.html
This is not a tramp dating site!
Well explained. I love the design, Looking forward to learning a lot from your channel :)
Thanks a lot for comment
Hi Im having problem with the show and hide navigation I followed all the steps but it doesnt work at all
I need some help plz
i am new to learn HTML and CSS.Please teach me someone.
i could not fit the content "about-text"
i needed to add word-wrap....
.about-text{
word-wrap: break-word;
max-width: 500px;
margin-right: 100px;
display: inline-block;
}
why??????
Aap mujhe ye bata sakte ho ki ye website jo aapne bani hai usse kya kehte hai matlb illustrator ki image use karte hai website me usse Google kese search kare thoda search karne me problem aati hai mujhe esi website me
Sir please make project on online voting system website for final year project 🙏 complete website 😊🙏 please sir 🙏🙏
sorry Avantika, I don't know to make that
@@GreatStackDev okay
day-1-------22-12-2021----------
1)00:00:00 - 00:02:05 --explain about website.
2)00:02:05 - 00:03:26 --project setup
3)00:03:26 - 00:04:00 --html code start step-1.
4)00:04:00 - 00:04:55 --css code start step-1.
5)00:04:55 - 00:05:26 -- html-step2-section tag.
6)00:05:29 - 00:06:26 --css-step-2-style for section tag.
7)00:06:29 - 00:06:55 --open code in chrome developer tools.
8)00:06:58 - 00:07:55 --html-step-3 adding logo image.
9)00:08:00 - 00:08:30 --css-step-3 adding contaier style.
10)00:08:31 - 00:09:20 --css step-4 adding logo styles.
11)00:09:20 - 00:09:50 --html-step-4 adding text.
12)00:09:51 - 00:10:05 -- ccss-step-5 adding font styles from
13)00:10:05 - 00:10:35 --html-step-5 adding br tag.
14)00:10:35 - 00:10:47 --html -step-6 adding p tag.
15)00:10:55 - 00:11:35 -- css-step-6 adding head styles.
16)00:11:35 - 00:11:50 --css-step -7 adding font style to h1.
17)00:11:55 - 00:12:15 --html-step-7 adding span tag.
18)00:12:23 - 00:13:14 --css-step-8 adding styles to span tag
19)00:13:15 - 00:13:40 --html-step-8 adding button in html.
20)00:13:43 -00:15:10 -- css-step-9 adding styles to button,adding styles to p tag.
21)00:15:10 - 00:16:00 -- css-step-10 adding styles to button.
Bro can u make some videos on backend to.. Everyone uploads on frontend but what about after making frontend.. If possible make a full working website
Sir toggle menu button is not working properly.....when clicked once the menu shows up but doesn't hides when the button is clicked again....plzzz help🙏🙏
Please upload a video that if a registration form is filled the, A note came that a code is sent to your email and the code is really sent to email which is necessary to enter for registration. Please i am waiting very much
sr I canot get the image in proper position u done in this video,can u plase solve it.
Hi Haritha, can't solve it without seeing your code. Please share me your code on email so that i can check where is the issue in your web design. [avinashdm@outlook.com]
bro where is source code
Hi.do you have css course, from zero
I mean styp by styp (expluaning all the properties).before building pages??
for the smooth scroll functionality you can do the following without importing any javascripts
in your css file add the following:
html{
scroll-behavior: smooth;
}
Hello sir
Actually mai aapka yah wala layout bna rhi hu toh jab mai home page pai menu.png ko click kr rhi hu toh wo slide ho rha but phir sai click krne pai close nhi ho rha h
Or maine aapke tutorial sai code recheck bhi kia
Pls try to resolve mai issue I also face the same issue in previous website design also
Why i can't add backgrou picture ?? i did it with notepad . PLEASE HELP ME
Is It Important To Download Java script resources Pack to Make Menu button Work....
make a website for barbers html css javascript php etc complete and responsive with reservations via email or app or that the reservation arrives on a monitor. It is an interesting project to do even if complicated but think about it as an idea to bring would be interesting! thanks for the reply in the future.
@GreatStack please the Menubtn, when I click to open the menu, it's unable to close after, I'm a beginner 😅
What's wrong here😢
Hii .....In ur channel you upload any job searching website creation video.....
It was unfortunately that UA-cam has started using your channel subscription to steal money from my account with notice..
Plzz make a video on tourist response website
Hi Mahi, Please check out this similar tutorial that you are looking for: ua-cam.com/video/AiaEqc9UMf8/v-deo.html
This Should be a sole HTML AND CSS !! you should have not included scripts in it !
are you used html and css only!! OR html and css3 ??? Don't forgot my comment please.
Hello! I love this video! but I met some problems... I don t know why from minute 25.. I cannot hide and unhide the menu, can you help me? Thank you!
Bro, can't see the image in my mobile but while coding in my laptop its ok
Pls help me bro.
And I have tell that your creativity is amazing and mindblowing ❤❤❤
i watched your all vedios sir.. thank you soo much sir
Bro... You've used java script 🤦🏻♂️
At 14:10, I also set outline to none but the button did not get any change in appearance?
So why did you use this line?
Please correct me.
i don't no why my sidenav option deosn't come out after clicking!! i recheck the code 4-5times al ready..i exactly write what u have shown on the video..can u give me any suggestion for that??
Please sir make Video On HTML & CSS News Website..
I have a question...
how to make the menu close automatically when clicked outside of the menubar and also when clicked on any of the menu links?
Sir,i really appreciate you for give us modern tutorials but where you get the Images.can you suggest me.i`m waiting for your mention
I wish ur my lecturer, you have enspired me alot in web designing thanks i really appreciate what ur doing
Glad to hear that
where can I get such Animated images??
Undraw
Why we always add flex-wrap:wrap ; this is for multiple lines and also it helps us responsive it . But I can't get it inside out.
I would like to clarify something. How did you searched for the images in freepik?
For anyone whos side menu isnt working: just look over it again. The whole code this man wrote is right and perfect. I assume you may have made a little mistake. Just find it and change it
Hlw bro your tutorial is so nice .For this i follow your channel.can you make wordpress theme development and plugin development tutorila.Ifyou give thats type of tutorial it will help for us.
Hey bro. Please reply me with the answer.
From where you bring exact suitable stock images. For your demo websites. ...??
I have checked ur all websites. And i want to also grab those images so that i can make my personal website. Amd host it on internet.
www.freepik.com/
www.pexels.com/
unsplash.com/
These are all websites from where i download images for my website design. you are asking the same questions every time.
@@GreatStackDev sry but how to download that images. How you can find exactly same pattern images. I want to know that bro
Search "vector illustration people" on freepik
@@GreatStackDev okay bro thanks👍🏻
Sir from where did you download such free photos can you plzz share that website with us....
Hi everyone I am facing a problem when I go to link other pages of website (inside folder) with home page its ok and can be done
But when I can't link inside folder pages with outside pages
Plz me give me a solution
Why z-index: 2; in # sideNav in css. Even z-index: 1; gives same effect
Dear Sir, I really enjoy your tutorials,,,Please create wordpress video.
awesome video
Glad you enjoyed it
Wonder why not using relative units.. EM and REM..
Hello sir...
Tell me a little, like when we login to any website, we are given a login form...
How can we do this without canceling the login form...anywhere you click it will be done...
Window scrolls to see a video and that also stops.
sir plss...
The smooth scroll function doesn't work for me, anyone having the same issue?
i cant upload sidenav menu ber. it cant work. what's wrong.
but how u made it.
At 30:07 where did the left margin of that container gone, why its not overlapping on image. In my case a space was displaying on the image
I want learn web design course kindly suggest me or kindly upload tutorial videos
how you get that all awesome picture?, amazing work!
Very simple css not modren Please change your style You have giving many class take a shortway
How do you make such a beautiful background image ?
🌹
I accidentally had the video speed at 0.5 and I was asking myself why this guy talks so slowly.
27:47
That was just what I was looking for! Thanks. Would love to see more like this.
Thanks Kaysar Zamy, Will be making more website tutorials like this.
Easy Tutorials Where can I find the code for this project brother ? Can you give the GitHub path
@@GreatStackDev please reply to my query
@@pramodhthota5621 If they did that, people would be too lazy to watch their videos and learn how to write the code themselves.
That was just what I was looking for! Thanks. Would love to see more like this.
Which editor did you use for the html? I didn’t get you properly.
thank you very much, permission to save and learn
Highly appreciate your selfless service.
Saying html and css on the tittle and uses javascript on the video
Yes because it is very small just for the toggle menu, nothing much.
I don't know anything about javascript, I stucked into a problem then it took 1hr to solve.... That was painful 😵
I'm inspired to see your tutorial. is it possible to make a multi vendor responsive ecommerce website using html css java script? please make a tutorial about multi vendor ecommerce site.
hello sir I am also making a website for business can I copy the images and ui of your website . OR the images are copyrighted please tell
Today, I unsubscribe Your channel.
i was going to do this with vs code but my html file didnt changed and just show me empty page! before that i cant make index.html file and its still text doc not google chrom file. i mean the icon didnt change :(
what if I want to put the side bar thing horizontally like to make it open horizontally instead of vertically
i think you have to solve a problems in nav menu. when you click menu items. the menu don't hide it's show on computer and mobile screen. i think you have to solve this problems
my sidebar doesn't work can anyone help me please