Skip to content
OverviewSolutions
9
Comments
10
P
usman frontend 360
@Tech-Badhead

All comments

  • Paul04sho•110
    @Paul04sho
    What are you most proud of, and what would you do differently next time?

    This is my first project with JavaScript, i'm pretty sure writing code with this language will help me throughout my career journey.

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

    I struggle the most with the CSS part. So i did some researchs and checked experienced developers code to be able to design properly the share-links part and make the all layout responsive across many devices.

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

    If someone could tell me if it was a simplier approach, i would be happy to hear him/her out !

    Article preview component master - HTML, CSS, JS

    1
    P
    usman frontend 360•160
    @Tech-Badhead

    This is an outstanding work for me, i was able to learn one or two reviewing your work to be fair. What i can pinpoint is you pushed few of the course material to your remote repositary which is not suppose to be. I.e style guide, both the readme file and template, e.t.c Always go through the readme file throughly as all instructions to go about the aforementioned is provided.

    Marked as helpful
  • P
    miszka•100
    @jakimiszka
    What are you most proud of, and what would you do differently next time?

    nightmare! practice required :D

    landing page solution

    2
    P
    usman frontend 360•160
    @Tech-Badhead

    The project looks close to the design, however it is not really responsive on some mobile devices. Here are few suggestions on how you can improve your codebase:

    • UI matters in front-end development, always pay attention to detail to the style guide from the figma file for font, spacing e.t.c
    • Normalise going through the README provided before diving into the project to avoid working with the same file as the one provided instead of creating a new folder, then transfer all assets for the project in the new folder.

    It's all about improvement, which i believe applies to anyone commited to lifelong learning. Keep moving and keep building!

  • P
    usman frontend 360•160
    @Tech-Badhead

    -The code is semantically structured and responsive.

    • Always look to apply the the font type given in the style-guide as opposed to the one you used. Typography is just as important as how responsiveness is.
    • You pushed all the files given in the starter file to your remote repository which i believe it's not suppose to be like that. What you should do is edit the readme template file to how you approach your project, then safe the changes and rename the readme-template to readme.md then delete orginal readme file. Go through the readme file thoroughly and everything i am saying will make sense.
  • P
    usman frontend 360•160
    @Tech-Badhead
    • The code is responsive and the solution looks like the design.]
    • The code is not well structured semantically
    • i recommend using browser dev tools (like Chrome DevTools → Layout tab) to debug grid lines.
  • P
    usman frontend 360•160
    @Tech-Badhead
    • The solution is close to the design but attention was not really on the detail which is highly essential in frontend development
    • For accessibility best practise, the solution is not semantically structured and semantic HTML thrives well in that aspect.
    • The solution does not really look good on various mobile devices, making apps look good on all screen sizes is one of the core fundamentals aspect of frontend development.
    • Always look to import the font type given in the style guide of your project, it looks negligible but typography is just as important as responsiveness.
    • You are doing awesome and one of the best way to get good is getting hands on building projects like this, keep going and improving along the way.
  • P
    usman frontend 360•160
    @Tech-Badhead
    What are you most proud of, and what would you do differently next time?

    I am proud of myself with the way i tackle things one after the other in completing the project.

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

    The problem i encountered was the border beneath the table row in the last section and to be honest, i overcome it through try by error!

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

    The row bottom border in the nutrition section

    Responsive recipe page

    2
    P
    usman frontend 360•160
    @Tech-Badhead
    • The solution include semantic HTML
    • It is accessible however there will always be room for improvements. I cannot point what improvements could be made at the moment, hopefully when i up my level a bit.
    • The layout look good on a range of screen sizes but there still improvements to be made because i only set media queries for 576px. 1.e (max-width: 576px)!
    • The code is well structured, readable, and it would have been much better in terms of reusability if i had consider using the css custom properties for the colors used in the project.
    • The solution does not differ from the design.
  • P
    usman frontend 360•160
    @Tech-Badhead

    Accessibility best practice: -Using semantic tags is a best practice for accessibility. i.e the main tag would have been better in place of the div tag.

    • The project does not look good on a range of mobile devices.
    • consider using rem, em, and % unit for sizing instead of pixels as it helps scale your work smoothly
    • The solution is close to the design for the desktop version
  • Luiz Felipe•80
    @Luizf-devdias
    What are you most proud of, and what would you do differently next time?

    Me orgulho de ter feito rápido e bem feito e saber que agora posso sair de novato e tentar projetos juniors.

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

    Dei uma travada no hover, pesquisei nos meus resumos e consegui resolver

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

    Em nenhuma consegui fazer o código bem semântico e organizado

    Perfil de Links Sociais feito com HTML e CSS usando flexbox.

    1
    P
    usman frontend 360•160
    @Tech-Badhead

    I've got to be honest, i didn't see any area i can point out for him to improve instead i personally was the one that learnt off his project reading through his code. This are key things i noted from his work: -It is responsive -it is semantically structured -codebase is as tidy as already laid bed -so yeah onto the next! 👍

    Marked as helpful
  • P
    usman frontend 360•160
    @Tech-Badhead
    • The solution does not include semantic HTML
    • It is not accessible, making use of semantic markup would help in accessibility best practise
    • The layout looks good on a range of screen sizes
    • The code is well structured,readable and the custom color properties is reusable.
    • The solution does not differ from the design
    Marked as helpful
  • P
    usman frontend 360•160
    @Tech-Badhead

    The solution does not include any semantic HTML. Semantic HTML is a good practice for making website accessible to various types of users.

    It is not accessible. the main element would have been better instead of div element for the main content.

    The layout look good on a range of screen sizes.

    The code is well structured and readable.

    The solution does not differ from the original design.