@MarenOelixtown
@nflakes
Submitted
What are you most proud of, and what would you do differently next time?
everything
What challenges did you encounter, and how did you overcome them?
sizing, position
What specific areas of your project would you like help with?
code structure
@MarenOelixtown
Posted
Congrats on completing the challenge š Nicely done...but if you would like to have an idea for code structure, maybe something like this to avoid divs:
<body>
<main>
<section>
<img src="" alt=""/>
<h1>Jessica</h1>
<h2>London</h2>
<p>"Frontend Developer"</p>
<ul>
<li>
<a href="" target="_blank">GitHub</a>
</li>
<li>
<a href="" target="_blank">Frontend Mentor</a>
</li>
<li>
<a href="" target="_blank">LinkedIn</a>
</li>
<li>
<a href="" target="_blank">Twitter</a>
</li>
<li>
<a href="" target="_blank">Instagram</a>
</li>
</ul>
</section>
</main>
</body>
See this html-help https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a and this css-help https://www.w3schools.com/css/css_link.asp for the a-tag. This ensure visitors can navigate the links only using their keyboard.
Cheers āļø
@karnatishashank
Submitted
What are you most proud of, and what would you do differently next time?
The blog preview card has a sleek and clean design that is visually appealing. The layout is well-structured using Flexbox, and it adapts well to different screen sizes with the use of viewport meta tags and responsive styling.
I successfully implemented a semantic structure in the HTML, ensuring that each section (like the image, tag, and user profile) is easy to understand. CSS was used effectively for styling elements like the card's border, spacing, and background colors.
The choice of the Figtree font gives the page a modern and professional look, complementing the blog content well.
By centering the card vertically and horizontally using Flexbox, the card adjusts beautifully across different screen sizes, which is a good practice for mobile-friendly design.
What I would do differently next time:
In the current design, the image is hardcoded into the HTML, and its resolution could be optimized for different devices. Next time, I would consider using responsive image techniques (`` element or srcset) to serve different images based on screen resolution.
Although the page is functional, it lacks proper accessibility features such as alt text for the images (especially for the banner image) and better color contrast. I would focus on improving these areas to make the site more inclusive.
While the inline CSS works, it can become unmanageable for larger projects. Next time, I would use an external stylesheet to separate concerns and improve maintainability.
The blog preview card could benefit from additional interactivity, such as hover effects on the card or buttons for user engagement, which would make the page feel more dynamic and engaging.
@MarenOelixtown
Posted
hey there, you've done a good job, so far... maybe it's worth having a look to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article to reduce the divs and to work with semantic html-elements like article or section...it supports accessibility. keep it up āļø
@nflakes
Submitted
What are you most proud of, and what would you do differently next time?
I think when I made it responsive I tried different screen sizes zooming in/out and i notice it adjust and resize properly. I want it to be responsive as possible without using media queries.
What challenges did you encounter, and how did you overcome them?
positioning img, container, text like
I guess by using properties max-min and values of vh, % and flex box
What specific areas of your project would you like help with?
positioning when to use this property min/max, width/height and values of %,vh or any other than can help me position it properly.
@MarenOelixtown
Posted
hey nflakes, great work so far... your solution looks quite similar, but have you noticed the slight box-shadow around the container? it's not considered in your css, isn't it? And maybe one question to think about, is it neccessary to have such big css reset for this small project? keep it up! āļø
