@Sameer1003
Latest solutions
Recipe Page using tables and lists
Submitted 2 months agoThe most important aspect I still would like to get feedback on is accessibility and responsiveness of the webpage, because I'm still learning the knowledge needed to create a responsive webpage. I'd also appreciate any feedback on the formatting of my code, and if there's anything that looks off.
Social Links Profile using basic pseudo classes
Submitted 2 months agothe footer element - I tried to always make it stay at the bottom of the page, but when the viewport is made shorter, it just overlaps on top of the main container (I used position: absolute; bottom: 0px; in the original code). Is there a way to make it stay at the bottom of the viewport, but also always make it stay under the container (not overlap on top?). I'd also appreciate any feedback on the accessibility of my code, as well as on my use of semantic HTML5 markup.
Blog Preview Card using HTML, CSS and some pseudo class
Submitted 2 months agoThe formatting of my code and if it's easy to read. I didn't really use semantic HTML5 code since it kept messing up my format so I'm not really sure how my readable my code actually is.
QR code First Challenge using basic HTML & CSS with flexbox
Submitted 3 months agoMostly formatting: does the way I formatted my code make sense, and how can can I improve it for the future? Also, any fixes in terms of my text formatting (I know it's slightly off).
Latest comments
- @Peepytoo
Here are a few things I noticed:
- instead of using div tags, consider using semantic HTML5 elements such as <main> for the main container, and <footer> for .attribution
- typically, it's best to avoid using fixed sizes for the main container, since this doesn't adjust to fit smaller viewport sizes. Instead, consider using max-width, so the container can stretch enough to contain its elements.
- as a bonus, you can try using a modern reset stylesheet so your design will appear the same across different search engines.
Marked as helpful - @Odavid66What are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?I had done this exact work before, but realised it was not responsive, so I had to rework it.
What specific areas of your project would you like help with?Shorter ways to come up with better results. And also better responsive styling
@PeepytooMost of your code looks good. I wouldn't use "px" for font size however; this link explains why. It might also be better if you keep all the CSS code on the stylesheet to make navigation easier for anyone who wishes to read your code.
Marked as helpful - @davvisamuelWhat are you most proud of, and what would you do differently next time?
I feel like I'm making progress. The first challenge took me a while to complete, but I did this one much faster. There's still a lot to improve, but it's already a sign of growth.
What challenges did you encounter, and how did you overcome them?I didn’t have any trouble with this challenge. The feedback from the first one helped me a lot.
What specific areas of your project would you like help with?I’d like some help with CSS. I received feedback that we should rarely define fixed width and height for an element. When should I define them, and when should I let the element adjust to its content (and how can I do that)?
@Peepytoofor adjusting elements to fit its content, you can set the width of the element (the image) to 100%, and set a specified height for the image; these will be the dimensions of the container that you want the image to fill. You can then use object-fit and set it to "cover" (this will make the image fit the container that you have just set without changing the aspect-ratio of it). This makes it so that you don't have to define dimensions for the width of the image.
- @harshinichanduWhat are you most proud of, and what would you do differently next time?
I’m most proud of how clean and responsive the QR Code Component turned out, especially considering it was built using just HTML and CSS. I ensured the layout was mobile-first and centered the component using Flexbox, which made the design look polished across devices.
If I were to do this challenge again, I would:
Use CSS variables to make theme color updates more efficient.
Add hover effects or transitions to enhance interactivity, even if just for practice.
Possibly try SCSS or another CSS preprocessor to experiment with modular styles.
Make the component accessible by adding ARIA roles or improving semantics.
This challenge helped reinforce my CSS fundamentals and layout techniques.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was aligning the component perfectly in the center of the page across different screen sizes. At first, using margins and padding didn't give consistent results. I overcame this by using Flexbox to center the component both vertically and horizontally, which made the layout much more reliable and responsive.
Another challenge was getting the sizing, spacing, and font styles to match the design mockup, especially without access to the exact Figma/Sketch file. I relied on visual approximation and the style-guide provided, which helped a lot. It also taught me how to fine-tune layout using rem, em, and px units effectively.
Lastly, organizing the CSS for such a small project in a readable way was something I focused on. I kept the styles clean and scoped, which improved maintainability and helped me stay consistent with naming and formatting.
What specific areas of your project would you like help with?Design accuracy – How close is my implementation to the original design mockup? Any tips on improving visual precision?
Responsiveness – While it looks fine on most screen sizes, I'd appreciate suggestions on making the layout more adaptable and pixel-perfect across devices.
Code organization – Is my CSS structured well? Could it be more modular, or are there best practices I should follow even for small components like this?
Accessibility – Are there any accessibility improvements I can make, such as better semantic tags or ARIA roles?
Optimization – Are there ways to reduce redundancy or improve performance in such a minimal component?
@PeepytooMaybe consider adding an href attribute to your name at the text "coded by _".
I noticed you used internal style sheeting for your CSS code. Although there isn't a problem with this, you might want to consider using external style sheeting in future projects; the following link explains the differences and the benefits of external style sheeting: https://www.reddit.com/r/webdev/comments/ms3lw5/internal_vs_external_style_sheet/
I would also just fix some basic formatting issues in the text and elements.
- the font of your code doesn't exactly match up with the font in the solution, unless it's just because I can't load the font. An alternative method to import fonts is using googlefonts and copying and pasting the font code into the header tag of your HTML document, and then you can use the font-family outfit.
- another small thing is the margins of the box element, which can be exactly determined through the use of the Figma application which can give you details on all the properties of the solution preview.
