@ThariqRamadhan101Submitted 5 days ago
What are you most proud of, and what would you do differently next time?
Learn about BEM and Grid
Latest solutions
testimonials-grid-section-main
PSubmitted 4 days agoI feel like my solution fits the style guide that was provided, all while being responsive to screen sizes. I would love any critique on how I could improve my coding where possible. Thank you.
four-card-feature-section-master
PSubmitted 6 days agoI think the only thing is that I couldn't quite get the exact box shadow effect that was used in the designs, so I tried to make it as close as possible. Other than that, I feel like I was able to make a responsive page that transitions cleanly from mobile to tablet to desktop.
product-preview-card-component
PSubmitted 11 days agoI feel like I was able to implement a solution that covered all of the figma design specifications: mobile, tablet, desktop, and hover states.
recipe-page-main
PSubmitted 16 days agoThe area that I would like help with, which is something that I ended up excluding from this project, would be how to incorporate those horizontal lines that are in the nutrition table. I tried to do an HTML <hr> but since I used display grid it would turn that horizontal line into a vertical line. I'm not sure if adding an entire row into my grid template for the horizontal line would be the solution, or if there is an altogether better way of doing this instead of display grid.
social-links-profile-main
PSubmitted 20 days agoI believe that my project is well designed. I decided not to follow the figma designs this time, so I would have to practice eye-balling sizing, margin, padding, and other design aspects.
blog-preview-card-main
PSubmitted 23 days agoI updated my code but the live site doesn't seem to have caught up yet. My code works fine within vs live, so hopefully it works on github soon. I think my design works and properly adjusts to screen size.
Latest comments
- P@joeleg96Posted 4 days ago
It looks like your solution follows the design provided, and that you have a good grasp of grid. I did notice however, that you forgot to include a media query for the tablet design. Another minor thing I noticed was that your column and row gaps are significantly smaller than those of the design, so it makes your solution a little cluttered, and it could breathe a bit more. Other than that great job, and good luck on your coding journey!
0 - P@AnjelToppoSubmitted 6 days agoP@joeleg96Posted 6 days ago
One thing that I would recommend, in order to make your code more condensed, is to give all the cards a common class name since they all have certain features in common: size, box shadow, margin, etc that way you don't have to give each individual card those css attributes. You can also give them unique class names, like the supervisor card "cyan" and the team builder card "red" that way you can target the border and change the color to it's respective color. Another thing, though this might just be me and I'm not sure if it's correct or not - but I feel like your webpage, though it transitions to the correct layouts, has a lot of things that are moving around, and it visually makes the page "confusing." For example, in the mobile layout, if you start to resize the page the title moves all over the place, and I feel like that just makes the transitions look a little clumsy. Again, maybe this is just me. Overall I think you did a great job in implementing each layout! Great job and good luck on your coding journey!
0 - @sheriminSubmitted 7 months agoP@joeleg96Posted 11 days ago
I took a quick look at your code and design, and it seems to be responsive to changes in screen size, so great job on that. One change that I would make is to make a media query for the hover state since this shouldn't be applying to mobile sizes or tablet sizes, since there wouldn't be a cursor at those screen sizes. Other than that great job, and good luck on your coding journey!
0 - @Joan-Bell-FayeSubmitted 17 days agoWhat are you most proud of, and what would you do differently next time?
Owww that was a headache! Next time I would use a text_wrapper div
What challenges did you encounter, and how did you overcome them?Styling the bullet points. I learned how to use li::marker to style these and also list-style-position: outside; to keep the list item text aligned with itself rather than the list marker.
When I wanted to make the page responsive I realised that I should have checked the mobile and desktop designs more thoroughly as the padding around the image that was contained in the card div created a problem. I then had to go back and add another wrapper div around the text so that I could remove the padding from the card and have some padding on the text. It was a PAIN.
What specific areas of your project would you like help with?One of the main issues I struggled with was identifying the colours as the changes between these were to subtle. Any pointers on this for consistency moving forward, or anything else you notice I am happy to receive feedback on. :)
P@joeleg96Posted 16 days agoIt looks like your live page isn't actually working, so I wasn't able to take a look at your work to see how it looks/responds to page sizes. I took a quick look at your code though and I like that you used variables to define your font sizes and the various font colors. This makes it a lot easier to make those changes rather than assign them individually. I noticed you switch a lot between viewport w/h, rem, and pixels throughout your code. I would try and stick to one so that it's easier for your to make the necessary changes, rather than cycling through various measuring standards. It would be like an engineer switching between yards, meters, feet, and kilometers without any clear reason. Overall keep up the good work and good luck on your coding journey!
Marked as helpful0 - @pdoubleu30Submitted 20 days agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of putting my head down and working through this project. My HTML and CSS skills are still very basic, but I feel that I am learning and growing.
What challenges did you encounter, and how did you overcome them?I had challenges with the hover aspects of the project, but it was fun to work through it.
What specific areas of your project would you like help with?I would like help with the focus aspects of the project. Thank you!
P@joeleg96Posted 20 days agoOverall your solution looks like the design that was provided. One thing that I found interesting about your code was that you used "li" along with anchor tags when doing the media section. Another solution, which is the way that I did it, could be to use the button element in your HTML, and put all of the buttons inside of a container div. Then in your CSS you could display: flex; and flex-direction: column; that way you can get them to stack up vertically. Just another possible way to tackle to same problem. Hope this helps, and good luck with your future coding projects!
Marked as helpful1 - @FehmidatanzeelSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I am most proud of successfully implementing a responsive design using only HTML and CSS. It was a great learning experience to structure the layout properly and style it effectively. Next time, I would focus more on improving accessibility and adding small animations to enhance user experience.
What challenges did you encounter, and how did you overcome them?One challenge I faced was aligning the content properly within the columns while keeping the design responsive. Initially, the layout was breaking on smaller screens. I solved this issue by using CSS Flexbox and Media Queries to ensure a smooth and adaptable design.
What specific areas of your project would you like help with?Through this challenge, I learned how to structure content effectively using HTML and apply modern CSS techniques to create a visually appealing layout. Additionally, I improved my skills in handling responsive design and debugging layout issues.
P@joeleg96Posted 23 days agoI checked your designs using various screen sizes and it seems to respond well to those changes, so great job on implementing a working solution to a problem that you were initially having. Keep up the great work and good luck on your programming journey!
0
