@raozhaizhuSubmitted 4 months ago
Latest solutions
HTML CSS Recipe page
PSubmitted 4 months agoOpen to all kinds of feedback. Mostly if code is readable and makes sense. If there are things I could improve, I would love to hear them.
HTML CSS Social links profile
PSubmitted 4 months agoOpen to all kinds of feedback. Help with responsiveness is welcome. And I was wondering, when in Figma the width is 384px for example, is this the set width you use for the design of the project because a few times I saw that when using the width and/or height that I see in Figma my solution is bigger than the design.
HTML CSS blog card
PSubmitted 4 months agoFor now not really a specific area, but I'm open to all feedback. I am just now learning about semantic HTML and I wasn't really able to decide which HTML elements I should use for this, so that's definitely something to dive deeper into and if anyone has any tips/suggestions etc. I would like to hear them!
QR code component challenge
PSubmitted 4 months agoProbably with Flexbox. I keep reading that it's super useful and could have been easier when I was looking for a way to center the div on the page, so that's something to look into.
Latest comments
- @calakovicalenSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
Learning that elements allow you to navigate through them by using your keyboard.
What challenges did you encounter, and how did you overcome them?I wanted to achieve this challenge by using element and then put elements inside . But designing it was really hard so I decided to take easier approach and just put elements inside container.
What specific areas of your project would you like help with?I would like overall review of code and feedback on what I could improve and what can I change.
P@eminahadziccPosted 4 months agoLooks good! Couldn't look at the code though, the page is not found.
1 - @AdhizahSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
What I'm most proud of
I'm proud of how I was able to complete the work because I understood the concepts behind it. It felt rewarding to apply what I had learned and see the results come together.
What I would do differently next time
Next time, I would try to focus more on refining my design and experimenting with advanced CSS techniques like CSS Grid, which I haven't explored much yet.
What challenges did you encounter, and how did you overcome them?Challenges Encountered
Initially, I used
border-radiuson the sides of the design to round the corners, but I realized that it didn't match the design specifications exactly. The effect wasn't the same as what was shown in the design mockup.To overcome this, I researched the correct technique and discovered that
What specific areas of your project would you like help with?box-shadowwould be the better approach to achieve the desired visual effect. After making the change, the design matched the intended look much better.Areas I Would Like Help With
One specific area I would like help with is improving the responsiveness of my design, especially on smaller screens. While I used
flexboxfor layout, I feel that the design could be better optimized for mobile devices. I would love to get feedback on using advanced Flexbox techniques to enhance the layout further.Additionally, I want to explore CSS Grid for creating more complex, two-dimensional layouts. I haven't used CSS Grid extensively yet, and I am interested in understanding how to implement it effectively in this project to improve the overall structure and design.
Lastly, I am also interested in getting feedback on my use of
box-shadowfor visual depth. I am not sure if the shadow effect is consistent across all screen sizes, and I would appreciate any suggestions for improving its appearance.P@eminahadziccPosted 4 months agoIt looks good! Your use of the box-shadow is exactly as it should be, looking at the design. The solution does differ a bit from the design, looking at e.g. the distance between texts or the size of the profile picture so that would be something to look out for, but you already said that yourself in the description so it's good that you're aware. The code is readable and the layout looks good on different screen sizes.
Marked as helpful0 - @lauren-cheSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of being able to remember HTML and CSS syntax after several months of not coding. It was encouraging to see that I could quickly get back into the flow of building a project, even after some time away from it. However, next time I would focus on how to use the Figma design file more effectively. Instead of guessing and refactoring code until it aligns with the design, I want to make a more systematic approach. I could use the Figma file to better understand the design elements and how they should translate directly into CSS (e.g., spacing, font sizes, colors), which would help streamline the development process and reduce unnecessary tweaks.
What challenges did you encounter, and how did you overcome them?Background Color Not Applying Correctly in the section: One of the challenges I faced was ensuring that the background color of the section element applied correctly. Initially, the background color was being overridden by the universal selector (*) that applied a global background color to all elements. This caused the section's background to appear as the primary color, instead of the intended white. Solution: I removed the global background color rule applied to all elements and specifically set the background color of the body and the section to the correct values (primary for the body, primarywhite for the section).
Image Overflowing the Section: Another challenge was the image inside the element overflowing the boundaries of the section container. The image wasn't constrained within the section’s width, which caused it to extend beyond its container. Solution: I used width: 100% and height: auto on the image to make it responsive and fit properly within the section. Additionally, I used object-fit: cover to control how the image fills the container without distortion. This solution ensured the image displayed correctly without any overflow.
What specific areas of your project would you like help with?I’d appreciate help with simplifying my HTML code, particularly by identifying areas where I could have streamlined the structure or reduced unnecessary elements.
P@eminahadziccPosted 4 months agoGood work. I like how you divided everything in the css stylesheet, even with this the code is readable and looks very structured. The solution does differ a bit from the design but I read that you didn't use the Figma design but was guessing and refactoring. In that case an even better job at making the solution look like the design.
0
