Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
9
Comments
11
Tomazi
@tomazi15

All comments

  • Beibei•290
    @Diviner-Beibei
    Submitted almost 2 years ago

    Reponsive Interactive pricing component using Vite+React+Tailwind

    #react#vite#tailwind-css
    1
    Tomazi•300
    @tomazi15
    Posted almost 2 years ago

    dont think you can import svg's using css in React, you can import svg as a component: there are some examplese here good read:

    https://www.freecodecamp.org/news/how-to-import-svgs-in-react-and-vite/

    Marked as helpful
  • Corbinhol•180
    @Corbinhol
    Submitted about 2 years ago

    Multi Step Form

    #vite#accessibility
    1
    Tomazi•300
    @tomazi15
    Posted about 2 years ago

    @Corbinhol

    Really good functionality and design, I would break it up into components it would be easier to maintain and manage.

    A very good practice is to always add form validation because at the moment the user can enter anything, ie invalid email, name or pone number, You could start with something very simple that html gives you out of the box in you email input can be set to type="email" or phone number to type="number" this would make sure that the user is forced to enter valid email and for phone user has to enter numbers only, also the form can be submitted without entering any data

    Just few things to consider but overall well done and keep it up

  • Abdulhamid Adeniji•160
    @Alpha437
    Submitted about 2 years ago

    Responsive Hubble landing page using CSS Flexbox

    #accessibility
    1
    Tomazi•300
    @tomazi15
    Posted about 2 years ago

    Hi @Alpha437

    Congrats on completing your challenge it looks really good, there might be some heights and widths but without figma guidelines its hard to get it 100% but considering think your solutions looks great.

    In terms of responsiveness as a good practice use mobile-first design methodology.

  • Taiwo-art•10
    @Taiwo-art
    Submitted about 2 years ago

    Responsive QR code component using CSS Grid and media query

    2
    Tomazi•300
    @tomazi15
    Posted about 2 years ago

    Hi @Taiwo-art

    Sometimes i also find that some colours provided for the challenges do not really match the prototype.

    When that happens i usually find the solution for the challenge i am working on and use chrome colour picker extension to get the correct colours.

    Marked as helpful
  • Kamil Wiater•230
    @WiaterKa
    Submitted about 2 years ago

    Art Galery Website

    1
    Tomazi•300
    @tomazi15
    Posted about 2 years ago

    Hi @Kamil Wiater

    Firstly i think you have done great job in terms of the design and responsiveness.

    One thing i would change immediately is the directory naming convention ie: secondary page when you have a folder with a space in it i can cause you a lot of headache if you were trying to ship your code into production, when you bundle your code it could break. to avoid it just try sticking to not using space ie: secondaryPage.

    Next thing i would do i would strip the html page from its sections and turn them into stand alone components.

    also i would create src directory when i would keep all the implementation files to keep them away from all the config files like package.json

    suggested file structure:

    ./src/ components/ pages/ images/

    Also for each component, you would create a sub directory where you would keep all the component specific file ie: component.js componet.scss component.test

    Keep the up the good work 👌

    Marked as helpful
  • Divyanshu Sharma•10
    @divyanshu29
    Submitted about 2 years ago

    QR-code-component

    1
    Tomazi•300
    @tomazi15
    Posted about 2 years ago

    Hi @Divyanshu Sharma

    When you want to host your static project on github it has to have index.html this is the standerd naming convention otherwise github will not display. change Learn.html to index.html

  • Kure-ru•120
    @Kure-ru
    Submitted about 2 years ago

    Results summary component 【 React & TypeScript 】

    #react#typescript#vite
    2
    Tomazi•300
    @tomazi15
    Posted about 2 years ago

    Hi @Kure-ru

    The problem you are having is is z-index: -1 I think what this does it puts your summary section behind everything thing even including the body and even dough it is visible on the page because its is not covered by any other element. In short the the whole summary section sits behind and the whole section is not clickable including your button hence why you cannot see the hover effect.

    Even if you inspect the element you will see you cant pick any elements on your summary sections but you can on your result section.

    To fix this

    add z-index: 10 to your summary class and z-index: 20 to your results class. This way you will not be sending anything behind the page body but you will simply put result on top of summary.

    If you still struggling i can make a PR to your repo :)

    Hope this helps keep coding 👌

    Marked as helpful
  • Morgana Kuhnen•30
    @morganakuhnen
    Submitted about 2 years ago

    Order Summary

    2
    Tomazi•300
    @tomazi15
    Posted about 2 years ago

    Hi

    Really good effort keep it up 👌

    On suggestion on your looks like Annual Price £59.99 /year is in one line but the price should be in the next line, had a look at your html DOM and this should fix it:

    on your class="price" add display:flex and flex-direction: column; you can add multi-nested divs and at any level you flex.

    Hope this Helps

    Marked as helpful
  • Kehinde•680
    @jonathan401
    Submitted about 2 years ago

    Fylo Dark theme

    1
    Tomazi•300
    @tomazi15
    Posted about 2 years ago

    Hi

    I Think you have done a really good job, the design does what it suppose to do in terms of the responsiveness. Main issues you are having is with widths, hights, margins and paddings its hard enough the get the right without figma designs so over all good effort. One small thing i could say when it comes to z-index use it in tens as in 10, 20 etc

    Keep it up 👌

    Marked as helpful
  • DKKs•110
    @mjkodkks
    Submitted about 2 years ago

    tailwindcss cdn, fetch and github page

    #tailwind-css
    1
    Tomazi•300
    @tomazi15
    Posted about 2 years ago

    HI

    Well done for completing this challenged visually it is really good! and i love tailwind css my self it allows to produce a simple to advanced design very quickly! css it self can be annoying especially when you have to manage multiple break points and write a @media query for them.

    Small if you have adde tailwind.config in your html you can remove tailwind.config from the root. Also its a good practice to keep your js in separate file as well as root css rules ie: body or html.

    I would also recommend looking into semantic html.

    Keep it going 👌

    Marked as helpful
  • Trottie McQueen•80
    @trottiemcqueen
    Submitted about 2 years ago

    3-column-preview-card-component

    1
    Tomazi•300
    @tomazi15
    Posted about 2 years ago

    Hi

    All i can say is keep going and dont stop :)

    Your are missing few key things here:

    Mobile view Icons (check your path) Buttons The columns are overlapping when changing your screen size i think this is because you have declared grid-template-columns in % try something like pixels or rem which are fixed widths.

    Also try finding out how you can use custom google fonts for future challenges

    Marked as helpful
Frontend Mentor logo

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

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