All solutions

Technologies

• React
• React-Router-Dom
• Framer Motion
• HTML5
• CSS3

Challenges

The Space Tourism Multipage Website challenge presented a variety of difficulties throughout the development process. Some of the main challenges encountered include:

• Design Implementation: Translating the provided design into a fully functional website required attention to detail and careful consideration of layout, colors, and typography.

• Responsive Design: Ensuring that the website is visually appealing and functional across different screen sizes and devices required implementing responsive design techniques.

• Animation and Transitions: Incorporating Framer Motion to bring animations and transitions to the website added complexity to the project, requiring careful planning and execution.

Learnings

Working on the Space Tourism Multipage Website challenge provided valuable learning opportunities. Some of the key takeaways from this project include:

• Advanced React Concepts: The project allowed for the application of advanced React concepts, such as component composition, state management, and React Router Dom.

• Framer Motion: By integrating Framer Motion, I gained hands-on experience with creating smooth animations and transitions, enhancing the overall user experience.

• Responsive Design Techniques: Implementing responsive design principles improved my understanding of building websites that adapt to different screen sizes and devices.

Technologies

• React
• HTML5
• CSS3

Project Details

The Interactive Card Details Form challenge turned out to be more challenging than anticipated, especially from a CSS perspective. I found it particularly difficult to handle the positioning of the credit cards and the accompanying information.

I'm uncertain if my approach to positioning the cards and the information was the most optimal solution. I would love to see how others have tackled this challenge and learn from their approaches. If you have any insights or suggestions regarding the CSS implementation, I'm open to feedback and eager to improve my skills.

Despite the challenges, I found this project to be a great learning experience. It pushed me to apply my CSS knowledge in a practical way and forced me to think critically about layout and positioning. I'm grateful for the opportunity to work on this project as it provided valuable insights into CSS techniques and best practices.

I have previously completed several intermediate and advanced coding problems, but this challenge posed a unique set of difficulties, particularly in terms of CSS. It served as a reminder that there is always room for growth and improvement.

Overall, I thoroughly enjoyed working on this project and gained valuable knowledge from it. It allowed me to enhance my CSS skills and expand my problem-solving abilities. I'm excited to continue learning and tackling new challenges in my coding journey.

Technologies

• React
• HTML5/CSS3
• Google Sheets
• Google Script

Comments:

The Newsletter Signup Form challenge turned out to be more challenging than expected, especially when I accidentally deleted the entire project before deploying it. However, it was still a fun and rewarding experience. As an additional feature, I went beyond the basic requirements and created a way to store the submitted emails using Google Sheets and Google Scripts.

Instead of building a traditional backend, I used Google Sheets as a simple database to store the email addresses. I wrote a small piece of code using Google Scripts that allows the form submissions to be saved directly into a Google Sheet. You can check out the Google Sheet LINK HERE to see the collected email data.

If you're interested in how I made it work, I have included the script's code in my repository. You can take a look and try it out for yourself. This approach offers an alternative way to handle backend functionality without setting up a dedicated server.

I welcome any questions, comments, or feedback you may have about this project.

Technologies Used

• React
• Axios
• IP Geolocation API
• React Leaflet

Project Experience

Working on the IP Address Tracker project was an enjoyable experience from start to finish. With my prior experience using Leaflet, the project felt familiar and straightforward, which made the development process smooth.

I was pleasantly surprised by how quickly I completed the project. The design and functionality of the IP Address Tracker came together seamlessly, allowing me to achieve the desired results efficiently.

However, I did encounter a few small challenges during the project. One of the most annoying ones was finding a suitable tile layer that closely matched the reference image, it took some time, but eventually i was able to find a tile layer that looked closely similar to the one on the design.

While I'm happy with the progress made on this project, I believe there is still room for improvement. In the future, I may revisit the IP Address Tracker to explore additional features and enhance its overall functionality.

Technologies Used

• React
• HTML5
• CSS3
• Bootstrap

Challenges and Learnings:

One significant challenge encountered during this project was customizing Bootstrap's standard CSS to achieve the desired modifications. Specifically, adjusting the side navbar's format and icons proved to be difficult. Overcoming this challenge required careful inspection and identification of the necessary CSS rules to overwrite without affecting other elements on the page.

Another challenge arose from the decision to utilize Bootstrap's buttons instead of creating custom ones. This choice added complexity and limited flexibility in achieving the desired button styles. In hindsight, creating custom buttons would have been a simpler approach.

Additionally, managing Bootstrap's default padding and margin settings presented difficulties in achieving a symmetrical and balanced design. Adjustments had to be made to ensure the page appeared visually harmonious.

Despite these challenges, the project overall was straightforward, leveraging React, HTML, CSS, and Bootstrap. It provided valuable experience in customizing and extending Bootstrap's components while developing a responsive intro section with dropdown navigation.

Technologies Used:

• React
• HTML5
• CSS3

Challenges and Notes:

The development of this project was relatively easy, and I didn't encounter any significant issues. However, due to the limitations of the free account on Frontend Mentor, I didn't have access to the proper sizes for the product card. As a result, some adjustments may be needed to ensure the card's dimensions match the design specifications accurately.

Additionally, since the specific colors for buttons and text were not specified (didn't look accurate), I made assumptions and used default colors in the project.

Despite these minor challenges, the project progressed smoothly, leveraging React to create reusable components and CSS for styling. Overall, it was a great experience developing this product preview card component.

Technologies Used:

• React.js
• HTML5
• CSS3
• JavaScript

Project Experience

The development process for this project was relatively straightforward. With React.js as the primary framework, it allowed for efficient component-based development and state management.

One notable challenge I encountered during the project was figuring out the appropriate sizing for the cards within the dashboard. It required careful consideration to ensure a visually balanced layout while maintaining a responsive design. By experimenting and fine-tuning the card sizes, I was able to achieve the desired aesthetic and functionality.

Overall, the project progressed smoothly without any major difficulties. The utilization of React.js provided a solid foundation, making the implementation of the interactive dashboard and time tracking features more manageable.

Technologies Used:

• React.js
• HTML5
• CSS3
• JavaScript
• Bootstrap

Challenges: Throughout the development of this project, I encountered some notable challenges, with one in particular standing out. The most significant hurdle I faced was ensuring that the project achieved a responsive design while relying solely on flexbox instead of grid. By utilizing flexbox, I aimed to create a flexible and fluid layout that seamlessly adapts to various screen sizes.

Working with flexbox required careful planning to ensure that the components scaled well and looked great on all devices. It was a bit tricky, but I managed to achieve the desired responsive design without using advanced grid systems.

Apart from that, the overall development process was relatively straightforward. I used React.js as the foundation and Bootstrap for styling, allowing me to create an attractive news homepage with consistent components.

By overcoming the challenges and leveraging the strengths of React.js and Bootstrap, I successfully delivered a responsive news homepage that meets the project requirements and provides a user-friendly experience on different devices.

This was a fun easy project, although it took me a lot more then expected, am still having issues with the sizes since am still on the free account version of frontendmentor.io. How is everyone else handling this issue?

What did you find difficult while building the project? Button arrangement was difficult going from desktop to mobile

Which areas of your code are you unsure of? button arrangement

Do you have any questions about best practices? State management

What did you find difficult while building the project? The most difficult part is the measurements since their not provided to regular accounts(Pro users only).

Which areas of your code are you unsure of? The measurements and some color looking off as well as the font

What did you find difficult while building the project? project was straight forward and easy to build

Which areas of your code are you unsure of? some of the formatting might have been a bit excessive, i went with different sizes with fonts and spacing between some divs were not exact