Skip to content
Submitted 3 months ago

Base appareal page using Vite+React

Quang•350
@progressive-newbie263
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Base Apparel coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

This is the first time i ran and deploy a website live with vite and react so i was struggle with it for quite a while. And this is also my first time trying out react so i hope i didn't do it too messy. Overall, although it is still mediocre, i am pretty happy that i can finish the project.

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

the js and css was mercier to me than the previous challenges. But the main issues i had was deploying it live. Fixing the image paths, etc... The SVG image was the most challenging part, after a few hours, i decided to linked the image directly to svg file path, instead of wrapping it inside img src as usual

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

i would love to be shown another way of handling SVG image.

Community feedback

  • AriyanSep0_0•330
    @ARiYaNSEp0-0Posted 3 months ago

    well there are multiple ways for handling svg in react. first and most straightforward way is to import them, import the asset and then use it in src attribute for example :

    import icon from 'path_to_svg/*.svg'
...
...
<img src={icon} ..../>

    or you can wrap the svg code in a component and use it that component there is another way i recently used and it is "svgr" plugin it's a plugin which makes your svg to components easily and automatically try it if you want

    Marked as helpful
    1
    Quang•350
    @progressive-newbie263Posted 3 months ago

    @ARiYaNSEp0-0 thanks chief, i will try it

    1
  • Teodor Jenkler•3,820
    @TedJenklerPosted 3 months ago

    Hi @progressive-newbie263,

    SVG Best Practices: The best way to use SVGs is by embedding them directly with the <svg> tag. This allows you to manipulate the SVG with CSS or JavaScript, such as filling the SVG on hover to create beautiful hover animations.

    Footer Positioning: I noticed your footer is positioned at the top by accident. Consider using position: absolute; bottom: 0; to keep it anchored at the bottom of the page.

    Extra Challenge: Try adding an animation to the form input error message. You can achieve this using the transition property for a smooth and engaging user experience.

    Keep up the great work!

    Best, Teodor

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord