All solutions

Taking on this challenge really helped me figure out grid layouts better. It was cool, but I had a problem. I couldn't make the text show up on top of the "bg-pattern-quotation" image. I tried using z-index and absolute positioning, but it didn't work like I thought it would.

Also, some testimonials had empty spaces. I guess it's to make them all the same height, but is there a better way to do that?

If anyone tackled this challenge and has some solutions, I'm super excited to see them. It'll help me learn some good tricks.

Thanks a bunch!

What did you find difficult while building the project?

While targeting two different screens. I find myself re-structuring the HTML page multiple times. I don't know if it is best practice. I want to study the layout concepts like creating a blueprint layout and then starting to replicate the actual design. How many screens should be targeted?

Which areas of your code are you unsure of?

I may have repeated some code again and at the menu button.

Do you have any questions about best practices? I would like to know some best practices that should be followed when creating a web page.

I am on the way to learning transitions and animations. Any suggestions would be helpful.

thank you

😭 it took me 1 week to understand the problem I did. Finally live demo working fine.

Well, I managed to do 50% of the website to match the design. But when I am dealing with class="blog-post-item" I find my design does not match the result. I realized I needed to go deeper about the grid. Any helpful resources or suggestions would be really helpful. I went through a few YouTube videos but still felt that dot in my mind.

I'm delighted to share that I've successfully created a responsive website. Initially, I faced challenges. Determining which elements to modify and which to leave untouched was puzzling. After completing the desktop version, transitioning to a mobile responsive design proved to be another hurdle.

Realizing the need for a fresh perspective, I took a brief break. Upon returning, I decided to approach the problem systematically. I commented out all the existing CSS and began adjusting each class, one by one, with the mobile view in mind. Within just 30 minutes, the mobile version was complete. This experience was not only a testament to the website's progression but also a reflection of my personal growth. As a person who struggling to understand responsive design splitting the problem into smaller steps and combining them is a really good approach I believe.

However, I recognize that there's always room for improvement. As I continue to learn and enhance my skills in creating responsive design, I welcome any suggestions or feedback to improve my work.

I have two issues here,

1. I am unable to make the background the way it is given in the design. I searched a lot but didn't get the correct answer for this.

2. I didn't understand how to make the div "third" immediately right to the music icon.

I truly appreciate your help, if you help me find the mistake or correct approach for this. Thank you.

I created a rating card component.

Upon completing the desktop version, I transitioned to the mobile view. Surprisingly, I didn't find any changes necessary, as it perfectly matched the design. Now, I'm wondering if I should still make adjustments for the mobile view or if it's unnecessary.

Interestingly, I observed that when switching to the mobile view, the margin is being applied only to the top and left sides, while the right side is seemingly unaffected. I'm curious to understand the reason behind this behavior.

Challenges Faced: During the construction of the project, I encountered challenges, particularly while attempting to achieve a responsive design. The main issue I faced was the adaptation of the image or banner for mobile views. I couldn't discern the best approach to replace or adjust the banner image when accessed via a mobile device.

Areas of Uncertainty: My primary area of uncertainty lies within the principles of responsive design. I'm eager to gain a deeper understanding of these principles and practices.

Request for Assistance: Any suggestions or recommendations for resources pertaining to responsive design would be greatly appreciated. I'm eager to enhance my knowledge in this domain.

This time I only used HTML and CSS. I want to submit a new solution with tailwind CSS. What would you suggest Tailwind CSS or Bootstrap? Please share any source that helps me to write CSS much better.

thank you.