@AlgkaSubmitted over 1 year ago
Latest solutions
Product Preview Card Component using Mobile-First Workflow
#accessibilitySubmitted 5 days agoI need more practice on mobile-first workflow.
Recipe Page with HTML and CSS
#accessibilitySubmitted 7 days agoMostly with spaces, margins, padding, and text indent. Trying to get the spacing right is time-consuming. Is there any other way to make it easier or more efficient?
Blog Preview Card with HTML and CSS
#accessibilitySubmitted 10 days agoExperimenting with the proper values to closely match the challenge preview is time-consuming and requires a lot of trial and error. Is this just the way it is, or is there a way to improve the process?
Latest comments
- @AllanKyleVPosted 3 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 5 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 4 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 4 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 4 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 5 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 8 days ago@AllanKyleVPosted 7 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 9 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 9 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
