Matiko• 20
@maatiko
Submitted
Eirik Andresen
@ehandresen
All comments
- Eirik Andresen• 60
@ehandresen
Posted
Overall a fine solution, some points of improvement though. The colors a a bit off, only the prer section should have a pink/rose background. Also some more spacing between the text whould make it look less 'clunky'. Lastly the whole card should be centered on the page.
Marked as helpful
0 - Ibtehaj Ali Mirza• 200
@Ibtehaj-Ali-1
Submitted
What are you most proud of, and what would you do differently next time?
I finally got a hold of the CSS Grid property...
What challenges did you encounter, and how did you overcome them?
I didn't encounter any hard challenges.
Eirik Andresen• 60@ehandresen
Posted
Overall looks very good, but think the font-family in the name is different.
0 - Abhishek Kumar• 30
@abhishek7199
Submitted
Eirik Andresen• 60@ehandresen
Posted
The solution includes semantic HTML elements such as <header>, <nav>, <main>, <section>, <article>, and <footer>, enhancing both accessibility and SEO. However, improvements could include adding more descriptive alt text for images, ensuring form elements have associated labels, and providing text equivalents for non-text content.
The layout is responsive and adapts well to various screen sizes, from mobile devices to desktops. Media queries and flexible grid or flexbox layouts ensure that content is readable and well-organized regardless of the device. The code is well-structured and follows best practices, with meaningful class names, consistent indentation, and comments where necessary. It is modular and reusable, with components that can be easily maintained and extended.
The solution closely follows the design specifications, maintaining consistency in terms of colors, typography, and layout.
0 - Kate• 60
@devknightingale
Submitted
What are you most proud of, and what would you do differently next time?
Proud of: I thought going in that trying to build a page without following a tutorial would take a lot longer than it did.
What I would do differently: With a bit more experience, I would like more knowledge of building for mobile screens. I tried to fiddle with the css a bit and test how the page would look by collapsing the browser window, but I don't think that's how people test mobile sites. I would like more knowledge on how to do that next time.
What challenges did you encounter, and how did you overcome them?
Not enough containers... I had trouble centering it vertically before realizing I needed to wrap the whole thing in another element to allow vertical centering. From what I googled there are other ways but flexbox seemed simplest.
What specific areas of your project would you like help with?
I'd like to figure out how to use the MobileView extension in VSCode. I installed the extension but when I start it up, it doesn't seem to actually have a live preview of the site I'm building. I didn't have a lot of time to fiddle with it before work though so I let it go for the time being.
Eirik Andresen• 60@ehandresen
Posted
While you did attempt to test the page by resizing the browser window, there are more effective ways to ensure your design is mobile-friendly. Consider using tools like Chrome DevTools for responsive design mode or dedicated mobile testing tools to get a more accurate representation of how your site looks on different devices. Addressing the issues with the MobileView extension in VSCode is crucial. Ensure that your development tools are set up correctly to save time and avoid frustration. Look into alternative extensions or plugins that might offer more reliable live previews.
0
