All solutions

As an absolute beginner, this challenge was pretty hard for me, I had to struggle with relative path of images, I used Sass to do the styling part, and used background-image property for images, however when I use relative path to images, they work fine when the live server is running, but without the live server , images did not load except fav-icon, but when I run this project on a simple express js server, it worked well. but after dozens of google search, and chatGPT search, I finally realized the problem is image path is built in relation to scss file, so I had to change relative path that match with generated css file, please someone has a solution for this , please share with me, it will help me in my future projects, and also I am asking you guys reviewing my code and just leave something for me that you feel good, thanks.

Building this with CSS grid was little bit confused at the first place , but finally I was able to achieve what I wanted, however using grid is complex beginner like myself, so guys I am asking you to review my code and provide me some advices and also if it is possible to mention some of resources that helped you to master CSS grid, please leave them, it would be very helpful for me, thank you very much.

I am struggling with responsive designing, I used Mobile first approach but I still find it difficult to work with responsiveness, it looks like it will take more practice to gain some familiarities, Are there any better resources out there that will help me to learn it , guys that would be helpful for me, thanks.

I did my best to reach the design, I think I did great so far. It took me more time I expected to finish, when creating this I took Mobile First approach. This is the first time I tried Mobile first approach, it looked hard at the beginning, but I realized that this is the better way designing website. So when taking Mobile first approach we must have good understanding about how min-width, max-width works, To understand those concepts took me so long. Please guys check my code and leave a comment areas I should learn more. thank you

I really enjoyed building this project, this seems simple but there were lot to learn, So placing given background images, I face some difficulties determining their positions, I use background image related properties like background-size, background-position etc... however when designing mobile view again I had to face the same issue because background images moved over each, so then I had to reposition and resize the background images again, so fellow developers is there any good practice other than what I have done here. please your review will definitely help me to grow as a developer, thank you very much.

I have completed few challenges before, so now I have improved myself further more. However considering this project, I had to struggle with responsive designs, after I finished I opened it from different browsers, I noted that there are slight differences across different browsers, if someone have a solution for this, that would be great for my developer journey. thank you.

I completed challenge, it took me so long to finish this, I tried three times. There were two main difficulties I had to face, I use <p> tags within some <div> element, with other <div> element, so when I use to flexbox to align them center vertically it was hard to deal with paragraph tag, even I use margin-top, marig-bottom rules it did not work, so I had to create the whole project again, the second one is that I used Sass for the first time , it is very easy to use, but the background images did not appeared, it worked well within live server, but as soon as I open it within standalone browser environment, all the background images not loaded. it took me many hours to figure why this is happening, actually it was with path I used for background images, the "url' does not correctly identify the images paths. after I make them correct all the images loads. and also when I try to change the color of eye-icon svg, I realized that it cannot be done, I tried to make the icon white, but I couldn't do it, please guys help me with that, how can we use svg images properly in our websites. Thank you so much

This design is really nice and attractive, however as an absolute beginner it was quite challenging at the first place, but at the end of the day I did it. There were some unclear points when building projects, like how we name our element class names, when the project go more and more complex choose class names , id names will be challenging, so please if someone can provide me any idea about any element, class name conventions, that would be really helpful. And one other thing, when designing smaller size screen like mobile screen, adjusting main container height was very difficult for me, I had to reduce the height of the main container to see all the details of it's child elements. So this is what I have to say for now, your feedbacks will be very helpful to me to move forward as a developer, no matter what level you are at, do not be hesitate to give me some ideas, thanks.

When I first see this challenge I thought that I cannot do this, but after practicing few more times, this was possible, the challenges I found when making this project is , hard to find proper font size and font families. When I started to build this project, it was very hard to make changes to different screen sizes, so building a responsive design is still confusing to me, I have no proper idea where I use relative values such as 'em'. 'rem etc.. so if someone can give me some ideas , that would be great.