Skip to content
OverviewSolutions
5
Comments
8
cyber-m
@cyber-m

All comments

  • Keben21•30
    @Keben21Submitted 25 days ago
    What are you most proud of, and what would you do differently next time?

    I need a comment on this please

    Recipe Page Solution

    1
    cyber-m•140
    @cyber-mPosted 25 days ago

    Hi It looks like you are off to a great start @Keben21, I noticed that you have horizontal scroll bar and those are usually better to be avoided. A simple solution in your case would be to remove width: 100vw; from the body selector in your CSS file. I also noticed you got the wrong font, you can check which font is actually rendering using chrome>dev tools> computed tab>font. also you have an empty header element, you probably should remove it. keep up the good work!

    0
  • Christopher Castaneda•90
    @chrisdcastSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    Accessibility - I wanted to focus on making my form as accessible as possible and learned a lot in the process. I learned the importance of using inputs, buttons, and other vanilla html form elements as much as possible to utilize the browsers default accessibility functionality. If I have time in the future I'd like to go back in and update the font sizes in my CSS to some values calculated in :root based off of the user's REM font settings.

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

    React Hook Form - using default html form elements in react is a little tricky sometimes. Learning to use the react-hook-form package was a little bit of a learning curve, but once you get the hang of it it can run smoothly. It's just a shame that you have to download a package to work around React's design philosophy of controlled inputs in order to use a browsers default functionality for elements like radio buttons and tab order. It made me appreciate Svelte's design approach a bit more.

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

    Accessibility - I'd love to be an expert in developing accessible websites and web apps. So any pointers would be greatly appreciated.

    React - Any tips on developing for React would also be appreciated. There's always more to learn there and I'm fairly new to it.

    Responsive sign up form built with Typescript & React

    1
    cyber-m•140
    @cyber-mPosted 25 days ago

    Hi Christopher, Great job! In terms of accessibility, I'm not an expert but I'm pretty sure your contrast ratio on your step number text is pretty low. You can check color contrast ratio using tool like Stark as a designer I more familiar with the Figma plugin but I know they also have chrome extension to check websites.

    0
  • cyber-m•140
    @cyber-mPosted 25 days ago

    Hey @fernandogadebarros, Great job! I really like how structured your project and how data is separated from functionality. I notice couple small things that you can fix real quick: The text of the last step button should be "Confirm" instead of "Next" I think the hover state of the text field should be with a purple border One way that was really helpful for me in order to match better the design is to put the design images in Figma, measurements are much easier that way.

    Marked as helpful
    0
  • Varun Verma•40
    @varunvermadevSubmitted 27 days ago
    What are you most proud of, and what would you do differently next time?

    helps in solving many blocked and clogged concepts in my mind learn various css classes upon completion happy to use the react very first time

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

    my biggest challange was how to navigate the through the form and how to make sure all the units of price changes upon changing to the yearly

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

    optimizations

    single page application using the react starter

    1
    cyber-m•140
    @cyber-mPosted 25 days ago

    Hi Varun, Good job overall! I would try to match better the design, you can put the design images in Figma so you'll be able to measure in a easy way. If you want to resize text according to screen size a good way to to so is using CSS clamp function here is an example:

    font-size: clamp(1rem, 2.5vw, 2rem)

    clamp() mdn page

    0
  • cyber-m•140
    @cyber-mPosted about 1 month ago

    @RajanCP Great job! I've noticed one little thing, that the style of the ordered list numbers doesn't match the design(for example look at the number 1 in the design you'll see it looks different)

    0
  • cyber-m•140
    @cyber-mPosted about 1 month ago

    Great work! @MdZaferEqbal, Just one small thing padding should be larger on desktop

    Marked as helpful
    0
  • lazydroide•170
    @lazydroideSubmitted about 1 month ago
    What challenges did you encounter, and how did you overcome them?

    Making the font-size and the width of the card responsive without using media queries was the biggest challenge but the clamp function worked well.

    Blog preview card

    1
    cyber-m•140
    @cyber-mPosted about 1 month ago

    Great Job! Regarding the font size I think you can make it work also just using single clamp at the root and use rem units for all the other text elements.

    Marked as helpful
    0
  • cyber-m•140
    @cyber-mPosted about 1 month ago

    Hey Brandon! Great job!

    I noticed just couple of small details in the p tag styling. According to the Figma design file, it should include:

    letter-spacing: 0.2px; /* or with any alternative CSS unit e.g., rems (rem) */
line-height: 140%;  /* should render as 21px it's slight smaller in your implementation */
    0