HTML CSS Javascript E-commerce Website Tutorial for Beginners

Поделиться
HTML-код
  • Опубликовано: 2 июн 2024
  • Responsive Html Css Js ecommerce website project. Build and deploy.
    Get Hostinger Discount: hostinger.com/lamadev Coupon Code: LAMADEV
    Support the channel: / @lamadev
    Buy me a coffee: www.buymeacoffee.com/lamadev
    Source Code: github.com/safak/youtube/tree...
    Join Lama Dev groups
    Facebook: / lamadev
    Instagram: / lamawebdev
    Discord: / discord
    0:00 Introduction
    01:52 Creating a web project
    04:50 Html Css Navbar Design
    12:23 How to Create a Slider using HTML CSS and JS
    36:04 Features
    40:30 Product Section Design
    48:08 DOM Manipulation in Javascript
    01:00:55 How to Create a Modal using HTML CSS and JS
    01:15:35 Html Css Gallery Design
    01:21:13 Html Css Footer Design
    01:28:25 Html Css Responsive Design with Media Query
    01:42:15 How to Deploy Website to a Hosting
    01:44:30 Outro
  • НаукаНаука

Комментарии • 221

  • @prashantmishra5691
    @prashantmishra5691 2 года назад +7

    You are the best frontend channel on youtube. Thanks for explaining all concepts.

  • @capcodes
    @capcodes 2 года назад +1

    Llama Dev you the goat bro! You make any complex subject so simplified thanks for everything man 🙏🏾

  • @chrisr2063
    @chrisr2063 2 года назад

    Thanks to you I have now mastered VS Studio css style and element shortcuts and it is glorious. Thank you. Makes life so much easier in IDE's

  • @hirunidivyangani9915
    @hirunidivyangani9915 2 года назад +3

    Thank you so much lamadev for this amazing content. Love your tutorials

  • @markwaithaka821
    @markwaithaka821 2 года назад +16

    My best RUclips channel thanks for the great effort. You never dissapoint and always very beginner friendly.

  • @volonte01
    @volonte01 Год назад +1

    For me, this is the best video tutorial for beginners if you want to become a master in Website Designer. Thank you so much for your love 🥰😘

  • @claytonstrickland8336
    @claytonstrickland8336 2 года назад

    Another great lesson. The only thing that I did differently was to make the header sticky. I always pick up something on your videos. Thank you.

  • @gabrielcasari1237
    @gabrielcasari1237 2 года назад +16

    Thank you very much lama for this new tutorial, if you had time I would like you to do a similar project with reactjs, with their respective routes and cart.

  • @okorojohn7788
    @okorojohn7788 2 года назад

    Here Mr Lama goes again. Many thanks for helping humanity.

  • @osagioduwafaith
    @osagioduwafaith Год назад +19

    This video is amazing. First video I actually sat through to the end lol. I love the way you explained as you went. I loved the whole concept. I just forwarded the link to the video to a friend who is also in the leaning process. THANKS!

    • @p.cnunes7098
      @p.cnunes7098 3 месяца назад

      dont just watch, you gotta code along to learn

  • @xplore2000
    @xplore2000 2 года назад +1

    Here we go 😄😄 teacher Lama once again always real world 🌎 🌍 application.
    Thanks for releasing and hoping for another amazing content in the future

  • @AvnishKumar-hr3wu
    @AvnishKumar-hr3wu 2 года назад +2

    Hi Lama please make these types of videos so that I will improve my css and vanilla js skills and ofcourse it will help other people as well.
    Thank u so much

  • @akankhyapatnaik1638
    @akankhyapatnaik1638 2 года назад

    Thank you Lama for this tutorial
    Your explanations is excellent and very detailed . Keep post this kind for content. I'm very happy that I found your channel.

  • @user-fz3rv6wn3g
    @user-fz3rv6wn3g Год назад

    Dear Lama, you are fantastic! Youe explanation, sometimes much better than from bloggers from my country. I found your video and thought..., OK, i will try to repeat his code, but i was not sure..., that i can. Because of my English is not advanced. As a fact - your explanation and pronounciation can make you popular in me country too!!! Many thanks!!!

  • @damus6665
    @damus6665 2 года назад

    Man you are fantastic, keep up and never give up!!

  • @JuNe-rm6pk
    @JuNe-rm6pk 2 года назад

    Mr. Lama Dev, you are the Master of Master!

  • @o.g.bonyebuchi985
    @o.g.bonyebuchi985 Год назад

    Great job lama...you are simply the best

  • @thefuntech2810
    @thefuntech2810 2 года назад

    Same here best RUclips channel for web development 💓💓💓

  • @Kuena866
    @Kuena866 2 года назад

    Thanks again for another great content. I am looking forward to the backend design. Cheers

  • @kishorekannan4598
    @kishorekannan4598 2 года назад

    Lama bro ur one my favourite developer your videos were awesome keep up good work🙏 thank you

  • @michaeltesfay9939
    @michaeltesfay9939 2 года назад +2

    Thanks a lot for your supper nice projects.
    They all are really helpful for developers like me.

  • @kudrah
    @kudrah 3 месяца назад +1

    Actually, this seem simpler and easilly understood including JavaScript. I think I am a pro now

  • @digambernegi2023
    @digambernegi2023 2 года назад +1

    know that u r exceptional. always quality content. 🍵

  • @mdsolayman9558
    @mdsolayman9558 2 года назад

    You are one of the best teachers...

  • @cambabyfacecam
    @cambabyfacecam 2 года назад

    My boy lama dev going in yet again .. the goat

  • @ElonRust42069
    @ElonRust42069 2 года назад

    Thank you for this tutorial. It's great!

  • @brilliantatosam6882
    @brilliantatosam6882 2 года назад

    Excellent design. Safak is awesome

  • @Amar11115
    @Amar11115 Год назад

    Learned a lot!
    Thanks a bunch!

  • @topnotchdaagrade
    @topnotchdaagrade 2 года назад

    This is great one. Thanks for sharing Lama

  • @christocdas1146
    @christocdas1146 2 года назад

    Thank u so much....from Kerala, India.

  • @ibrahimsiradvancedresearch
    @ibrahimsiradvancedresearch 2 года назад +1

    Keep it up.
    We support you.

  • @sagararora3337
    @sagararora3337 8 месяцев назад +1

    high quality content
    keep it up!!

  • @suryaprakashpanda1994
    @suryaprakashpanda1994 2 года назад

    @Lama you are a coding super man dude... Thanxx

  • @holyjeezy1317
    @holyjeezy1317 2 года назад

    Great tutorial as always. A mern version of a sneaker e-commerce site would be even great

  • @hardcoretltl
    @hardcoretltl 11 месяцев назад

    Thank you very much for the video. Learned alot!

  • @jesse9996
    @jesse9996 2 года назад

    This is an OG website. Literally.

  • @gennady8263
    @gennady8263 2 года назад +5

    I like these good video lessons, thanks. But, can you show how to work with touch events in js or react? I've read the documentation, but I would like to see how to implement touch events in real applications.

  • @coder5336
    @coder5336 2 года назад +5

    I love your design. looks cool. And as you said i know React but im not good at vanilla lol. It will be helpful to watch this video. Thank you so much. Keep it up man.

  • @FC-rs7ro
    @FC-rs7ro 2 года назад

    I loved this video & especially the explanation that you did , greaaaaaaaaaat one 🤝👍👍👍👍

  • @CreativeDevLab
    @CreativeDevLab 4 месяца назад

    Thanks It was a great tutorial,a lot learn from you

  • @praveenkumar5353
    @praveenkumar5353 2 года назад

    the hidden gem on the internet 💥

  • @dr.science9609
    @dr.science9609 2 года назад

    Really nice and clean project bro

  • @vinnover9506
    @vinnover9506 Год назад +1

    Thanks Guy!
    Its was Amazing👍👍👏
    🍇

  • @JayNdungu
    @JayNdungu 2 года назад

    The best RUclips channel

  • @vontadedeaprender7492
    @vontadedeaprender7492 Год назад

    Great video! Brazil here.

  • @twentyfourseven853
    @twentyfourseven853 2 года назад

    You made my concepts clear

  • @mohammedbarwary3539
    @mohammedbarwary3539 2 года назад

    A treasure youtube channel

  • @SUNYBOI
    @SUNYBOI 2 года назад +24

    Sir I request you to please make some games using HTML, CSS, JS where there is abundant use of eventListeners, animations and other stuffs. I need it very much.

    • @luckyjain475
      @luckyjain475 Год назад

      Ania Kubow is doing that already

    • @BlitzVirtuoso
      @BlitzVirtuoso 11 месяцев назад

      ​@@luckyjain475where ?

    • @akashpandey1215
      @akashpandey1215 8 месяцев назад

      ​@@luckyjain475where

    • @luckyjain475
      @luckyjain475 8 месяцев назад

      @@BlitzVirtuoso search ania kubow u will find

  • @shumanhasan
    @shumanhasan 2 года назад

    This is great project! you could this easily. I really love your voice. When i listen your voice, it is easy to understand code. My big appeal to you that i want your faceCam video.

  • @TheTurbobarbitura
    @TheTurbobarbitura 2 года назад

    Lama, is vscode your main editor? Or do you use a different one for large projects?

  • @karthikm.1804
    @karthikm.1804 2 года назад +1

    great tutorial
    make more projects with vanilla javascript

  • @1992fili
    @1992fili 22 дня назад

    Great video!! Not sure if this is a silly question but where do you get the high quality images of the Nike trainers. I would like to create a website something similar

  • @omorfaruk6986
    @omorfaruk6986 2 года назад

    just awesome thanks bro

  • @Bokie0120
    @Bokie0120 Год назад

    it's amazing video,thanks.

  • @viniciusm.m.7822
    @viniciusm.m.7822 2 года назад

    wow!
    Thanks, dude!
    Deus abençoe você!!!

  • @harismunandar9652
    @harismunandar9652 Год назад

    You're the best teacher

  • @assignmentonbiologytopic9512
    @assignmentonbiologytopic9512 Год назад

    Really. Superbbbbbbb 👍

  • @user-eb6yb7ck6v
    @user-eb6yb7ck6v 2 года назад

    Thank for your work!!!!

  • @ramalahmadli7316
    @ramalahmadli7316 2 года назад

    Good work.
    Thanks.

  • @WinnerSingh
    @WinnerSingh 2 года назад

    So nice again, one request can you make add on in the pizza website project - when customer purchase a pizza -
    customer should pickup or delivery
    Select date Time
    Start time and end time of restaurant
    Off day for restaurant
    When customer make order at 4 pm and select delivery option, And time should show 30 min gaps,
    For pickup 5 mins gap If time is current
    All setting should be control by admin 🙏

  • @ozkanselcuk1735
    @ozkanselcuk1735 2 года назад

    Great video again =))

  • @osagioduwafaith
    @osagioduwafaith Год назад +2

    Hi.
    I was wondering where you got your speaker images from, or how you perfectly cut it out . I tried following up on this tutorial but the sneaker pictures I used all have their own backgrounds and they're squared shaped by default in terms of width and height. I even tried trimming with online editors, they all ended up with pointy corners.

    • @ZephyroScope
      @ZephyroScope 6 месяцев назад

      In css of those images add the - corner-radius: 20px(Or any other measure depending on size); attribute

  • @Soped
    @Soped 3 месяца назад

    if you added a cart so that you out items inside and then have a cart page along with a new checkout page after the cart one this video would be incredible!

  • @prasannanaik1023
    @prasannanaik1023 Год назад

    Great video 💯

  • @abujafarriju364
    @abujafarriju364 2 года назад

    thanks for your efforts

  • @haythemsaidi91
    @haythemsaidi91 2 года назад

    I like this design.

  • @abdelrahmanmostafa3595
    @abdelrahmanmostafa3595 Год назад

    Thank you lama ❤

  • @klesar84
    @klesar84 2 года назад

    GREAT, thanks a lot for this, and PLEASE make sth similar project with html css js and a little bit advanced stuff with javascript, thanks a lot again

  • @freeffire931
    @freeffire931 Год назад

    thank YOU Mr I Like it SO Much thank you

  • @lorenthasanllari246
    @lorenthasanllari246 2 года назад

    Great tutorial...

  • @sayidali431
    @sayidali431 2 года назад

    Thanks Lama i always watch your Tutorials and i like your method you do so can you please teach us Flutter and apps

  • @kamonahmedreal
    @kamonahmedreal 2 года назад

    Love from Bangladesh.

  • @studywithroman1997
    @studywithroman1997 10 месяцев назад

    mash allha excellent sir

  • @borathossain
    @borathossain 2 года назад

    Love from Bangladesh...

  • @yashsolanki1775
    @yashsolanki1775 Год назад

    Thanks for this 😇😇

  • @Jabbal-Tent-House
    @Jabbal-Tent-House Год назад +1

    Sir from where you have taken these images which is used in website
    Can you drop the link in description?

  • @haiangtran2036
    @haiangtran2036 10 месяцев назад

    Wonderful

  • @orlandomoutsa6005
    @orlandomoutsa6005 Год назад

    Yo, thanks a lot for this amazing tutorial!
    I have one question, where did u find all these transparent photos of the shoes?

  • @499120037
    @499120037 Год назад +1

    for the font description, it should be font-size not font-style btw, although it wouldn't result in any differences... just a head up to everyone

  • @loadedchanneltv9481
    @loadedchanneltv9481 2 года назад

    Perfect!

  • @sertachaloglu3348
    @sertachaloglu3348 Год назад

    Bu güzel örnek için çok teşekkürler :)

  • @ashb8552
    @ashb8552 Год назад

    finally completed
    thx

  • @oguzhankomcu2031
    @oguzhankomcu2031 Год назад

    çok güzel bir eğitim olmuş. :D

  • @amannyy2063
    @amannyy2063 2 года назад +1

    lama you are really amazing for all this works providing for us nd for free🤯 thank you so much alsoo hope u do a E-Library like the netflix one but instade of movies that uplaod pdf files Thanks a lot tho

  • @AashutoshBansal
    @AashutoshBansal 2 года назад +1

    Sir can u pls tell from where did u found out these images??
    I also want these types of images

  • @magnetarplayz8525
    @magnetarplayz8525 8 месяцев назад

    great video. it would be helpful if you provided the link for the images you used.

  • @DanishArshad3912
    @DanishArshad3912 Год назад

    love you bro form Pakistan

  • @fanegantosin2973
    @fanegantosin2973 2 года назад

    Weldon sir, another great work.
    Lama can you do something like School Management System that will contain students Portal, teachers Portal and where students can print result page
    Thanks

  • @kishorekannan4598
    @kishorekannan4598 2 года назад +1

    Lama bro can post any videos on developing Shopify apps if you can...it is so helpful for me r share any perfect resources to learn about it please..

  • @alifhasanshahOfficial
    @alifhasanshahOfficial 2 года назад

    Thank you so much ...

  • @omoghawoke6218
    @omoghawoke6218 6 дней назад

    Good video. Where did you get your photos from?

  • @isahbala2540
    @isahbala2540 Год назад +1

    please what song did yoy use for the intro of this video...i wanna listen to it while coding in the cool sunset

  • @mrfrontend1
    @mrfrontend1 Год назад

    Cool😍

  • @Nikosport07
    @Nikosport07 4 месяца назад

    may god bless you!

  • @regilearn2138
    @regilearn2138 2 года назад

    Hi please do more react with TYPESCRIPT beginner to advanced MERN projects. It would be really helpful.thank you

  • @zarifrahman1336
    @zarifrahman1336 2 года назад

    Awesome video.Will there be a backend

  • @alivelidurali
    @alivelidurali 2 года назад

    where have you been we've been waiting for you to upload videos for 3 weeks

  • @aniketfunde7188
    @aniketfunde7188 Год назад

    Nice 😊👍

  • @lclkn
    @lclkn 2 года назад

    eline sağlık hocam.

  • @aleksandarbogojevic2401
    @aleksandarbogojevic2401 Год назад

    Hello, first of all AMAZING VIDEO, and you are making amazing lessons, i have one question: why did you created
    currentProductColors.forEach((color, index) => {
    color.style.backgroundColor = choosenProduct.colors[index].code;
    });
    inside of menuItems function, or better to ask, why didn't you deleted it when it works perfectly just with
    currentProductColors function. Can you or anyone else explain me that. Thank you anyway!!