Skip to content
OverviewSolutions
41
Comments
25
NovikovIlya
@NovikovIlya

All comments

  • NovikovIlya•910
    @NovikovIlyaPosted 5 months ago

    cool work!

    0
  • CarvalhoVincent•500
    @CarvalhoVincentSubmitted over 2 years ago

    I had some difficulties with the photos part to organize my grid and make everything responsive. There are a few things that are not perfect at all. If anyone wants to give me some advice or feedback they are welcome !

    Room Homepage

    1
    NovikovIlya•910
    @NovikovIlyaPosted 5 months ago

    cool work!

    0
  • NovikovIlya•910
    @NovikovIlyaPosted 5 months ago

    cool work!

    0
  • NovikovIlya•910
    @NovikovIlyaPosted 5 months ago

    cool work!

    0
  • Bruck Demissie•40
    @Bruck-3Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    E-commerce Product Page

    This project is a solution to the E-commerce product page challenge on Frontend Mentor. It is built using Vue 3, Tailwind CSS, Vuex store, and Vite.

    Overview

    The Challenge

    The challenge required implementing an E-commerce product page with specific features:

    • View optimal layout based on device screen size
    • Hover states for interactive elements
    • Lightbox gallery for large product images
    • Switching large product images by clicking on small thumbnails
    • Adding items to the cart
    • Viewing and removing items from the cart
    Built With
    • Vue 3
    • Tailwind CSS
    • Vuex store
    • Vite

    How to Run

    To run the project:

    1. Clone the repository.
    2. Install dependencies with npm install.
    3. Start the development server with npm run dev.
    4. Open your browser and navigate to http://localhost:5173/.

    Continued Development

    In the future, I aim to explore more advanced features and optimize performance.

    Links
    • Solution URL: Link
    • Live Site URL: Link

    Author

    Acknowledgments

    I'd like to thank Frontend Mentor for providing this challenge, which helped me enhance my skills. Additionally, I'm grateful for the support and resources provided by the Vue.js and Tailwind CSS communities.

    What challenges did you encounter, and how did you overcome them?

    Challenges Faced

    Dynamic Image URL Generation

    One of the challenges encountered was building an image carousel that accepts dynamic URLs. The requirement was to dynamically generate image URLs based on the index to ensure proper sourcing of images, especially when the project is hosted.

    Solution

    To overcome this challenge, a method getImageUrl(index) was implemented. This method constructs the URL for each image based on the index provided. The import.meta.url property was utilized to ensure correct resolution of relative paths, especially in a dynamic environment.

    getImageUrl(index) {
  return new URL(`../assets/shoes/image-product-${index}.jpg`, import.meta.url).href;
}

    E-commerce Product page

    1
    NovikovIlya•910
    @NovikovIlyaPosted 6 months ago

    cool work!

    0
  • Muhammad Desai•640
    @momorocks111Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    The part I was most proud of was the overlay. When the user clicks on the menu, it activates the overlay, where if the user clicks on it, it will close the menu. This added extra interactivity to the mobile and tablet views.

    What challenges did you encounter, and how did you overcome them?

    The hardest part was the making this responsive. There was a huge change from the mobile screen and the desktop screen. Getting the right margins and spacing was absolutely brutal! Seems like making webpages responsive is my kryptonite :,(

    What specific areas of your project would you like help with?

    When it comes to creating the html, it's easy if it's only for one screen, but having to take into consideration responsive, what's the best way to write the html taking into account most of the screens, the desktops, the tablets, and the mobile devices.

    Responsive News Article Webpage

    1
    NovikovIlya•910
    @NovikovIlyaPosted 6 months ago

    cool work!

    1
  • NovikovIlya•910
    @NovikovIlyaPosted 6 months ago

    cool work!

    1
  • NovikovIlya•910
    @NovikovIlyaPosted 6 months ago

    cool work!)

    0
  • Jens•610
    @JenskiiiSubmitted about 1 year ago

    wanted to practice some react concepts that I learned in a react course

    had some trouble with switching the background color when the item was selected so I just used :focus() with CSS

    Interactive component / with React

    1
    NovikovIlya•910
    @NovikovIlyaPosted 6 months ago

    cool work!

    0
  • NovikovIlya•910
    @NovikovIlyaPosted 7 months ago

    Hello!

    Cool job! I can suggest the following improvement - so that each time you click on the button, there is no selection from cache you can add the following code, which will remove the forced retrieval of data from the cache, add this in index.js :

    fetch('https://api.adviceslip.com/advice', {
        cache: 'no-store'
 });
    0
  • NovikovIlya•910
    @NovikovIlyaPosted 8 months ago

    nice work!)

    0
  • NovikovIlya•910
    @NovikovIlyaPosted 8 months ago

    nice work!)

    0