E-Commerce Card | CSS Only Project for Beginners | Glass Effect

แชร์
ฝัง
  • เผยแพร่เมื่อ 15 ก.ย. 2024
  • Figma Design: www.figma.com/...
    Source Code: github.com/pro...
    In this tutorial, we're going to create a stunning CSS-only E-Commerce Card designed specifically for purchasing a JavaScript course.
    In this step-by-step tutorial, I'll guide you through the process of building an impressive E-Commerce Card using only CSS. No JavaScript is required! This project is perfect for beginners and those looking to expand their CSS knowledge.
    Throughout the video, I'll show you how to structure the card layout, apply captivating styles, and create interactive elements using pure CSS techniques. You'll discover how to leverage CSS properties, and selectors to make the card visually appealing and user-friendly.
    By the end of this tutorial, you'll have a fully functional CSS-only E-Commerce Card ready for users to purchase the JavaScript course. You'll gain valuable insights into CSS styling, layout design, and hover effect that will elevate your web development projects.
    Whether you're a beginner or an experienced developer, this tutorial will help you sharpen your CSS skills and create impressive designs. I can't wait to see what amazing CSS-only projects you'll create, starting with this E-Commerce Card for the JavaScript course. Let's dive in and unleash the potential of CSS!
    Have any doubts? Join this Telegram group and ask your question. You can also share the projects that you make in this group.
    Telegram Group : t.me/procodrr
    Sunday QnA Link: meet.google.co...
    Social Media
    🌐 Telegram: t.me/procodrr
    🌐 Linkedin: / anurag-singh-web-devel...
    🌐 Instagram: / procodrr
    🌐 Twitter: / anuragsinghbam
    🌐 Portfolio: anuragsinghbam...
    Music by geoffharvey from Pixabay
    #cssproject #procodrr #webdevelopment

ความคิดเห็น • 33

  • @UdayKantSingh-sk7tu
    @UdayKantSingh-sk7tu 5 หลายเดือนก่อน +3

    Great Sir....I actually like your video you really know where the beginner stuck. ThankYou so much for this video.

  • @awaisdev7
    @awaisdev7 5 หลายเดือนก่อน +1

    outstanding explanations aik dum sb clear bht khooob

  • @6.squash.936
    @6.squash.936 ปีที่แล้ว +2

    Make this series in a project based learning approach
    People like such videos where there are less prerequisites 😊
    I believe people who at least know the basics should be able to follow this series
    Rather than being an expert
    Like for example you are using flexbox then you can give them a brief overview and tell them you have already taught flexbox in the channel (provide them link) so that way they can see your other videos as well
    This is my suggestion Anurag
    Keep Growing 🤞

    • @procodrr
      @procodrr  ปีที่แล้ว

      Thank you for your suggestion bro.
      I'll definitely mention my videos in future videos and provide their link.
      Keep Learning and Sharing 😊

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

    Nice Video Sir👌👌 Starting This series of project.

    • @procodrr
      @procodrr  ปีที่แล้ว

      Awesome 👍

  • @codinglife91
    @codinglife91 4 หลายเดือนก่อน +1

    anurag bhai aapne figma bhi sath me use krna sikha diya thanks

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

    so finally project series is started so happy Anuragh singh you are awesome
    thank you

    • @procodrr
      @procodrr  ปีที่แล้ว

      Awesome, keep learning and sharing 😊

  • @anishkatyagi-r5n
    @anishkatyagi-r5n 2 หลายเดือนก่อน

    Bhaiya apne jaise figma me vo toogle button ko on kara aur fir circles ka height vgerah sb choose kr liya to vo apne purchase kiya hai kya use krne ke liye kyuki m usko on kr rhi hu to ho nhi rha,figma ap ne use krna to bta diya but usme kuch purchase bhi karna hai vo nhi btaya !

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

    Iam following your approach so please make more projects and fastly

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

    Anuraag bhaiya Love from Pakistan

  • @r4ncreation686
    @r4ncreation686 5 หลายเดือนก่อน +1

    Thank you Sir :)

  • @huzaifaahmed8623
    @huzaifaahmed8623 4 หลายเดือนก่อน

    ma ne bhai circle ko card ka naeecha karna ka liya z-index ka use kiya hai woh bhi sahi hai na?

  • @princepawar5655
    @princepawar5655 4 หลายเดือนก่อน

    bhaiya figma ka dev mode ab kya paid h .. inspect element ni hora figma m.

    • @procodrr
      @procodrr  4 หลายเดือนก่อน

      Haa, ab wo paid ho gaya hai

  • @Yohanryan
    @Yohanryan 6 หลายเดือนก่อน

    Thanks a lot brother'!

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

    sir one request plz accepted
    jo ap figma me design bnate han uski bhi videos record kr k upload kr diya kren to hamey project samajhne aur bnany me asani hogi plz sir

    • @procodrr
      @procodrr  ปีที่แล้ว

      Figma main khud nahi banata hoon, wo main designer se banwata hoon.

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

      @@procodrr ok

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

    sir isko mui se banana asan hoga n

    • @procodrr
      @procodrr  ปีที่แล้ว

      Kar sakte ho, lekin pahle simple CSS se try Karo.

  • @6.squash.936
    @6.squash.936 ปีที่แล้ว +1

    Letsss go

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

      👍🦸

  • @masterjiraya623
    @masterjiraya623 6 หลายเดือนก่อน +1

    sir developer mode toh paid haina??

    • @procodrr
      @procodrr  6 หลายเดือนก่อน

      Nahi

    • @bk_yadav_00
      @bk_yadav_00 5 หลายเดือนก่อน

      Ji haa developer mode paide hai uspe click karne pe join paid team aa raha hai ​@@procodrr

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

    Hii bhaiya how are you 😊❤❤❤

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

      I'm good, how are you?

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

    thanku sir but i'm not comfortable with source code

    • @procodrr
      @procodrr  ปีที่แล้ว

      Did you watch my CSS series?