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

แชร์
ฝัง
  • เผยแพร่เมื่อ 13 ธ.ค. 2024

ความคิดเห็น • 1.3K

  • @charlieduke1627
    @charlieduke1627 2 ปีที่แล้ว +72

    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

  • @uttamsharma8414
    @uttamsharma8414 4 ปีที่แล้ว +32

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

  • @danielmpay6365
    @danielmpay6365 3 ปีที่แล้ว +3

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

  • @hbros6811
    @hbros6811 4 ปีที่แล้ว +46

    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

  • @ataraxia0420
    @ataraxia0420 4 ปีที่แล้ว +18

    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.

  • @nitingupta9782
    @nitingupta9782 4 ปีที่แล้ว +44

    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
      @webcifar  4 ปีที่แล้ว +2

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

    • @Mr_Brian
      @Mr_Brian 4 ปีที่แล้ว +1

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

  • @KingShortsYT
    @KingShortsYT 2 ปีที่แล้ว +11

    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
      @webcifar  2 ปีที่แล้ว +2

      Thank you ❤️

  • @ansabkhan9857
    @ansabkhan9857 3 ปีที่แล้ว +3

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

    • @webcifar
      @webcifar  3 ปีที่แล้ว +1

      So nice of you

  • @Foody-j4z
    @Foody-j4z 3 ปีที่แล้ว +112

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

  • @paulocesarchaves87
    @paulocesarchaves87 3 ปีที่แล้ว +34

    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
      @webcifar  3 ปีที่แล้ว +3

      Wow, thank you!

    • @starmirza
      @starmirza 2 ปีที่แล้ว +1

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

  • @Mr_Brian
    @Mr_Brian 4 ปีที่แล้ว +10

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

  • @xkdsgn9296
    @xkdsgn9296 2 ปีที่แล้ว +18

    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!

  • @ronitchaurasia5604
    @ronitchaurasia5604 4 ปีที่แล้ว +1

    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.

  • @fullmotivados9825
    @fullmotivados9825 3 ปีที่แล้ว +3

    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
      @webcifar  3 ปีที่แล้ว

      Glad it helped! Also checkout this modern portfolio project [th-cam.com/video/78l05_nuDIg/w-d-xo.html]

  • @wintermorillo6567
    @wintermorillo6567 2 ปีที่แล้ว +13

    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
      @webcifar  2 ปีที่แล้ว +1

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

  • @melania239
    @melania239 3 ปีที่แล้ว +9

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

    • @webcifar
      @webcifar  3 ปีที่แล้ว +1

      Glad it was helpful! Also checkout this modern portfolio project th-cam.com/video/78l05_nuDIg/w-d-xo.html

    • @melania239
      @melania239 3 ปีที่แล้ว +2

      @@webcifar of course I will :)

  • @cmdaltctr
    @cmdaltctr 3 ปีที่แล้ว

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

  • @mushishi3672
    @mushishi3672 3 ปีที่แล้ว +3

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

  • @alzca
    @alzca 4 ปีที่แล้ว +6

    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!

  • @manishjoshi2945
    @manishjoshi2945 3 ปีที่แล้ว +21

    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............................

  • @gujaratiincanada2464
    @gujaratiincanada2464 4 ปีที่แล้ว +6

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

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      Thanks for supporting us.❤

  • @starmirza
    @starmirza 2 ปีที่แล้ว +3

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

  • @guitarherozzz4009
    @guitarherozzz4009 4 ปีที่แล้ว +1

    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
      @adaezeikemefuna 4 ปีที่แล้ว

      Me too... Could we link

    • @guitarherozzz4009
      @guitarherozzz4009 4 ปีที่แล้ว

      @@adaezeikemefuna What's up?

    • @triplegmint2795
      @triplegmint2795 3 ปีที่แล้ว

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

  • @taloki8738
    @taloki8738 4 ปีที่แล้ว +5

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

  • @theena
    @theena 3 ปีที่แล้ว +7

    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.

  • @TrangLe-dp8jf
    @TrangLe-dp8jf 4 ปีที่แล้ว +21

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

    • @webcifar
      @webcifar  4 ปีที่แล้ว +5

      Thanks.Also checkout other videos 🤘

  • @soggarnguvo1208
    @soggarnguvo1208 2 ปีที่แล้ว +1

    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
      @webcifar  2 ปีที่แล้ว +1

      Best of luck 👍

  • @lizalizaveta1882
    @lizalizaveta1882 3 ปีที่แล้ว +4

    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;
    }

  • @muhammadahmadi7096
    @muhammadahmadi7096 4 ปีที่แล้ว +13

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

    • @webcifar
      @webcifar  4 ปีที่แล้ว +1

      I appreciate that

  • @simply8622
    @simply8622 4 ปีที่แล้ว +2

    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

  • @itsgenti8910
    @itsgenti8910 4 ปีที่แล้ว +6

    You deserve 1 million subs thank you for this

  • @dotboyclay
    @dotboyclay 3 ปีที่แล้ว +1

    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!

  • @jeremyjason601
    @jeremyjason601 3 ปีที่แล้ว +4

    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

  • @palamz7027
    @palamz7027 3 ปีที่แล้ว

    I've been coding for a round 2 months now and I've worked so hard every day that i now can html and css and a bit of js and xml.

  • @tn9753
    @tn9753 4 ปีที่แล้ว +4

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

  • @ambikasharma7478
    @ambikasharma7478 4 ปีที่แล้ว

    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

  • @ronaldrodriguez2497
    @ronaldrodriguez2497 4 ปีที่แล้ว +3

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

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      Wow, thanks!

  • @zackdo5194
    @zackdo5194 2 ปีที่แล้ว +1

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

  • @sam-u-el
    @sam-u-el 4 ปีที่แล้ว +7

    this is just a masterpiece

  • @md.aynulhaque5841
    @md.aynulhaque5841 2 ปีที่แล้ว

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

  • @CarpenterBrother
    @CarpenterBrother 3 ปีที่แล้ว +3

    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.

  • @adhikarishehzeen8711
    @adhikarishehzeen8711 4 ปีที่แล้ว +2

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

    • @webcifar
      @webcifar  4 ปีที่แล้ว +1

      Glad you liked it!

    • @adhikarishehzeen8711
      @adhikarishehzeen8711 4 ปีที่แล้ว

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

  •  4 ปีที่แล้ว +6

    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. 👏

  • @C4ssstiel
    @C4ssstiel 4 ปีที่แล้ว +1

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

  • @hilarryhenry
    @hilarryhenry 4 ปีที่แล้ว +4

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

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      All the best 👍♥

    • @ronyhaldar9753
      @ronyhaldar9753 4 ปีที่แล้ว

      Hilarry henry..where are you from?

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      @@ronyhaldar9753 Bangladesh

    • @hilarryhenry
      @hilarryhenry 4 ปีที่แล้ว

      @@ronyhaldar9753 Malaysia

  • @MzTeeL
    @MzTeeL 2 ปีที่แล้ว

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

  • @anievgenieva8267
    @anievgenieva8267 4 ปีที่แล้ว +4

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

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      Glad it was helpful!

  • @dcabanillas
    @dcabanillas 4 ปีที่แล้ว +2

    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!

  • @yanadomi3658
    @yanadomi3658 4 ปีที่แล้ว +3

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

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      Thank you so much!

  • @rootom2144
    @rootom2144 4 ปีที่แล้ว +4

    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
      @webcifar  4 ปีที่แล้ว

      Have fun! 🙌♥✌

  • @kailashraizelmaden4684
    @kailashraizelmaden4684 4 ปีที่แล้ว +5

    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!!

  • @sailakakap1032
    @sailakakap1032 3 ปีที่แล้ว +1

    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
      @webcifar  3 ปีที่แล้ว +1

      Great to hear!

  • @thecleverest2083
    @thecleverest2083 4 ปีที่แล้ว +28

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

    • @webcifar
      @webcifar  4 ปีที่แล้ว +5

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

    • @jordiecomm4423
      @jordiecomm4423 4 ปีที่แล้ว +1

      Hey how u doing now man ?

  • @hshxy
    @hshxy 4 ปีที่แล้ว +1

    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
      @webcifar  4 ปีที่แล้ว +1

      Great tip!

  • @renepecher1561
    @renepecher1561 4 ปีที่แล้ว +3

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

  • @shahikalfarukchowdhury4456
    @shahikalfarukchowdhury4456 4 ปีที่แล้ว +2

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

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      Welcome Brother ♥🙌🙏👍

  • @mounikachindam9202
    @mounikachindam9202 4 ปีที่แล้ว +4

    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-_
      @jay-_ 4 ปีที่แล้ว

      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.

  • @webdeveloper9730
    @webdeveloper9730 2 ปีที่แล้ว

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

  • @KUREKMotorsport
    @KUREKMotorsport 3 ปีที่แล้ว +3

    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
      @webcifar  3 ปีที่แล้ว

      Great to hear!

  • @falaq2556
    @falaq2556 3 ปีที่แล้ว

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

    • @webcifar
      @webcifar  3 ปีที่แล้ว

      Glad to hear that

  • @dilshodrizayev
    @dilshodrizayev 4 ปีที่แล้ว +15

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

    • @webcifar
      @webcifar  4 ปีที่แล้ว +1

      😂😂 thanks.

  • @nagrajkaranth1055
    @nagrajkaranth1055 2 ปีที่แล้ว

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

  • @NerdgazmCS
    @NerdgazmCS 4 ปีที่แล้ว +101

    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
      @norbert8916 4 ปีที่แล้ว +26

      bro same.. but dont give up rise and grind

    • @NerdgazmCS
      @NerdgazmCS 4 ปีที่แล้ว +43

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

    • @norbert8916
      @norbert8916 4 ปีที่แล้ว +1

      @@NerdgazmCS 💪

    • @mgabriel650
      @mgabriel650 4 ปีที่แล้ว +11

      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
      @sheilahmumbo 4 ปีที่แล้ว

      I know.

  • @eltonhana8179
    @eltonhana8179 4 ปีที่แล้ว +2

    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
      @webcifar  4 ปีที่แล้ว

      Thanks.Also checkout other videos 🤘

  • @nicholascherry5962
    @nicholascherry5962 2 ปีที่แล้ว +5

    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
      @webcifar  2 ปีที่แล้ว +1

      Fantastic!

  • @7traim
    @7traim 2 ปีที่แล้ว

    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!!

  • @sulta581
    @sulta581 3 ปีที่แล้ว +3

    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
      @webcifar  3 ปีที่แล้ว

      Thank you, I will

  • @im_september
    @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

  • @theregeneratednation
    @theregeneratednation 4 ปีที่แล้ว +5

    This is a master piece

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      Thanks a lot.

  • @nicholascherry5962
    @nicholascherry5962 3 ปีที่แล้ว +1

    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
    @rentashi 4 ปีที่แล้ว +4

    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!

  • @Daniel-pp8tm
    @Daniel-pp8tm 4 ปีที่แล้ว +1

    Thanks a lot for the tut dude ! Your channel is GOLD!

    • @webcifar
      @webcifar  4 ปีที่แล้ว +1

      Glad you enjoy it!

  • @reynaldcruz1128
    @reynaldcruz1128 4 ปีที่แล้ว +4

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

  • @mithunyadav8495
    @mithunyadav8495 2 ปีที่แล้ว

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

  • @baoqtran
    @baoqtran 4 ปีที่แล้ว +6

    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
      @sydurrahaman8444 4 ปีที่แล้ว

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

    • @miakomlenac6451
      @miakomlenac6451 3 ปีที่แล้ว

      Did you find a solution?

    • @luciadifede4016
      @luciadifede4016 2 ปีที่แล้ว

      How can we solve this problem?

  • @symphony22
    @symphony22 3 ปีที่แล้ว +1

    Thanks for the tutorial man! really great and helpful, loved it

  • @webcifar
    @webcifar  4 ปีที่แล้ว +58

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

    • @mirage4731
      @mirage4731 3 ปีที่แล้ว +3

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

    • @djbenjah
      @djbenjah 3 ปีที่แล้ว +2

      @@mirage4731 its already there

    • @saurabhdaswant7833
      @saurabhdaswant7833 3 ปีที่แล้ว +2

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

    • @kitchenwithmateen1788
      @kitchenwithmateen1788 3 ปีที่แล้ว +1

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

    • @imranhaider1206
      @imranhaider1206 3 ปีที่แล้ว

      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?

  • @icreator_websites
    @icreator_websites 4 ปีที่แล้ว +1

    Great work! thank you! I will do a similar project next week using your video! Keep up the good work!

  • @crankybird
    @crankybird 4 ปีที่แล้ว +2

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

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      Thanks 🙌

  • @therawkei
    @therawkei 3 ปีที่แล้ว

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

  • @ktmalex
    @ktmalex 3 ปีที่แล้ว +3

    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?

  • @MegaLqlq
    @MegaLqlq 4 ปีที่แล้ว

    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.

  • @GodsMan500
    @GodsMan500 4 ปีที่แล้ว +4

    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
      @webcifar  4 ปีที่แล้ว +1

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

    • @GodsMan500
      @GodsMan500 4 ปีที่แล้ว

      @@webcifar Thank you!

  • @stefanandrian7446
    @stefanandrian7446 3 ปีที่แล้ว

    This man just saved my project thanks dude you re amazing

  • @zaedalnahhas3750
    @zaedalnahhas3750 4 ปีที่แล้ว +4

    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
      @douglasfoshay3411 4 ปีที่แล้ว +1

      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
      @Arman-td3sw 4 ปีที่แล้ว

      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
      @razanmagar4098 4 ปีที่แล้ว

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

    • @zaedalnahhas3750
      @zaedalnahhas3750 4 ปีที่แล้ว

      @ADWARD PRASAIN thanks, that's worked

  • @__jake.m
    @__jake.m 2 ปีที่แล้ว

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

  • @preetikumari3389
    @preetikumari3389 3 ปีที่แล้ว +3

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

    • @webcifar
      @webcifar  3 ปีที่แล้ว

      Check the source code link.

  • @GunterXHunter
    @GunterXHunter 4 ปีที่แล้ว +1

    Thank you for this. Ive been shadowing this as a personal tutorial🙏 Amazing work!

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      You're so welcome!

  • @filip1571
    @filip1571 4 ปีที่แล้ว +3

    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
      @webcifar  4 ปีที่แล้ว +4

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

  • @MDABID-bv4io
    @MDABID-bv4io 4 ปีที่แล้ว +1

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

    • @webcifar
      @webcifar  4 ปีที่แล้ว +1

      Thank You Brother ♥

  • @vasilijeveljic3506
    @vasilijeveljic3506 4 ปีที่แล้ว +9

    Is it possible to divide this in four pages?

    • @webcifar
      @webcifar  4 ปีที่แล้ว +5

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

    • @kasoamallam9336
      @kasoamallam9336 4 ปีที่แล้ว

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

    • @honeybee6646
      @honeybee6646 4 ปีที่แล้ว

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

  • @saadimohammed2375
    @saadimohammed2375 4 ปีที่แล้ว

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

  • @shubhajitchakraborty9362
    @shubhajitchakraborty9362 4 ปีที่แล้ว +12

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

    • @webcifar
      @webcifar  4 ปีที่แล้ว +5

      Call to action

    • @shubhajitchakraborty9362
      @shubhajitchakraborty9362 4 ปีที่แล้ว +1

      @@webcifar Thank You

    • @guitarherozzz4009
      @guitarherozzz4009 4 ปีที่แล้ว +5

      @@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
      @icreator_websites 4 ปีที่แล้ว

      I believe it is Call To Action feature

    • @nasiavoulgareli3259
      @nasiavoulgareli3259 3 ปีที่แล้ว

      @@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!

  • @hardikkapadia6485
    @hardikkapadia6485 3 ปีที่แล้ว +1

    Great Tutorial! Really helped refresh my CSS concepts a lot!

  • @ghostanos3290
    @ghostanos3290 3 ปีที่แล้ว +5

    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

  • @parthiveshill2695
    @parthiveshill2695 3 ปีที่แล้ว +2

    brother joss i know that you from Bangladesh. Love you brother

    • @webcifar
      @webcifar  3 ปีที่แล้ว

      Thank you

    • @parthiveshill2695
      @parthiveshill2695 3 ปีที่แล้ว

      1 year ager video tarpor o apni response koren ata sob chaite boro kotha (vai Love from Chattogram 😍😍(Rangunia))

  • @hamzarazaq7815
    @hamzarazaq7815 4 ปีที่แล้ว +3

    Kindly make videos on Elementor Css

    • @webcifar
      @webcifar  4 ปีที่แล้ว +1

      Sure, we will make the video soon.

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      th-cam.com/video/55YWbK5zh24/w-d-xo.html

  • @dafiraone
    @dafiraone 2 ปีที่แล้ว

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

  • @unchart_d
    @unchart_d 4 ปีที่แล้ว +4

    Can we continue with this type of series, please.

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      Sure, we will. Check the description. We already have some project-based awesome videos.

  • @althameemali1730
    @althameemali1730 4 ปีที่แล้ว

    Oh My God! This guy's a treasure, watched the video without taking major breaks! though I'm a beginner to HTML and CSS, this was really helpful. Thanks Buddy!

    • @webcifar
      @webcifar  4 ปีที่แล้ว

      Glad you enjoyed it!