@AmneisaOBSubmitted 24 days ago
Taiwo Sumayyah
@Sumta4realAll comments
- @EAguayodevSubmitted over 3 years agoWhat are you most proud of, and what would you do differently next time?
I did this project two years ago, and I would say after looking over my code that I approached, I did well in understanding how to implement a CSS grid with the challenge.
What challenges did you encounter, and how did you overcome them?I vividly remember having to overcome getting the right font size correctly back when I did this challenge and setting the grid right back then.
What specific areas of your project would you like help with?Feel free for anyone around to give feedback on the design and how it came out on multiple devices and browsers.
@Sumta4realPosted about 2 months agoYou need to work on your spacing as your styling, particularly spacing using margin and padding does not fit perfectly to the design
Marked as helpful0 - @zmora2622Submitted 2 months agoWhat specific areas of your project would you like help with?
I still need help with accessibility and HTML semantics. I was trying to create something like fluid containers with as little use of media queries as possible focusing on clamp. I have created my own template in excel for this need, which once entered the minimum and maximum size and the breakpoint where the increase or decrease should start and at what size it should end. It would also be useful to help organise the variables.
- @kassahunAmdieSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of getting close to my estimate regarding how long it would take me to complete the challenge. I am still off by a couple of hours almost. But considering the progress I made with the challenges I have completed so far, in my book, this is well done. I will keep working on this suggested foreplan by Frontend Mentor.
What challenges did you encounter, and how did you overcome them?Working with the pseudo element for the shopping cart icon at first gave me the run around. After pouring over in the MDN Web docs I was able to solve the problem. I used positioning at first that made the icon invisible. The lesson I learned is not to over complicate my approach. Sometimes the simplest solution gives the most elegant result.
- @Rutwik8257Submitted 9 months ago@Sumta4realPosted 3 months ago
Well done! I can't seem to access your code, so I might not be as specific in my suggestions as I would have wanted. Below are my observations
- Your content is not vertically aligned, you can try adding margin-top and bottom as 8% each to the div housing all your contents.
- Your ordered list marker should be bold. Add font-weight as bold. Use the ::marker pseudo-code
- the heading of each section should be in brown color not black. You can assign the same class to all the headings and style all using the class name in your css file 4.Also consider using section tag instead of div tags
- Also don't assign height to the div housing all your contents.
- Consider putting your attrition class in a footer tag and styling it as a fixed footer. You can do this by setting position as fixed and bottom property as 0 and set the text-align property as center.
I hope you find this helpful and I wish you the very best
0 - @Cxx-mlrSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of how quickly I got this done and happy with how it turned out.
What challenges did you encounter, and how did you overcome them?One big challenge was dealing with the default styles on elements like
What specific areas of your project would you like help with?address,figure,ul,a, andq, which come with things like margins and underlines that I didn't need. I had to look up how to reset these defaults.I’m open to any constructive feedback or suggestions.
@Sumta4realPosted 3 months agoWell done Dev! I am impressed with your solution. Its near perfection
1 - @Cxx-mlrSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I was able to complete this project efficiently without running into any challenges. In the future, I’d like to explore using Tailwind CSS and React to enhance the implementation.
What challenges did you encounter, and how did you overcome them?Fortunately, I didn’t encounter any obstacles during the process.
What specific areas of your project would you like help with?I would appreciate any feedback on potential improvements. If you have suggestions for refining the project, they would be greatly valued.
@Sumta4realPosted 3 months agoYou did excellently well. Well done . The only area of concern is that the height of the container is lesser than the height of the original design.
Some of these might be helpful
- Vertical and horizontal padding should be 24px or 1.5rem
- Try adding margin-bottom of 12px r 0.75rem to each element within your main element
Marked as helpful1 - @Papi84Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
--> My Most Proud Of?
- Implementation of Design: I’m particularly proud of how closely I was able to replicate the design specifications provided in the challenge. Paying attention to details like spacing, typography, and color schemes helped me create a visually appealing layout that aligns with the original design.
- Responsive Design: I successfully made the project responsive across different devices. Using media queries, I ensured that the layout adapts well to various screen sizes, providing a good user experience on both mobile and desktop.
- Code Quality: I focused on writing clean, maintainable code. By using semantic HTML and organizing my CSS efficiently, I made it easier for others (and myself) to understand and modify the code in the future.
- Learning New Techniques: I experimented with CSS Grid and Flexbox for layout management, which enhanced my understanding of these powerful layout systems. This project allowed me to apply these techniques in a practical context. --->What I Would Do Differently Next Time
1 > Time Management: I realized that I could improve my time management skills. I spent too much time on certain aspects of the design, which led to a rushed final review. In future projects, I plan to allocate time more effectively to ensure I can thoroughly test and refine my work.
2 > Accessibility Considerations: While I made an effort to include basic accessibility features, I recognize that I could have done more. Next time, I will prioritize accessibility from the start, ensuring that my project is usable for people with disabilities by following best practices like proper ARIA roles and keyboard navigation.
3 > Testing Across Browsers: I focused mainly on Chrome during development. In the future, I will test my project across multiple browsers and devices earlier in the process to catch any compatibility issues sooner.
4 > Seeking Feedback Earlier: I waited until the end to seek feedback from peers. In future projects, I will share my progress at various stages to gather input and suggestions, which could help me improve my work and avoid potential pitfalls.
Conclusion This project was a valuable learning experience that allowed me to apply my skills and grow as a developer. I look forward to implementing these reflections in my future projects and contributing further to the community by sharing my journey and learning from others.
What challenges did you encounter, and how did you overcome them?-
Responsive Layout: One of the main challenges I faced was ensuring a consistent and visually appealing layout across different screen sizes. To overcome this, I experimented with various CSS techniques like media queries, relative units (such as percentages and viewport units), and responsive typography. By breaking down the layout into smaller components and testing on multiple devices, I was able to create a responsive design that adapts well to different screen sizes.
-
Positioning Elements: Precisely positioning elements on the page was another challenge. I used a combination of CSS positioning properties (absolute, relative, fixed) and the Box Model (margin, padding, border) to achieve the desired layout. When I encountered issues with overlapping elements or elements not aligning as expected, I debugged the code step by step, inspecting element properties in the browser's developer tools. This helped me identify and fix positioning issues.
3.Maintaining Code Organization: As the project grew in complexity, maintaining a clean and organized codebase became a challenge. To overcome this, I implemented a consistent naming convention for classes and IDs, following best practices like the BEM (Block, Element, Modifier) methodology. I also grouped related styles together and used comments to separate sections, making it easier to navigate and understand the code. Handling Animations and Transitions: Adding subtle animations and transitions to enhance the user experience was a challenge that required some research and experimentation. I used CSS properties like transform, transition, and animation to create smooth effects. When I encountered issues with timing or unexpected behavior, I referred to online resources, documentation, and examples to troubleshoot and refine the animations.
-->By facing these challenges head-on and employing problem-solving techniques like experimentation, debugging, and seeking resources, I was able to overcome obstacles and deliver a functional and visually appealing project. These challenges also provided valuable learning opportunities that will help me tackle similar issues more efficiently in future projects.
What specific areas of your project would you like help with?1.Accessibility Improvements: While I made an effort to include basic accessibility features, I would appreciate feedback on how to enhance accessibility further.
2.Advanced CSS Techniques: I am interested in learning more about advanced CSS techniques, such as CSS Grid and Flexbox. While I used these in my project, I’d like to explore more complex layouts and responsive design strategies. Any resources, tutorials, or examples that delve deeper into these topics would be greatly appreciated.
@Sumta4realPosted 3 months agoGreat job! I really appreciate the detailed retrospective you provided on the project. It's clear you put a lot of thought into it. Here are a few observations:
-
In your
style.cssfile, where you use the universal selector (*), there's a typo in the value assigned tomargin. It seems you intended to assign0, but accidentally used the letter "o" instead. -
The correct background color for the body should be
#D5E1EF. -
In general, I think there's a simpler way to achieve the same results in your CSS file. Consider refactoring for simplicity.
-
You might also want to focus on simplifying your code to achieve the same outcomes more efficiently.
-
Your solution doesn't exactly match the sample page; your layout appears larger. I recommend reading up on using Figma files to accurately get dimensions, which will help you achieve better precision moving forward.
-
The Figma file for the project was provided as part of the resources. It contains all the necessary information regarding the page layout and design, so leveraging it will help you get more accurate values for the CSS properties you need.
Marked as helpful0
