Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
41
Comments
25

NovikovIlya

@NovikovIlyaKazan, Russia910 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Bookmark landing page


    NovikovIlya•910
    Submitted about 1 year ago

    1 comment
  • carousel


    NovikovIlya•910
    Submitted about 1 year ago

    1 comment
  • cssLanding


    NovikovIlya•910
    Submitted about 1 year ago

    1 comment
  • css-challenge


    NovikovIlya•910
    Submitted about 1 year ago

    1 comment
  • intro-component-with-signup-form

    #react

    NovikovIlya•910
    Submitted about 1 year ago

    0 comments
  • notifications-page

    #react

    NovikovIlya•910
    Submitted about 1 year ago

    0 comments
View more solutions

Latest comments

  • Manoj Ramashish Gupta•170
    @Manojgupta103
    Submitted about 1 year ago

    Bookmark landing page

    1
    NovikovIlya•910
    @NovikovIlya
    Posted about 1 year ago

    cool work!

  • CarvalhoVincent•500
    @CarvalhoVincent
    Submitted about 3 years ago

    Room Homepage

    1
    NovikovIlya•910
    @NovikovIlya
    Posted about 1 year ago

    cool work!

  • Gerges Ghaly•150
    @GergesGhaly
    Submitted about 2 years ago

    loopstudios-landing-page with Grid & Flex

    1
    NovikovIlya•910
    @NovikovIlya
    Posted about 1 year ago

    cool work!

  • iamporrrrrrrrr•190
    @iamporrrrrrrrr
    Submitted about 1 year ago

    NFT Preview Card

    1
    NovikovIlya•910
    @NovikovIlya
    Posted about 1 year ago

    cool work!

  • Bruck Demissie•40
    @Bruck-3
    Submitted over 1 year 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

    • Website - Bruck Demssie
    • Frontend Mentor -@Bruck-3

    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

    #tailwind-css#vite#vue#vuex
    1
    NovikovIlya•910
    @NovikovIlya
    Posted about 1 year ago

    cool work!

  • Muhammad Desai•640
    @momorocks111
    Submitted about 1 year 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
    @NovikovIlya
    Posted about 1 year ago

    cool work!

View more comments

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub