One Page Full Website Project For Practice | HTML & CSS Responsive Website

[@charlieduke1627]

Thanks so much for tutoring this amazing website. I subscribed to you instantly when I see this video. Hero: 10:48 Services: 36:03 Projects: 1:04:19 Contact: 1:38:31 Footer: 1:52:27 Responsiveness: 2:04:20 Header: 2:30:09 Hamburger Menu: 2:46:08 Background-color-header: 3:09:04

[@kevicodes8177]

👍🏽👍🏽

[@pratik1266]

Thanks

[@vettona2824]

Gracias!

[@MuhammadTaimoor-e1h]

After project there is about me section also

[@ataraxia0420]

If I'd have a dollar everytime he said "as you can see that", I'd be a millionaire. Sick website design, very organized code. I'll be checking more of your videos.

[@webcifar]

🤣

[@uttamsharma8414]

Make this video popular, students are searching for this type of videos.

[@aayanbaig6736]

Right like like like

[@hbros6811]

i forgot how to code in html and css, and this 3 hours video make me feel like all my knowledge has come back to my brain xD

[@zeronexbd5739]

bruh

[@danielmpay6365]

this guy is something else ;;;;;;;;;;; this website basically is 12 hours project minumum,,,,,,and ahe made it in less than 4hours!!!!!!!!!!!! respect ,

[@KingShortsYT]

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!

[@webcifar]

Thank you ❤️

[@ansabkhan9857]

"The limit is..... that there is no limit." Excellent. Salute to you sir, beautiful explained and created.

[@webcifar]

So nice of you

[@Foody-j4z]

I will donate insha Allah when i become full stack developer.

[@matthewp5543]

fk allah

[@nadeemmirza3245]

In Sha Allah

[@wannasubmeididntuploadedan3836]

@@matthewp5543 yes

[@muhammadrayyan708]

MasyaAllah

[@ron0studios]

Eid mubarak

[@nitingupta9782]

Amazing work... appreciated...I am working as a project manager in energy sector and just to learn some good things during lockdown and was interested in programing for long so watched your video...I learn every single line from this project.

[@webcifar]

Glad to hear that. Thank you. More project based videos are coming.

[@Mr_Brian]

@@webcifar Welcome. I'm really forward to such content.

[@fullmotivados9825]

Hey bro, FROM Argentina. This tutorial is really great. Unlike others that first do all the html and then the css, you go part by part and it's easier!

[@webcifar]

Glad it helped! Also checkout this modern portfolio project [kzbin.info/www/bejne/bWnPYWiVo9p3f8k]

[@guitarherozzz4009]

You are AMAZING, genius. I just started learning HTML and CSS 5 days ago and I'm following along here taking notes. You know so much it's mind blowing.

[@adaezeikemefuna]

Me too... Could we link

[@guitarherozzz4009]

@@adaezeikemefuna What's up?

[@triplegmint2795]

@@adaezeikemefuna use freecodecamp and always do projects its good for practice.

[@Mr_Brian]

I've never seen a site this beautiful. This is amazing work honestly. Please keep it up.

[@cmdaltctr]

I love web dev community. So many lovely people. Glad to be here.

[@melania239]

This is one of the best tutorials that I've ever watched. Thank you.

[@webcifar]

Glad it was helpful! Also checkout this modern portfolio project kzbin.info/www/bejne/bWnPYWiVo9p3f8k

[@melania239]

@@webcifar of course I will :)

[@zackdo5194]

Really appreciate your work! This tutorial got me 2 jobs. can't thank you enough.

[@mushishi3672]

Thank you Afran for this AWESOME how-to Tutortial! Keep coding! You're the best!

[@ronitchaurasia5604]

finally after 4 days I completed this..... I first applied all css by myself then followed you....helped me a lot..... thank you so much for this video.

[@paulocesarchaves87]

Just one word for you: AWESOME!!! Congratulations on this great work you did. I don't think you have an idea how much you're helping us. Thank you very much for this video class and be sure that we're all anxious to see more videos. Keep up the good work!

[@webcifar]

Wow, thank you!

[@starmirza]

Genuinely, it's probably the most comprehensive video for a web design.

[@lizalizaveta1882]

This is a great tutorial to practice more skills, i am so grateful to the creator of this video, great work. A few remarks though: to create a new div you can simply type in .name.container and press enter. Also to create a dark overlay you can use linear-gradient. The code would be like this: #hero{ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0,0,0,0.7)), url("./pictures/landing_page.jpg"); background-size: cover; background-position: top center; position: relative; }

[@gujaratiincanada2464]

This channel deserve more subscriber than it has. I came first time and I subscribed it.

[@webcifar]

Thanks for supporting us.❤

[@xkdsgn9296]

I'm currently working on my own website and your videos are really helpful for it. I was so suprised when you made text reveal animation without using JS or something other than clean HTML and CSS! Now I know i have to learn much more things than I thought... Keep going bro!

[@MDABID-bv4io]

ভাই, কি বলবো বুঝতে পারছি না............ এক কথায় অসাধারণ আশা করি আপনি আরও সামনে এগিয়ে যাবেন 😍😍😍😍😍😍😍😍😍😍😍😍

[@webcifar]

Thank You Brother ♥

[@starmirza]

Absolutely brilliant. You've literally taught a novice how to design a website. Arguably the best KZbin tutorial.

[@alzca]

The most detailed tutorial I have found so far (and I've been looking for a while). I have learned lots of new things!! Excellent job and thanks for sharing! You've just won a subscriber and keen upvoter!

[@CarpenterBrother]

For anyone facing the same problem as me where span animation fills up the entire block 25:58, it's because of your browser, go to #hero h1 selector and change fit-content to -moz-fit-content took me so long to figure out browser was the problem, hope it helps.

[@iyajudielsequijor5642]

Still won't work 😭

[@wintermorillo6567]

It took me like 3 to 4 days to do it, I was not putting all the hours needed, but it was a great experience, I'm just starting in this world, and I've learnt many things from this video. Thanks a lot! I would like to see more tutorials about animations, the one you used are just awesome!

[@webcifar]

Great job! Checkout All Other Tutorial Projects Here: github.com/ShaifArfan/wc-project-tutorials

[@manishjoshi2945]

I started by learning basic HTML and CSS commands from the free code camp. Its necessary to maintain pace with such an advanced tutorial. I love the way WEB CIFAR has done it. I look forward to more video tutorials with different styles and media queries applied so that we don't have to struggle if a client asks for a different design.... Also, I request the admin to pls explain a little about the codes that he is using............................

[@simply8622]

this is a sick website ive been messing around with it trying to learn code by reading and editing things and seeing what it does on the webpage thanks for being a decent human most people on youtube just want money out of it

[@theena]

Thank you, Arfan. I thought I was ready to handcode a single page site by myself, but found I couldn't move forward until I came across this. Been coding with this video in the background, and now I am almost done. Thank you for doing this.

[@falaq2556]

When I hear a Bengali voice with English accent, I think I'm gonna learn something easily. Superb Tutorial!

[@webcifar]

Glad to hear that

[@muhammadahmadi7096]

With a big RESPECT. that was amazing!!!!❤💕 thank you bro.

[@webcifar]

I appreciate that

[@rootom2144]

Insane website, i am gonna copy this website. Thank you for teach us how make this insane level of website, i am app developer so i was searching for this kind of website from 3 months. i am very happy. i am subscribing your channel and share with my programmer friends. :)

[@webcifar]

Have fun! 🙌♥✌

[@TrangLe-dp8jf]

I learn so much from this tutorial. I can't wait to apply what I've learned into my project. Many thanks!

[@webcifar]

Thanks.Also checkout other videos 🤘

[@dotboyclay]

A little funny having to hear him go back and fix his own mistakes a few times but obviously this was a long process to explain everything, Amazing video!

[@itsgenti8910]

You deserve 1 million subs thank you for this

[@sailakakap1032]

I'm a student from Malaysia. this long tutorial has helped me completing my individual assignment for my final year. thank you so much for uploading this video. 1/8/21

[@webcifar]

Great to hear!

[@tn9753]

Thank you. Great work distilling the effort down to ~3 hours.

[@im_september]

I'm starting my new project and this video really help me alot. U are doing great job brother Keep going, keep growing

[@mounikachindam9202]

At 02:22:48 when I add flex-direction: row; for contact-item, I am getting a horizontal scroll bar and Address card is displayed only 70%. How to resolve this ?

[@jay-_]

3 months late, but here's what worked for me: add "flex-wrap: wrap;" to "#contact .contact-items" - not the one in the @media, the "normal" one above. that'll make the items flex to column instead of giving you a scroll bar.

[@soggarnguvo1208]

For the first time in my life as an underprivileged child getting someone who made my life so easy and smoothy. I had never thought I would have my own personal portfolio, I am going back to my remote rural areas and approach the owners of small and medium enterprises to offer me a chance to build their portfolios thereby broaden my knowledge and skills , I am gonna buy you lots of coffee man , You are simply amazing, Legendary par excellence.

[@webcifar]

Best of luck 👍

[@hilarryhenry]

this is my second day watching this video,and my website is working perfectly,thnks again sir

[@webcifar]

All the best 👍♥

[@ronyhaldar9753]

Hilarry henry..where are you from?

[@webcifar]

@@ronyhaldar9753 Bangladesh

[@hilarryhenry]

@@ronyhaldar9753 Malaysia

[@C4ssstiel]

As you can see, your video is massive man! Thanks. Definitely will be following this channel closely from now on.

[@yanadomi3658]

Oh my God! This tutorial is soo amazing, thank you so much for this :) :) Looking forward to learn more from your channel :) ♥

[@webcifar]

Thank you so much!

[@webdeveloper9730]

Sir your projects are mind blowing. as a Bangladeshi we are proud of you

[@ronaldrodriguez2497]

Best website code along tutorial I've seen so far. Thank you so much

[@webcifar]

Wow, thanks!

[@nagrajkaranth1055]

Bro no words if i was there then i could have taken 3 or 4 months hands off im subscribing your channel

You are amazing, man. You make things very clear to understand and in the end of the video even give congratulations for us but you are the star here. I wish you all the best, you have a new subscriber now. Thanks a lot for this amazing series and your hard work, sir. 👏

[@Lucluck19]

I might tell you a joke, but I'lll never lie. This video right here has helped me with the major problems I had in coding, which is how to separate my divs, and how to correctly use css. Thank You sir! ~p.s. Great explanation to each declarations.

[@jeremyjason601]

To everyone that has watched and finished this tutorial. APPRECIATE YOURSELF and I believe that you will be successful. Be patient and keep hustling! Thanks Web Cifar for the tutorial though :D

[@MzTeeL]

Yay!!! I created my first portfolio. I did change it a little but I’m so proud!!! Thank you so much.

[@taloki8738]

Timestamps to guide you! Hero Section at 10:50 Service Cards at 36:00

[@shahikalfarukchowdhury4456]

A brother from Chittagong! Thank you for the hard work, appreciate it!

[@webcifar]

Welcome Brother ♥🙌🙏👍

[@NerdgazmCS]

man I cant even follow along to a high quality tutorial like this, why am I so damn useless at web development, oh well I guess some people just aren't mean to do it

[@norbert8916]

bro same.. but dont give up rise and grind

[@NerdgazmCS]

@@norbert8916 thats the spirit man, in 5 years we will look back at these comments and laugh

[@norbert8916]

@@NerdgazmCS 💪

[@mgabriel650]

dont give up man , by the way you have the source code mess around with it , you lack more knowleadge , learn more practice more , it will make sense advencelly .keep practice .

[@sheilahmumbo]

I know.

[@dcabanillas]

Thanks so much man, I was looking for a template for my portfolio and I modified your work to make it in react. Thanks a lot again!

[@anievgenieva8267]

Thank you so much for this video, it helped me a lot in learning CSS and HTML. Appreciate your time making it. RESPECT !

[@webcifar]

Glad it was helpful!

[@adhikarishehzeen8711]

Amazing work..you spent almost 3.5 hours for this.......thanks for that.....

[@webcifar]

Glad you liked it!

[@adhikarishehzeen8711]

Thanks alot dear.. Lots of best wishes 🇮🇳🇮🇳🇮🇳

[@sam-u-el]

this is just a masterpiece

[@md.aynulhaque5841]

proud to see my countryman's Work Awesome..............

[@thecleverest2083]

Read about pointer-events(none/all) instead of z-index for pseudo elements, pretty useful

[@webcifar]

Thank you for noticing it. Yes, that's a better way to do it.♥♥

[@jordiecomm4423]

Hey how u doing now man ?

[@hshxy]

Hi, just a useful tip. Instead of using ::after for overlay. I use something like this to darken the image: background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('img/img.jpg');

[@webcifar]

Great tip!

[@KUREKMotorsport]

Huge Thanks to you, Arfan! Been doing this tutorial along - Took me probably around 30/40-ish hours but the amount of knowledge I got from this tutorial vid is trully amazing. You've helped me a lot on my way of changing my current life. ;) Thanks!

[@webcifar]

Great to hear!

[@mithunyadav8495]

I Completed this project. Its really a good one, lot of things got to know, Thanks arfan

[@nicholascherry5962]

Brother, commenting again. I used your video to build my page and I've sent my website out to a few potential internship recruiters and the feedback has been incredibly positive. Cannot thank you enough

[@webcifar]

Fantastic!

[@aabusayeed]

hey, i am letting you know that i am subscribing. for your hard work. THANKS MAN.

[@webcifar]

Thanks for the sub!

[@aabusayeed]

@@webcifar No problem.

[@dilshodrizayev]

SOOOO, AS WE CAN SEE THAT IT WAS GREAT AND I LEARNT A LOT OF THINGS , APPRECIATE YOUR WORK

[@webcifar]

😂😂 thanks.

[@7traim]

Es increíble lo que he aprendido con este video, no entiendo el idioma en el que habla, pero la forma en que realiza los paso a paso me facilito un montón entender y me ayudo con el proyecto que tengo. Muchas gracias de corazón!!

[@baoqtran]

Thanks for the awesome tutorial! I just have one problem, since the mobile view does fit with iPad size, but for the other phones like iPhone xsmax or samsung phone, the page doesn't fit well. I can still see part of hamburger menu left out. Should we add another screen size for this problem? Thanks again!

[@sydurrahaman8444]

I am facing the same problem. Don't know how to solve.

[@miakomlenac6451]

Did you find a solution?

[@luciadifede4016]

How can we solve this problem?

[@MegaLqlq]

bruh i watched the first 45 mins and i'm like yea seems easy enough. So i started to code side by side with the video and i cannot keep up. I really need to practice to comprehend how to do this on my own because i dropped css due to me not being able to memorize all the different values and properties. I shall not give up this time and the tutorial is but a start so i am very grateful for this exercise. +1 sub from me sir.

[@kailashraizelmaden4684]

thanks bro, hope that we will see soon with some more exciting coding, once again thanks a lot for the effort and time, bro its nice guide in all aspects, and planning to decode all code in react!!

[@ambikasharma7478]

this is so helpful, I am 13 years old and have a school project to use html in order to write about me! but I wanted to be creative and wanted to add css and make an actual website about me and now I can, so thankyou very much

[@renepecher1561]

Such a good tutorial. It's interesting from the first to the last second an I've learned a lot. Thank you very much!!

[@eltonhana8179]

Dude you have such a beautifull webdesighn but also the code is so organized, made me read it easy, keep going you are doing a great job.

[@webcifar]

Thanks.Also checkout other videos 🤘

[@sulta581]

Please do more videos like this. This video is very useful to me, I believe it is to others as well. Thank you for everything and I hope you will make more videos like this

[@webcifar]

Thank you, I will

[@saadimohammed2375]

Very nice.Very well explained tutorial for website design.keep uploading new projects on regular basis.good luck.

[@preetikumari3389]

Sir i can't find images link in description... Can you please help me

[@webcifar]

Check the source code link.

[@ayeshaaktershila8894]

Awsome!!! I have tried thise and it's really very nice.. Appreciate your work! Thank you so much for this video.

[@webcifar]

Thank you ❤️

[@GodsMan500]

With the "after" element for the card overly, "overflow: hidden" doesn't work, no matter what I do. I had to instead put in a border radius of 10px, just like the .service-item border radius. I wish I could figure out why the "overflow: hidden" line doesn't work.

[@webcifar]

Give the overflow hidden in the parent element of the child.

[@GodsMan500]

@@webcifar Thank you!

[@dafiraone]

i learn so many things in 3 hours with this tutorial👏👏

[@theregeneratednation]

This is a master piece

[@webcifar]

Thanks a lot.

[@nicholascherry5962]

This is awesome. I have a great portfolio page ready to hit the market with. You're the man, I cannot thank you enough :)

[@rentashi]

Estava estudando as bases do desenvolvimento web com teorias massivas de html e javascript que por fim acabam se tornando pesadas e confundindo ainda mais o aprendizado, confesso que aprendo muito mais acompanhando projetos práticos assim como o seu, que por sinal tem um belo design. Parabéns!

[@siddhantsrivastava4353]

What is your lingo

[@soggarnguvo1208]

Thanks once again bro, you have inspired me a lot, i have downloaded the code from git hub, and i made few changes, due to your inspiration, i have managed to make the Phone Number, E-mail & the location clickable

[@zaedalnahhas3750]

Help please, when i type display: flex; in the container h1 become in the same line with the button. min 15:49 /i am alomost copying your code/

[@douglasfoshay3411]

Hey Zaed I had the same problem. I ended up inserting a line break in the html between the h1 and a tag. It seemed to work fine.

[@Arman-td3sw]

Hello. You can use css property called flex-direction and chose column ( flex-direction: column;). Use it in container. it will make the the portfolio link go after h1.

[@razanmagar4098]

i think you have forgotten to insert all h1 elements inside the div tag

[@zaedalnahhas3750]

@ADWARD PRASAIN thanks, that's worked

[@ADNANAHMED-eo5xx]

What a tutorial bhaii...❤...your channel is a gem 🌟

[@webcifar]

Thank you so much 😀

[@ADNANAHMED-eo5xx]

@@webcifar we should be the one thanking u, thanx again

[@shubhajitchakraborty9362]

What is CTA ? You wrote class="cta" on under a tag

[@webcifar]

Call to action

[@shubhajitchakraborty9362]

@@webcifar Thank You

[@guitarherozzz4009]

@@webcifar You are a genius. I just started learning HTML and CSS 5 days ago, this is SO FAR over my head but i'm following along and am almost finished! My website looks almost the same as the one you made! I could not do this by myself but you have helped me learn. Do you have any recommended courses I can take to become a professional?

[@icreator_websites]

I believe it is Call To Action feature

[@nasiavoulgareli3259]

@@guitarherozzz4009 This is more of an idea for a certification (aka to somewhat solidify that you know the basic how-to's) but I really liked freecodecamp's Responsive Web Development course (www.freecodecamp.com). But sorry, I don't know much more, I'm a newbie :P Hope it helps!

[@BusinessWolf1]

I completed this project :D Tomorrow I'm going to start remaking it by myself!!! Thank you !!

[@reynaldcruz1128]

Thanks for this, I'm just starting to learn again in web dev, I will add this to my to do list, great video

[@webcifar]

Fantastic!

[@soufianelouazzani5109]

did you whatch it?

[@gemenitv2023]

This video makes my day interesting! Good job brother! keep it up.. I subscribed!

[@crankybird]

Briljant! Just absorbed the theory, now i can see EVERYTHING in work, in what seems to be thee right way :)

[@webcifar]

Thanks 🙌

[@therawkei]

i'm so simple guys. when I saw an India English voice making tutorials, I liked :)

[@ktmalex]

fantastic tut so far! I'm a bit unsure about using multiple h1 tags. Is there a better option? Can we have an h1 with multiple divs nested inside?

[@putrawahyudi5307]

thats cool bro, i think im gonna be your subscriber right now

[@vasilijeveljic3506]

Is it possible to divide this in four pages?

[@webcifar]

yeah, why not. Feel free to customize it and make your own version. ♥

[@kasoamallam9336]

@@webcifar Regarding Vasilije question, How do you go about styling each page?

[@honeybee6646]

@@kasoamallam9336 you can style each navigation, the by linking each one with their css style sheet.

[@__jake.m]

I'm an hour and a half in and I am enjoying it so far. Thank you so much!

[@webcifar]

🔔subscribe and turn on the notification bell. 👉 Hire Us : webcifar.com 👉 Facebook group : facebook.com/groups/webcifar 👉 Instagram : instagram.com/cifarX/

[@mirage4731]

@@SurajPawarD can you share your code or put it on github. I'll take a look if i can help !

[@djbenjah]

@@mirage4731 its already there

[@saurabhdaswant7833]

i have suscribe to watch more videos like this thank you so much sir love yooooo

[@kitchenwithmateen1788]

bhai bura mat manna.... language hindi karle .....content ki quality 100% ho jayegi......

[@imranhaider1206]

Hi Sir How Are You? I Am Using VS Code Extension Live Server But It Is Not Showing Me The Images That I Have Added For My Website. So Could You Please Help In This Issue?

[@webworldzone962]

Nice video..you are doing great..since I also run education channel but also love to see other youtuber who are educating people worldwide. Keep the good work 👍

[@webcifar]

So nice of you

[@filip1571]

This is next level pro, i really loved it... Can we this as a template and create our own website? Will there be any publishing problems due to copyright or are we free to use it?

[@webcifar]

No problem, Feel free to customize it and if possible feel free to give us a small credit 🤘✌

[@KayeJayHimongala]

thank you sir arfan, for making this video, it is very helpful for my capstone/thesis projects, hope that you will make alot of video so that you will help us students who is having a hard time for our projects.

[@ghostanos3290]

I feel bad for laughing so hard when he say ''span'' and ''absolute'' can't stop it Hahaha love u bro, No hard feelings xd

[@hamzarazaq7815]

Kindly make videos on Elementor Css

[@webcifar]

Sure, we will make the video soon.

[@webcifar]

kzbin.info/www/bejne/a2a8iJWBat-baJY