All solutions

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

A simple yet interesting challenge. 😍 I will explore further how to customize icons from react-icons.

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

🤣As silly as it sounds, I figured out today that I can wrap an inside the , making it easy to position the error message.

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

I had submitted a solution earlier which was only compatible with the desktop version. However, I am happy that I managed to find the time to make the necessary adjustments to ensure responsiveness across all devices. Additionally, I am happy that I implemented my solution using React, which made the cards dynamic and easier to create new ones in the future by simply adding new data in the Data.jsx component.

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

I am glad I have managed to fully implement the desktop version of this landing page.

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

I am yet to complete the mobile version fully.

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

This task demands careful attention to detail. Creating the layout was straightforward. I enjoyed working on it.

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

Applying the background colors was difficult, but I used opacity to try and match the design even though it isn't perfect.

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

I am unsure if borders are only applied to the corners due to the low image quality. How can I achieve this effect?

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

I worked on this project without the Figma sketch files and it's a bit challenging to achieve pixel-perfect implementation of the design. However, I am always trying my best to pay close attention to detail. Nevertheless, I am pleased with the progress I have made so far and it's even more interesting that I have been able to complete the project in less than 45 minutes.

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

Implementing the overlay was a bit tricky at first but upon trial and error, I managed to get it so perfect with the use of percentages.

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

Any feedback is greatly appreciated!!!!!😁

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

I think I am beginning to understand that it might be better to use relative units like percentages vw and vh when building responsive websites unlike px unless you want the same design and sizing on all different viewports! I use a 100dvh on the image but for some reason, it still has a very small overflow on the y-axis.

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

I had a challenge with aligning all the contents in my input field. I am not convinced the solution I came up with was really the best! I always try to avoid using CSS positioning like absolute, relative, and negative px but to achieve the design I used that hence why I am doubtful if my solution is the most efficient one.

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

I initially wanted to organize the different components of my layout in the following manner:

1. Header section with the logo
2. Hero section with text and image
3. Form section with just the input and buttons.

However, I encountered difficulties using the grid to achieve this layout. I am wondering if there is a better way to organize my components or if this layout is simply unnecessary.

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

I underestimated this challenge. However, I'm happy that I was able to add functionality to close the pop-up by clicking on it. Perhaps it would be more effective to add event listeners to the entire document that triggers the pop-up to close rather than just on itself. Additionally, I realized towards the end that my active states were incorrect, and I will be correcting them.

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

I had trouble figuring out how to position the pop up and I still haven't figured out how and once I do, I will correct this error.

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

How can we keep the footer at the bottom and maintain space from the top? I tried padding-top, margin-top, and margin-block but it still didn't work. This is specifically when the viewport is small, like on SE.

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

I found this project to be quite interesting! Although it wasn't the typical beginner's typo challenge, it was still worth it. I gained a lot of knowledge about managing React state and props in this project. I even added the feature of being able to close the modal/popup window. It feels great to have accomplished that! 😍

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

🤣At first glance, my code for closing the modal can be confusing. However, upon further examination, I realized which state we were tracking and how it was being applied. I will be adding the responsiveness to the mobile version!!!!!

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

I am really happy that I am now paying close attention to design details! I believe I was able to get my solution very close to the original design. I experimented with both mobile-first and desktop-first approaches and still achieved the desired result! So I am glad that I am finally understanding responsiveness, but I also know that I still have a lot to explore and enhance my skills. 💪🏽

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

None

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

Any feedback on how I can improve is welcome.🤗

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

I'm happy😊 to say that I successfully completed the challenge. In my previous projects, I had been struggling with layouts and making my components responsive. As a student of UX, I'm starting to realize the significance of usability and UI design. Therefore, it's important not to just focus on the functionality and neglect the accuracy of the design. I will be adjusting the minor errors in my mobile version (footer and lists)

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

I had some trouble closing my modal, but I managed to solve it. I realized that I didn't need to re-render the form, since it never disappeared in the first place. It was just blurred out using CSS in the modal. So, I just had to remove the modal without touching the form, except for resetting it.

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

Any feedback is greatly appreciated!

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

Completing everything in less than 30 minutes made this simple project interesting!

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

I guess I slightly missed the text indentation

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

Any feedback is welcome

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

Wow! 🤩I am thrilled to have completed this challenge. Although the design may not look exactly like the original design (in terms of typography and color palette), I am happy that I was able to make the layout as close as possible to the original.

Through this process, I learned several valuable lessons, including:

1. Proper background image positioning
2. The importance of mobile-first design
3. How to use CSS positioning for the footer
4. Utilizing Flexbox for both the image and name section, as well as centering the grid.

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

I faced a major obstacle🙃 during this project while making the grid responsive. However, I found a solution after reading an article on the mobile-first approach https://travishorn.com/responsive-grid-in-2-minutes-with-css-grid-layout-4842a41420fe. Initially, I tried the desktop-first approach and completed it within 30 minutes. But when I tried to make it mobile-friendly, it turned out to be a nightmare🤣. On the other hand, starting with mobile and then moving to desktop made the process easier. I hope to become comfortable with both approaches soon.

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

Any feedback is greatly appreciated! I am here to learn. I also wish to do this project in React, any suggestions are 🤗

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

I am proud that I am now able to quickly identify the structure of my Apps before I even begin to write the code. The only problem I am still having is making the grid responsive.

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

How can I add an overlay to my images? I've tried a few methods I found online, but I can't seem to get it to look like the design. Could someone please help me with this? Also, what's the best way to make a CSS grid responsive?

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

I am glad that I managed to center the grid inside a flexbox.

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

I wasn't able to make this design fully responsive as per the requirements. Although I was able to make it visually similar, upon closer inspection, you will notice that the headings are not evenly spaced.

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

Can someone please explain max-width and min-width to me? I find it difficult to determine whether we should specify the size of our components, such as cards, or if the overall size of a container can be determined through padding, margin, and property values like fit-content.

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

I am glad that I was able to make this component responsive as needed. Responsiveness is still something I am still working on(getting better) especially if I use React to do my projects. I am so glad that I managed to learn more about positioning. I usually cheat with align-self to properly position my footer but I fully understand relative and absolute(a bit of a pain🤣).

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

I had a challenge with setting the border-radius to my items on viewports

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

Any comments are welcome. I am here to learn🥰

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

I think I am beginning to understand how Flexbox works and also CSS positioning.

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

Positioning two background images was a bit of a challenge but through exploring the internet I got ideas and hints about the background:url() syntax

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

Any feedback is greatly appreciated!

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

Yet another simple-looking challenge yet so much to learn from. Doing this project in React was a whole adventure and quite challenging. Firstly, because I wanted my App to be dynamic so instead of manually creating each card, I decided to create a Data component with an array of objects. Secondly, I had to map each object and render it with predefined styling classes. The logic to apply custom styling to each card was a bit difficult but I managed to figure that out.

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

I really would appreciate it if someone could look at my code and help me make the App responsive because everything that I tried just didn't work, perhaps it's because of the way I structured it in React Specifically🙃. Applying Media queries is never an issue when I am doing plane HTML and CSS (without React).

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

Media Queries when using React

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

I am happy to say that I can now finish some of these beginner-level challenges in less than two hours. I always prioritize code maintainability and scalability, and I aim to avoid redundancy. My ultimate objective is to develop a programmer's mindset, where I can break down problems into smaller units and devise solutions before even opening my code editor.

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

I had trouble with matching the colors but I believe I did manage to get that resolved

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

This was a simple yet interesting project. I ended up adding some unnecessary animations to the image but I am glad I got carried away and fell in love again with CSS 🥰. I also added a dynamic date to the "published year" section and my footer(year only) so that it automatically updates daily. My footer uses icons from material UI.

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

I still need to improve on media queries, I honestly spend a lot of time making my Apps responsive. If anyone has good resources I could refer to, that would be appreciated!

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

I know I could have easily done this using HTML and CSS without making use of React but I saw this as an opportunity to apply what I am learning in React. I am proud that I was able to set up the project, and group components, and complete the project in less than an hour.

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

The only challenge I faced was fully understanding the mobile design making it responsive.