I am more familiar with using flexbox and then designing for smaller displays.
What challenges did you encounter, and how did you overcome them?Designing for smaller displays, after finishing the design for larger displays is difficult as you have to undo a lot of changes in order for the designs for smaller designs to work.
Great Works!
Your solution is close as mine, using pure flexbox not grid layout. For the .block can float in center you use 3 column to seperate each other.
For me, if I want to use a smaller display, I just make a simple change flex direction: column; in the main section media query if this is your case and the rest will follow if you already make .block size is same. So you don't have to undo everything
I hope it helps. Good Job.
I was able to build and design the page now, with much less confusion and more experience in my hand.
What challenges did you encounter, and how did you overcome them?The challenges came after the completion of the practice. When I deployed this using Github, from where I went to the live site, everything seemed wrong. My images were not loading and it seemed that there was no CSS made for it to begin with.
Good Job for completing the challange.
First, your HTML structure is great with proper semantic element. Second, Your CSS is good, you have used root to declare frequently repeated variables and used reset CSS to generalize the style in the browser before using it in your project.
A little advice from a newbie in the front-end field, I think the media query section can still be shortened further because basically only small part of it is changed, not too much
I hope it helps. Thanks and Regards.
Your solution is good with proper semantic html and basic styling it to make it better. Good Job!
That i have gotten a partial hold of Media Queries.
What challenges did you encounter, and how did you overcome them?Button Responsiveness using Media Queries
What specific areas of your project would you like help with?Responsiveness still
Great Work,
Your solution is good, maybe if you use semantic HTML element and BEM method to naming the element so it can be easy to read. I hope it helps, Congrats.
The responsive design achieved using CSS Grid and Flexbox.
Add interactive elements with JavaScript to enhance user engagement.
What challenges did you encounter, and how did you overcome them?Challenges Encountered: Achieving a fully responsive design and ensuring cross-browser compatibility.
How I Overcame Them: Used CSS Grid and Flexbox for responsiveness and extensively tested on multiple browsers to ensure consistent appearance and functionality.
What specific areas of your project would you like help with?Specific areas I would like help with:
Great Works :)
But the source code are no longer accessible. But overall from it looks, its close enough to the design but you miss the hover cursor feature on the card title. Hope its help for your next solution.
Regards.
I like that i did the work, without having to ask for help at the slightest inconvenience.
What challenges did you encounter, and how did you overcome them?Recreating to precision was quite challenging, and get accurate measurements for dimensions.
Your solution is good enough.
I think if you can make main content at 100% display height or 100vh and the footer is slightly below, it can make more accurate position to the design.
