Today we are going to create a website which will be a nice one page website. This is for HTML & CSS practice and through this project we will see many things like how we can make our website fully responsive, so many things about pseudo elements, hamburger, Off-canvas menu and many more. Hope you will like this video. Also, You can download the source code from the link down below.
Source Code : https://github.com/ShaifArfan/one-page-website-html-css-project
✨ Like our works and want to support us? 🚀
We’d really appreciate a coffee: https://www.buymeacoffee.com/shaifarfan08
Tutorials mentioned in the video:
Complete Restaurant Project: https://youtu.be/4y-_3Ayiauw
Text Reveal Effect : https://youtu.be/LKNDqHtIkVg
Responsive Nav-bar : https://youtu.be/pZUQ7tlbi70
Hamburger : https://youtu.be/UfPQe-v8CeE
Websites mentioned in the video:
Visual Studio Code : https://code.visualstudio.com/
Icons8 : https://icons8.com/
Similar Projects:
Shaif’s Cuisine – HTML, CSS Project https://youtu.be/4y-_3Ayiauw
Amy’s Portfolio – HTML, CSS Project https://youtu.be/78l05_nuDIg
Ayan’s Portfolio – React JS Project https://youtu.be/esC2k9z7w2U
Join The Community :
Our website : https://webcifar.com/
Instagram : https://www.instagram.com/web_cifar/
Facebook Page : https://facebook.com/webcifar
Facebook group : http://bit.ly/fb-group-webcifar
Behance : https://www.behance.net/webcifar
twitter : https://twitter.com/webcifar
Music Credit :
Song: DayFox – Crushed Hearts (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
Video Link: https://youtu.be/TDo3e0C3W_Y
#responsive #website #project
source
🔔subscribe and turn on the notification bell.
👉 Hire Us : https://webcifar.com
👉 Facebook group : https://facebook.com/groups/webcifar
👉 Instagram : https://www.instagram.com/web_cifar/
Awesome, it helps me a lot !
Thankyou sir you give.your time
Your tutorial was so helpful, especially for me. i'm currently 1st year student taking BSIS. i just wanna ask regarding the section title part because im having a problem at this and i dont have any idea whats wrong with the code.it does not affect the service and project part. i would be grateful to be assist in this matter.
You didn't insert the link for the images used in this video
hello i have been created the website and having problem in header of desktop it creates scrool bar of list section and have to scroll to very bottom to see home services etc what to do?
which theme and font are used in vscode ?
Awesome
pls help!!!My section card is just covered the image part,idk why
ignore
20:00
36:00
54:00
I'm kind of desperate right now and need help. I've been trying to fix my code for about an hour now and I can't find the mistake. My projects image is always a weird size. It is super elongated and when I make the browser window bigger I get smaller than the container that contains the text and the heading for each of the projects. I can't find any mistake in the CSS nor the HTML. Can someone look over my code if I send it to you??? Appreciate the help
Yes, I did spend 3 hours and 21 minutes of my life watching this video.
This video was so amazing and helped me, just to practice and learning the basics, now everything that's stuck in my head is "div, margin and padding" thanks!
Keep up the good work WEB CIFAR!
Legend
i have problem at 1:21:00. my flex-basis for img not transform into 50%. i try repeat so many times. and try to change from Visual Code to Sublime Text. it wont work. can anyone help me?
You are Bangladeshi ?? You had set up location Cottogram, Bangladesh.
what's that theme you use in your visual studio???
I love this tutorial but i'm stuck at making the header
beautiful app
nice
nice
For some reason my hero section animation does not work completly as it should. When I refresh the page it shows the animation for the first two lines at the same time. It reveals the first text line as it should with the animation. Then 1.5 sek after the secund line of text is revield. The animation for the third line works as it should.
Love the video but very confused on this part
https://youtu.be/DVwZ3b6yjII
Hi, I started creating but just at the beginning had a problem with font. It doesn't work although I correctly put it in my css file, please help!
Sehr schön 👏🏻
that video was a grat walkthrough (Y)