@OswalldSubmitted about 1 month ago
Ejiro Frances
@Ejiro-FrancesAll comments
- @Ejiro-FrancesPosted 11 days ago
The responsiveness is excellent and the app looks and works excellently.
I noticed the error messages do not show when the input fields are empty, You should take a look at that.
1 - @MurielM87Submitted about 1 month ago@Ejiro-FrancesPosted 19 days ago
- The code is well structured, readable and reusable.
- However, this solution is not responsive across different devices.
- You should update the README file
- The instruction stated that:
- The text for the previous period's time should change based on the active timeframe. For Daily, it should read "Yesterday" e.g "Yesterday - 2hrs". For Weekly, it should read "Last Week" e.g. "Last Week - 32hrs". For monthly, it should read "Last Month" e.g. "Last Month - 19hrs".
0 - @MurielM87Submitted about 2 months ago@Ejiro-FrancesPosted 21 days ago
The graphics look really good and well put together. I did notice a few things if you would not mind;
- There is an outline on the subscribe and dismiss button. I think you should use
outline: nonein your css. - There is no border radius in the input field.
- When the user tries to submit an empty field or input an invalid email, the error message should show.
- It is not responsive on mobile screen with width greater than 375px and 414px. I checked with a mobile simulator.
- You should update the README section.
0 - There is an outline on the subscribe and dismiss button. I think you should use
- @MarenOelixtownSubmitted 29 days agoWhat are you most proud of, and what would you do differently next time?
It took some time to find a suitable solution for the show-hide functionality of the button, which fulfils the popup display for mobile and desktop and also changes the colour of the button. I'm pleased to have found a way that suits the design.
What challenges did you encounter, and how did you overcome them?How to catch the button-color?
What I did in the end: Instead of including an SVG as src in the img-tag, I inserted the SVG directly into the button element. This allowed me to address the fill value directly in the CSS.
How to create the popup-arrow?
Found this ducumentation popup with arrow and used it as a guide.
What specific areas of your project would you like help with?I am happy about any kind of suggestions for improvement.
@Ejiro-FrancesPosted 29 days agoThank you for sharing the challenges you encountered and how you overcame them. I appreciate your willingness to share your experiences and expertise, and I plan to use this method to improve my code base. I especially appreciate your including the documentation illustrating how to use the pop-up arrow. They make it easier to understand the concepts and how to apply them. Your article looks excellent, but I did notice that it doesn't appear to be responsive on a tablet. I think it would be helpful if you could address this issue in a future update.
0 - @antoniomontoiaSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I am proud of successfully implementing a functioning CSS Grid solution. It was a challenging task, but I was able to navigate the complexities and create a layout that meets the project requirements.
Next time, I will strive to be more direct in my approach. I plan to focus on clearly defining my goals and breaking down the tasks into manageable steps from the outset. This will help streamline the development process and reduce any potential confusion or delays.
What challenges did you encounter, and how did you overcome them?I initially faced a significant challenge in achieving the desired end result, as I had never used CSS Grid in a practical context before. This lack of experience made it difficult to visualize how to structure the layout effectively.
To overcome this challenge, I utilized resources like GridbyExample, which provided valuable tools and examples that guided me through the process. By studying these examples and experimenting with the code, I was able to gain a better understanding of how to implement CSS Grid effectively and ultimately achieve the layout I envisioned.
What specific areas of your project would you like help with?I would like assistance with properly implementing BEM (Block Element Modifier) conventions in my project. I suspect that my current naming structure may not fully adhere to BEM principles, and I would appreciate guidance on how to make my class names more concise and meaningful. Any tips or examples on how to effectively apply BEM in my code would be greatly appreciated.
@Ejiro-FrancesPosted 29 days agoThis looks really good. The responsiveness on mobile and tablet devices is very good too. For the media query for desktop, It does not accommodate desktops with small screen sizes. I think you should reduce the break point from 78.65rem.
1 - @AhmadHRaiSubmitted 3 months ago@Ejiro-FrancesPosted about 1 month ago
This looks very good and responsive across different screen sizes.
0 - @romanhordiienko131Submitted about 1 month ago@Ejiro-FrancesPosted about 1 month ago
The site is responsive across all devices. This is an excellent replica of the design. Well done.
0 - @firdaus3Submitted about 1 month ago@Ejiro-FrancesPosted about 1 month ago
The page looks very good and is responsive across devices.
0 - @AVARUSJOSESubmitted about 1 month ago@Ejiro-FrancesPosted about 1 month ago
The design looks excellent. For the hover effect on the anchor tags, You could change the font colour to black as shown in the active state design.
Marked as helpful0 - @Manuel7070Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I’m most proud of completing this project and creating a clean, responsive blog preview card using HTML and CSS. The design closely follows the Frontend Mentor challenge specifications, and I implemented a well-structured layout with great attention to detail in terms of spacing, typography, and responsiveness across different devices. The component-based structure is easy to maintain and update.
Next time, I would focus more on optimizing the CSS by exploring CSS Grid more thoroughly to handle layout control better.
What challenges did you encounter, and how did you overcome them?Challenges encountered:
One of the main challenges I encountered was ensuring the blog preview card remained fully responsive across different screen sizes. Balancing the layout and typography to look good on both small mobile screens and larger desktops required careful use of CSS Flexbox. Another challenge was working with the design's spacing and alignment to ensure it matched the Frontend Mentor specifications precisely, which sometimes meant fine-tuning padding and margin values.
How I overcame them:
To overcome the responsiveness issue, I leveraged CSS media queries and Flexbox properties to adjust the layout dynamically for different devices. Testing the design on various screen sizes helped refine the responsiveness. For alignment and spacing, I broke down the layout into smaller components and used browser developer tools to inspect and adjust the design iteratively. These tools allowed me to fine-tune elements until they aligned perfectly with the challenge's requirements.
What specific areas of your project would you like help with?I would like help with further optimizing the layout, particularly in refining the CSS to ensure a smoother, more consistent design across all screen sizes. I’d also appreciate guidance on how to improve the project’s overall performance, such as using best practices for image optimization and lazy loading. Additionally, I’m interested in learning how to incorporate more advanced CSS techniques, such as animations or transitions, to enhance user interaction and engagement. Feedback on making the codebase more modular and maintainable would also be valuable.
@Ejiro-FrancesPosted about 1 month agoThe code is well structured, readable and reusable.
Marked as helpful0 - @CarlaSablic95Submitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of having completed the challenge, but I need to improve in knowing which units of measurement are appropriate for the widths and heights of elements.
What challenges did you encounter, and how did you overcome them?I faced difficulties when working on the mobile version; I searched for information on the proper use of measurement units.
What specific areas of your project would you like help with?I would like to get advice on how I can improve in layout (structuring) and styles (selection of measurement units).
@Ejiro-FrancesPosted about 1 month ago- The layout looks good on different screen sizes.
- Read MDN documentaries for solutions on measurement units.
Marked as helpful1
