@AlgkaSubmitted over 1 year ago
AllanKyleV
@AllanKyleVAll comments
- @AllanKyleVPosted 6 days ago
The solution looks close awesome, both of the HTML and CSS looks net.
I suggest using <section> elements instead of <div>s to improve the semantic structure of your code, making it more readable and accessible. Also, instead of assigning font sizes individually to child elements, consider setting it on the parent element to maintain consistency and reduce redundancy."
You're doing great—keep up the good work!
0 - @JinchuanWuSubmitted 9 days agoWhat are you most proud of, and what would you do differently next time?
Overall good
What challenges did you encounter, and how did you overcome them?the structure of the card being displayed is quite hard.
What specific areas of your project would you like help with?grid
@AllanKyleVPosted 8 days agoIt looks awesome! I agree that the structure of the card is quite complex, but with CSS Grid, stacking it will be no problem.
Your code is well structured, If I could redo it, maybe use grid-column and grid-row on a child element to stack the cards properly.
0 - @TangoCode99Submitted 8 days agoWhat challenges did you encounter, and how did you overcome them?
This project was a bit challenging because trying to figure out which layout to use after the mobile design can be a bit challenging. I can go with the Flexbox approach where I create three columns and then stack up the two cards in the middle. Or I can go with the Grid approach where I just create one row and stack up the two cards in the middle. I eventually went with the grid layout since going from mobile to desktop would be easier to implement than with flexbox.
@AllanKyleVPosted 8 days agoIt looks clean and awesome. The page adapts seamlessly to different screen sizes. Great job choosing CSS Grid for the layout—it’s an excellent choice for stacking child elements (card) of the parent (card-wrapper) in accordance to the challenge preview.
0 - P@IEdiongSubmitted 11 months agoWhat are you most proud of, and what would you do differently next time?
I used this project to teach some of my students CSS.
What challenges did you encounter, and how did you overcome them?I did not encounter any challenge.
What specific areas of your project would you like help with?None for this project
@AllanKyleVPosted 8 days agoI looks so close to the original design, only its bigger. I also like how responsive it is in smaller screen sizes. The structure of the content looks net too.
If I could suggest anything, it would be to use :root with CSS variables to build a stronger foundation for the design and ensure consistency across the entire project. Great work!
0 - P@JeniaPetrenkoSubmitted 11 days ago@AllanKyleVPosted 10 days ago
Hello, awesome job on your recipe page! It looks well-structured with HTML and CSS.
If I were to redo it, I would be mindful of using flex, as it can sometimes complicate the code. You might consider using a more basic approach instead.
Other than that, good job! Keep moving forward.
0 - @jad58200Submitted 13 days agoWhat are you most proud of, and what would you do differently next time?
One of the things I am most proud of in creating my Blog Preview Card project is how I was able to combine clean, structured HTML with appealing CSS to design a visually engaging and functional webpage. The carefully styled layout, including the central container with soft shadow effects, rounded corners, and an eye-catching hover interaction on the "HTML & CSS Foundations" header, brings the page to life. The use of the Figtree font throughout adds a modern, professional feel, while small touches, like the avatar image and date section, enhance the blog’s overall look. If I were to do things differently next time, I would focus on adding more interactive features, such as a comment box, theme toggle, or animated transitions, to improve user engagement and give the project even more dynamic functionality. Overall, this project has been a great exercise in web design and a rewarding step forward in building sleek, interactive front-end components.
What challenges did you encounter, and how did you overcome them?One of the challenges I encountered while creating my Blog Preview Card was ensuring that the container's layout appeared balanced and centered across different screen sizes. Initially, the container looked off-center and uneven, especially when viewed on larger screens, due to improper margin settings and a lack of responsive design considerations. To overcome this, I adjusted the margins and padding values, implemented a flexible box model using display: flex, and fine-tuned the layout with relative units like percentages instead of fixed pixels. By doing this, I achieved a more centered, cohesive design that adapts smoothly to various screen sizes. This challenge taught me the importance of responsiveness in modern web design and how small tweaks can make a big difference in the overall user experience.
What specific areas of your project would you like help with?One specific area of my project where I would appreciate some help is improving the user experience when the live URL is opened. Currently, when the page loads, it doesn't automatically center the view on the card container, which is the main focus of the design. Instead, it seems to open at a random section of the page, requiring manual scrolling to see the content properly.
If anyone could explain how to adjust the settings so that, upon loading, the page zooms in and centers on the card container, I would be grateful. Whether it involves CSS tweaks, JavaScript, or viewport adjustments, I'd love to learn the best practice for making sure users immediately see the container front and center when they open the page.
@AllanKyleVPosted 13 days agoThere are several ways to center an element. One approach is using CSS Grid: assign display: grid to the section or body containing the target element, then use place-items: center and set height: 100vh to ensure full viewport alignment.
Another method is using Flexbox: set display: flex on the parent container, then apply justify-content: center and align-items: center along with height: 100vh to achieve centering.
0 - @viethoang2307Submitted 3 months ago
- P@atif-devSubmitted 14 days ago
- @WinstonProgrammerSubmitted 15 days agoWhat are you most proud of, and what would you do differently next time?
I'm proud of having enough discipline to finish this page and that I figured out quickly enough what I had to do. Next time I plan to practice my skills using Angular and Bootstrap, and also I plan to speed up my coding process.
What challenges did you encounter, and how did you overcome them?I had trouble when I was trying to center the container and when I tried to modify the padding of the text and heading to make them look like the original design. To overcome this, I searched through internet the answers and I checked on the code from other users who made the same page.
What specific areas of your project would you like help with?I would like to know how do the different types of position (ex. absolute, float, sticky, etc.) works and also how can I keep myself motivated to code.
@AllanKyleVPosted 14 days agoGreat job on this! The only thing I noticed is that the image’s border-radius wasn’t adjusted to make it round. You could set it to border-radius: 15px;, like I did, or match it to the same radius as your container for a consistent look. Other than that, everything looks great. I’m also working on this challenge, so it’s nice to see others on the same path!
0
