Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • P
    Robert Forbes• 70

    @RoboticDinosaur

    Submitted

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

    I decided to use a static site generator for this one along with SCSS to create a better workflow and cleaner code.

    I would probably change some of the elements for the next challenge instead of sticking to the ease of divs.

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

    The Figma file provided was useless so I made some executive decisions with sizing and spacing to make the end be close as possible to the design images provided.

    Product Preview Card Component

    1

    P
    Tom Winskell• 20

    @tomwinskell

    Posted

    ##Looks awesome!##

    Here's some suggestions:

    • I just tried hosting my own fonts. Check out the documentation here https://gwfh.mranftl.com/fonts.
    • I see you used SASS. I just started learning this too. So, I'm definitely no expert. I seem to have followed a slightly different process to you though.
    • I would say it is a little hard to follow what's going on with your project. Have you considered breaking your scss into different files. I.e. fonts, colours, breakpoints, etc...
    • Also, keeping unnecessary files out of your project by deleting the design files and by using .gitignore might keep things more organized.
    0
  • P
    Tom Winskell• 20

    @tomwinskell

    Posted

    Here's some suggestions that I though might help.

    • One of the biggest issues I can see if the alignment of your component. It should be centred on the screen. It's worth learning how your can create layouts using flexbox. Flexbox makes it really easy to center something on the screen. Check out https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
    • Nice reset with the use of * in your css. There are also pre-prepared CSS resets which you can use https://meyerweb.com/eric/tools/css/reset/.
    • Organizing your CSS into sections with comments as headers can help. This project is small but as your CSS files getter bigger and longer, sections and comments can really help. I find it has been useful to practise this with smaller projects first. For example:
    // Font-styles
h1{
    font-size: 21px;
}

p{
    font-size: 15px;
    color: hsl(216, 15%, 48%);
}
    0
  • Mudasir Nadeem• 90

    @mudasirNadeem

    Submitted

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

    I’m most proud of successfully completing a challenging project where I led a team, overcame obstacles, and delivered results that exceeded expectations.

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

    I encountered challenges with tight deadlines and differing team opinions during a project. To overcome these, I prioritized open communication and facilitated regular check-ins, ensuring everyone was heard and we could collaboratively find solutions. This approach helped us stay on track and ultimately deliver the project successfully.

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

    Code Efficiency: Are there any parts of my code that could be optimized for better performance, especially in the data-fetching functions?

    UI/UX Design: I’d like input on the user interface layout. Does it provide a good user experience, or are there aspects that could be improved for better accessibility?

    Responsive Design: How well does my application respond to different screen sizes? Are there specific elements that break or look unprofessional on mobile devices?

    Error Handling: I want to ensure robust error handling throughout the application. Are there any areas where my error handling could be improved or made more user-friendly?

    A mobile-first approach showcasing responsive design using only CSS

    2

    P
    Tom Winskell• 20

    @tomwinskell

    Posted

    Nice work!

    Here's some suggestions that might help.

    • It's helpful for those looking at your code to call your css file style.css, standard.css or default.css. It can also be helpful to put your stylesheet into a folder called stylesheets.
    • Nice reset with the use of * in your css. There are also pre-prepared CSS resets https://meyerweb.com/eric/tools/css/reset/.
    • Organizing your CSS into sections with comments as headers can help. For example:
    // Font-styles
h1{
    font-size: 21px;
}

p{
    font-size: 15px;
    color: hsl(216, 15%, 48%);
}

    Happy coding!

    0
  • P
    Tom Winskell• 20

    @tomwinskell

    Posted

    The solution looks very similar to the design but I would say that the code could be easier to follow and re-usable.

    The text in the html could be differentiated with different tags. h1 for the larger bold heading.

    The CSS file could have comments to identify sections to the reader. Variables used for colours is smart. Fonts could also be defined in the CSS file so they could be reused.

    I don't think the spacing is quite right at the bottom.

    Creating reusable code could be helpful if this was part of a larger project.

    0