Make Responsive Website Using HTML & CSS | Fully functional Multi Page Website Design Step by Step
Let's make a complete business website using HTML and CSS only that can send an email and is fully responsive on any device. Step by step process to create a fully functional and totally responsive website using HTML and CSS.
Source code: https://github.com/aashishpanthi/hostque
Part 2: coming soon ...
In this video, we'll be creating a complete multipage website that has all the basic functionality needed for a startup or an organization. It will be a fully responsive website design and we will create 4 different website pages and we will link all pages through the navigation menu. We will learn to create Home Page, Pricing Page, Contact page, and Login page with a working contact form. And at last, we'll host it for free with a custom domain like this one: https://hostque.netlify.app/
Main things about this video:
1. You will learn to structure the project
2. You can send email without any backend
3. You will learn to reuse the same CSS styles
4. You will get a good understanding of the flexbox
5. You can make a complete responsive website
6. Learn glassmorphism form design
7. Hosting using Netlify.com
Download the images used in this website from the links below and try to code along with me. That way you will get the most out of this tutorial.
space.jpg :: https://unsplash.com/photos/Q1p7bh3SHj8
laptop.jpg :: https://unsplash.com/photos/Im7lZjxeLhg
man_with_computer :: https://unsplash.com/photos/PbUShBsiwZI
lock.jpg :: https://unsplash.com/photos/lmFJOx7hPc4
favicon :: https://bit.ly/3EAVGz2
SVGs :: https://undraw.co/search
OR download all from here: https://git.io/JPiq2
You need not know much, to begin with, in this tutorial, I will be explaining everything in this video. This video may get longer but I think it's worth it. Stick around and I will show you how to create a website. If you are an absolute beginner then I think it's the best video to get started.
And forgive me if I sound horrible in English. The real reason is that I'm horrible at English.
And here is the time stamp:
00:00:00 - intro
00:00:19 - demo
00:03:34 - making video longer
00:04:10 - Project setup and basics
00:10:55 - Start coding (Links setup)
00:15:21 - Making navbar
00:50:24 - Main text area of the home section
00:59:46 - Making responsive design
01:03:11 - Making navbar responsive
01:23:49 - Coding about section
01:44:05 - Making trusted by (about section)
01:55:48 - Making subscribe box
02:03:22 - Making footer (copyright text area)
02:08:31 - Coding pricing section
02:35:40 - Completed two pages (next two pages)
WORTH CHECKING:-
Hosting websites for free(playlist):
• Free Web Hosting
Making Facebook Clone using HTML & CSS:
• How to create a website like Facebook...
Send EMAIL without backend (using HTML):
• How to send email using HTML only wit...
Top 5 online CODE editors:
• Top 5 Free Online Code Editors, cloud...
AROUND THE WEB:
GitHub: @aashishpanthi
https://www.github.com/aashishpanthi
Instagram: @aashishpanthi11
/ aashishpanthi11
Dev.to: @aashishpanthi
https://dev.to/aashishpanthi
Do not click this 🥴: https://bit.ly/352wEsG
-------------------------------------------------------------------------------------
Appreciate:
Images from Unsplash:: https://unsplash.com
Free video from Pixaby:: https://pixabay.com
Free video from Pikbest:: https://pikbest.com
Free video from Pexels:: https://pexels.com
Free stocks from Mixkit:: https://mixkit.co
Illustrations from undraw:: https://undraw.co/illustrations
Free stuff from Flaticon:: https://www.flaticon.com/
And legendary Giphy:: https://giphy.com/
And all those websites and products that helped me in this video.
Hey there lovely people, this channel is about WEB DEVELOPMENT && PROGRAMMING. Here, I upload videos once in every uncertain time 😜. Mainly, videos are related to tutorials and informative videos.
-------------------------------------------------------------------------------------
I want to tell you something. People who make 15 -16 hours long videos are legends. Cause while creating this video, it took me 3 times more time than I originally decided to take out for this video. I had to work for this straight for several nights. Making the sample, writing some script, recording, removing noise, editing video, and way more things are involved in this process and I'm still working on part -2. So, please don't skip the video and as always I'll see you guys in the next video. ( This is me uploading the video a second time because my first video was half corrupted)
#code
