All solutions

What are you most proud of, and what would you do differently next time?

I'm happy that I continued through this and finished it. Next time, I will try to make things as correct as possible.

What challenges did you encounter, and how did you overcome them?

My biggest challenge was the size of the img (the illustration mockup). For some reasons the img size was not changing. I put the , which is on the left side of the given design, and text content on the right side in one element and gave it display: flex; and gap: ; properties to match the design. And then I tried to resize the img but it was not happening. I tried to gave it width: 60%; since about 60% of the screen width is covered by the img on the design. But it didn't work.

Then I let it to be of normal size and decrease the size of the text container to match with the design. But still I cannot understand that why the img size was not increasing.

What are you most proud of, and what would you do differently next time?

I'm happy that I took this challenge. I learnt many new things doing this challenge. Next time, I will be little more careful when assigning the values to properties. I will try to use responsive values rather than using rigid, fixed values like "px" or "rems".

What challenges did you encounter, and how did you overcome them?

The very first challenge that I encountered doing this challenge was obviously the layout. The design look easy when I first had a look on it. But It gave me a tough time deciding the display property. I chose to go with grid. It could have been done with display flex as well which I realized later when I finished the project. But I like the idea that I think that there's other way of doing it.

So I went with the grid layout: I let the layout be responsive by using display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));. This property allows the layout to be responsive. It pushes the content as per the size of its parent element. So each column will have width of 230px and if there's space for the another column of the same size it will add up there and so on. This is what I used for the middle screen-resolution which sets between the mobile and desktop. Just make it more responsive as the screen sizes changes, instead of a quick snap which looks kinda weird.

For the desktop layout, I positioned the three elements in the same row and only one in the second row. First, second and fourth elements sits in the first row and third element sits on the second row and second column. And the I used the position relative to the first and fourth element and gave them top: 50%; to push them down in the middle of their relative position. And that matches with the given design in the challenge.

What specific areas of your project would you like help with?

I want to know that why do only the calculator element is squeezed when the screen sizes decreases while others don't shrink. I couldn't figure that out.

What are you most proud of, and what would you do differently next time?

I'm happy that I was able to finish this project meeting its all requirements. I have learnt many things doing this project. Next time, I will step back a little bit and try to spend more time analyzing the layout of the design and try to visualize the markup correctly.

What challenges did you encounter, and how did you overcome them?

Responsivity was my biggest challenge. The font size and padding of the elements differ in both mobile and desktop size. To keep it consistent, I chose the one font size for both the resolutions. In case of padding, I used : vmax; value to the padding property of all the three containers, so the containers padding size adjust as the size of the viewport varies. That's how I dealt with the different padding sizes. And also this was the first time I used vmax; value and I love it how convenient and easy it is to use it. I will play more with vmin:; vmax:; to wrap my head around it thoroughly.

What specific areas of your project would you like help with?

I really want to know more ways of increasing responsivity. How can the font-size be made more adapt to the changes of resolution?

What are you most proud of, and what would you do differently next time?

I'm proud that I took this challenge. I learned many things doing this challenge.

What specific areas of your project would you like help with?

On the right side, the three rating container (which includes 5 stars and names rated by) have to be indented from the left side and outdented from the right side. I managed to create indentation on the left side by give margin property, but on the right side it supposed to outdented but rather the container got shrunk. As a result, it failed to create the same design given in the challenge. I would really appreciate help if someone could help.

What are you most proud of, and what would you do differently next time?

I'm happy I finished this project. I found it quite challenging.

What specific areas of your project would you like help with?

I have problems with responsivity. Some elements look funky when screen size changes. For some reasons there is space at the bottom and right side. I'm not sure if it is causing by the pseudo element that I used for background design. Can elements with position: absolute: cause overflow?

I would appreciate help with the hero. I think it was only decorative, but for practice I gave it input and button elements.

And my biggest challenge was to keep the size of phone in the design to small, but I think I failed terribly since it is big and causing overflow vertically. I still don't know what is causing horizontal overflow. Please help me understand that!

What are you most proud of, and what would you do differently next time?

I'm proud that I learned new things doing this project such as creating shapes and more.

What challenges did you encounter, and how did you overcome them?

My biggest challenge was the progress bar. I was very confused about approaching it like whether I should go with pseudo elements and divs. At the end, I used mix of this two.

What specific areas of your project would you like help with?

There's plenty wrong with my project.

Responsivity - There are mainly two containers in this project: one for the logo and icons (which I name fylo-container), and other for the text, progress-bar, labeling and dialogue box that shows the data(storage-container). The storage-container has to be wider than the fylo-container as it is in the given design. For some unknown reasons, max-width: ; property is not working, although the width: ; property works finely. But the width: ; property doesn't make the element responsive as it is fixed width. I have checked many times and tried to figure out the problem myself so many times but to no avail. I end up being frustrated. I would really appreciate help with this.

What are you most proud of, and what would you do differently next time?

I'm happy that I'm able to use display: grid; in this project. Next time, I will do deep analysis of the project, try to visualize where everything could be placed, before jumping in directly to write code.

What challenges did you encounter, and how did you overcome them?

The positioning of components inside the grid areas. I got so confused. I took help from Kevin Powell's video on the display grid. It helped me in learning many things related to display grid. I will highly recommend you to watch it if you're looking for learning display grid.

What specific areas of your project would you like help with?

I want a feedback on HTML semantics and on CSS in general. I want to know how others set the body to achieve the position of elements in center. I want to know why when I use body{ height: 100%; } doesn't add the padding at the bottom when it is given (to give space on the top and bottom as it is given in the design), but when the padding is given at the top, it adds to the top without any problem.

However, when I use body { min-height: 100%/vh; }. It does add padding to the top and bottom without a problem.

What are you most proud of, and what would you do differently next time?

I'm happy that I'm doing these challenges. I'm seeing improvements.

What challenges did you encounter, and how did you overcome them?

Challenges:

1. Deciding Flexbox or Grid
2. Confused main with body - I was applying "display: flex;" to the body and wondering why it's not reflecting on the browser. And I learned that main is actually different from the body and it is an element which is parented to the body and can have different properties set to it just like other elements. All this time, I was confusing it with the body.
3. Media query - I wanted to have all the elements positioned center horizontally and vertically, so I gave body the body { display: flex; justify-content: center; align-items: center; }. Although It worked fine on the desktop screen, it pushed the content to beyond the top on mobile screen, made almost the 1/3 of the content disappeared. Then I used the media query @media (min-width: 30em) { } and encapsulate the body with the required properties and it works magic. Solved my problem.

What specific areas of your project would you like help with?

I want help with card's position on mobile screen. On the mobile screen, in the design the card has space on all four sides. I gave margin properties to the card to give space on the left and right, but it didn't work for the top and bottom. If the margin is given on the top and bottom, it only shows on the top and ignores the bottom side. ** I would really appreciate if someone help to solve the problem**.

And also I would really appreciate a review on my HTML and CSS. And suggestions to improve it.

What are you most proud of, and what would you do differently next time?

I learn many things doing this challenge.

What challenges did you encounter, and how did you overcome them?

Background pattern were kind of difficult for, especially using pseudo elements. They don't exactly look like the given design, but I tried hard to replicate the original design.

What specific areas of your project would you like help with?

I want to know how else those background pattern be placed. I used pseudo elements on the main "parent" which encapsulate all other elements.

What are you most proud of, and what would you do differently next time?

I'm happy that I'm doing these challenges. I'm learning every time new things.

What challenges did you encounter, and how did you overcome them?

In this project, I faced the responsivity problem. For the exact sizes, there's no problem. The problem occurs in-between these sizes. When you decrease the size of the viewport slowly the picture on the right side starts decreasing in size but the container doesn't shrink and that make the whole design look funky.

What specific areas of your project would you like help with?

Please help me with responsivity. It's so confusing. How to make everything shrink according to the various screen sizes?

What are you most proud of, and what would you do differently next time?

I'm happy that i did this challenge. I forgot to keep in mind the responsivity and I messed up. So next time I will keep it in mind.

What specific areas of your project would you like help with?

I really want help with responsiveness.

What are you most proud of, and what would you do differently next time?

I'm happy that I was able to finish this challenge and tried to replicate original one. Next time, I will try to step back and analyze before diving in writing the structure and style. Patience.

What challenges did you encounter, and how did you overcome them?

I had a lot of confusion using pseudo elements but in the end I made them work.

What specific areas of your project would you like help with?

I want a strong feedback on HTML semantics and want to know whether my project is neat or not. I would really appreciate if someone helps me remove the redundancy if there is any.

What are you most proud of, and what would you do differently next time?

I'm happy I done this challenge even though it doesn't totally turned out how I wanted it. This one is kinda challenging.

What challenges did you encounter, and how did you overcome them?

Many challenges: responsiveness, paragraph width, the gradient effect, width of the elements.

What specific areas of your project would you like help with?

I want help with element's width and its children's width. Like how can i stop elements basing their width on children's width.

In this project, I wanted to assign the width of the paragraph individual to its parent element but somehow it's not happening. If i change the width of the paragraph, the card element which is holding everything inside bases its width on it. How can I modify the paragraph's length independent of its parent's width?

By the way, I'm using the free version. So I'm just guessing the measurement of elements.

What are you most proud of, and what would you do differently next time?

I'm happy that I've done this challenge.

What challenges did you encounter, and how did you overcome them?

I faced the challenge of html semantics, layout and responsiveness.

I messed up the layout by not encapsulating the entire content into one parent container. I was trying to do it individually like having all content in two container and then trying to match their sizes. However, it turned out to be a huge problem. No matter what i do, the sizing won't match because of the content. Then after, thinking about the problem a lot I somehow came across the idea of putting everything into one container and inside that container I can give the two main containers that divide the whole content into two sections, properties of width: 100%. It did solve the problem of sizing.

What specific areas of your project would you like help with?

I want help with responsiveness. I want to know whether I should go first for the mobile or desktop.

No matter what I do, I could not accomplish exactly the same design as the given challenge. The main problem I faced is the sizing. I can easily replicate the same design for the desktop, but when it comes to mobile the things do not match exactly.

I really need feedback!

What are you most proud of, and what would you do differently next time?

I'm happy that I did this challenge. Next time, I will be more careful about structuring the layout keeping the correct semantics.

What challenges did you encounter, and how did you overcome them?

My biggest challenge was social links and their styling. I kinda muck up them.

What specific areas of your project would you like help with?

I would appreciate feedback on the layout and html semantics.

What are you most proud of, and what would you do differently next time?

I'm happy I finished this challenge.

What challenges did you encounter, and how did you overcome them?

This one was easy

What are you most proud of, and what would you do differently next time?

I'm happy that I did this challenge. Next time, I will try to spend some time to do thorough analysis of the Webpage and try to visualize what tags and where they can be used to keep the semantics intact. I also realized later that I forgot to put accessibility tags. Next time, I will create a note and will write down all the essentials before jumping in directly. So that I don't forget.

What challenges did you encounter, and how did you overcome them?

My biggest challenge was the layout. I spent a lot of time figuring out how and where the things will go. I tried dividing content into sections, mainly three sections and then each section has a element which holds everything in a particular section. This way, it makes work easy and I was sort of relieved that in each section I was only paying attention to certain content rather than all of the content at once.

I also got confused when writing custom properties. I'm still finding out what names I can use to naming the common properties like font-sizes, font-color and font-weight. I need something that I can use in any project without needing to modify it every time, something consistent reusable.

Another problem I came across during this project was that there was inconsistency. The fonts, color, sizes and weightage were all different. I was struggling with the ideas that whether I should target them individually through classes or I should make utility classes and then do the modification where it is required. I was confused and used the combination of both.

What specific areas of your project would you like help with?

Q. How to divide the content properly? Q. What is the best way of modifying content?

What are you most proud of, and what would you do differently next time?

This is my very first project which I entirely did by myself. I'm happy that i was able to complete it.

What challenges did you encounter, and how did you overcome them?

I struggled with setting width of the container which holds everything in it and make it responsive to the different screen sizes. At the end, I managed to do it without breaking any content when it changes the screen size.

What specific areas of your project would you like help with?

I would like to know more about setting the width of the content and how to make it responsive.