All solutions

What a ride! This was my first React project and while there are definitely things to polish up, I am VERY proud of the end-result! I'm also looking forward to revisiting this project in a few months to compare my skills evolution.

The initial proposal of this project was to have a different URL for each planet but I decide to take a different approach to open up scalability (not sure how! new planets would need to appear inside our solar system!)

Instead of hard-coding each page and its contents, I decided to use JSON data containing each planet's information and map through that file using JavaScript/React to render the contents according to the interface actions (navbar clicks, buttons).

I reached the end-result rather quickly but wasn't quite happy with it. I quickly noticed I didn't take advantage of one the biggest selling points of React - components!

Once I had the page fully functional, I started separating my code into different components. Looking back, this is something I should have planned before starting to write code, so that I wouldn't need to backtrack. Definitely a lesson learned for the future!

It does seem like something went wrong with my images folder when deploying the React project to github pages, working on a solution to that! In the meantime, it is built correctly on my personal domain if you're curious: https://planets.brunosantos.dev/

The styling side of this challenge was rather straightforward, despite requiring some extra thinking to display the error icon for empty or incorrect fields.

I did run into an issue where the input background color is changed by the browser's autocomplete function and after doing some research, there doesn't seem to exist a native workaround this yet.

It was also a great practice for my JavaScript skills and helped me get into the habit of deconstructing a big solution into smaller, more manageable solutions.

This project was a great way to put into practice my JavaScript skills by handling promises.

Async functions are incredibly simple yet powerful to use, and certainly a good solution to "callback hell"!

I also tried the same solution using .then and .catch without the async functions which achieved the same results. I am not yet sure when to choose one over the other. Definitely something to do more research on!

Quite a challenging one! The math formula side of things was a bit of a headache, but I definitely struggled the most with switching active states between buttons, and updating the total amounts on the right side as the inputs are changed!

I feel proud of the end result but definitely feel that my JavaScript could be a bit more compact and separated into more reusable components, something to keep in mind for next project!

Making navbars is hard! This was by far the biggest project I've worked on so far, and while making a navbar is quite frustrating for someone with my level of experience, I definitely learned a lot. It was also great continuation practice to handling images and how to properly use absolute positioning.

My confidence in JavaScript is growing steadily and I look forward to doing more exciting things with it!

This project has taken my responsive navbar skills to the next level! Even though the final results are definitely not perfect (you can scroll while the navbar is open), I am still very proud of the evolution of both my skills and thought process when creating a collapsing navbar.

The project overall was not too complicated, but it was great practice with absolute positioning images, which in the past I've felt was an area I wasn't great at.

By far, the biggest challenge with this one was setting up the images differentiation between mobile and desktop.

I tried several different approaches before landing on a divfor each one and giving it a display: none property on the opposing media query.

This helped me realize that there isn't always a "correct" way of doing things and that there are multiple ways to tackle a problem.

The accordion expansion animation is something I haven't been able to improve, as the animation has a "snap" feeling to it.

The accordion initially has a max-height: 0 property which changes to max-height: 500px when active. This is theoreticaly an "unnatainable" max height that an FAQ item will never have, and it´s so the content adjusts itself to the amount of letters in each item.

The animation was a lot smoother when I set a fixed height such as height: 50px when expanding, but this isn't a scalable solution as not every item has the same number of letters therefore needs more/less space.

I am overall satisfied with the final results but do realize there is much to improve on when it comes to preparing my code structure ahead of starting to write it.

My approach was to create 3 divs which acted as columns on desktop, so that I could layout the cards in the way that they are supposed to be in the design

<section class="features">
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="column3"></div>
</section>

But I can't help but feel that there must but a different approach to this that would allow for more scalability in terms of number of cards.

It also limited the tablet layout, as I initially wanted to display 2 cards per row, but this column layout didn't allow for it. Would love to hear your suggestions on how to have all 4 cards in a single container and achieve the intended desktop layout.

• With this project I got to put into practice some Flexbox modifier like flex-grow and flex-shrink. I definitely struggled a bit finding the sweet spots for these modifiers and was wondering if there are common breakpoints you use for the shrink, grow and basis of flexbox?

• Even though it was quite a straightforward design to accomplish, it definitely helped me understand the different ways to position and image on top of other elements.

After trying absolute position, I came to the conclusion that setting a negative margin-top on the image was the approach that required less lines of code, which is something I like to think of for every design.

This approach does have a minor flaw that I couldn't figure out why - if you zoom your browser on the image you'll see that some of the background pattern shines through the profile photo's border - how would you tackle this?

• One thing that I haven't quite understood yet is that the body background color and card background pattern have different color shades depending on the browser, even though I used an HSL color provided by the challenge.

For example, on Google Chrome it has a very teal-ish accent, whereas in Firefox it's leaning towards a light-blue - do you think this is a normal occurence or an oversight in my code?

• My biggest takeaway (and proudest achievement) on this one was being able to write reusable classes that allowed me to style each card on a global scale and just add individual tweaks to each one. As such, I needed some clear, but descriptive, class names. What are you preferences or conventions for creating class names for reusable classes?

• Something that I have been noticing with the challenges of Frontend Mentor is that my solution doesn't always have the same width or height as the design files. Do you hard code the width and height of the containers to match the design (for example setting width: 900px) or just allow the container to naturally grow/shrink and adjust the content size instead?

• This project exposed some gaps in my knowledge on how to handle image scaling. At the very start of the desktop-size breakpoint the image was quite distorted. I would love to know your feedback on how you would approach having it maintain the proportions.

• I also faced an issue on mobile-table sizes where the parent div of the main image had a bigger height than the image itself despite setting it to 100%. My solution was to set the image display to block, but can't help to wonder if this is a bandaid solution?

• This project was a great way to implement semantic HTML elements and more importantly, get into the habit of planning the markup and content structure before writing any CSS styling, having a well-structured HTML really make styling a lot easier. What do you think are the most commonly-used and effective semantic HTML elements?

• It was also my first experience with media-queries, I found it hard finding what are the common max-width breakpoints so the content can scale with the viewport. What are your recommendations for commonly-used screen size breakpoints when making responsive pages?

• My biggest struggle was with the background image, as when scaling the the viewport up & down, the background image starts shifting upwards. I would love to know which modifiers to apply to the background to stop this from happening or if you think it's natural for it to happen this way?

• Hands down the biggest challenge I faced with this one was the hover effect on the main image of the card. I ended up coming up with my own solution for this which was to add a span with position: absolute and opacity: 0 right on top of the image, and then transition the opacity on hover so it becomes visible.

Even though the end product works, I am not completely satisfied with it as it goes completely off-axis when the browser is zoomed in. Definitely a topic to learn more about before the next challenge and I would love to know how you would implement a similar hover for an image!

• This challenge also thought me about the importance of planning out the project and good-structured markup. Although it visually looks similar to the proposed design, I felt that I had to constantly come up with workarounds to cover up the gaps in how I structured my markup.

In a real project do you structure out your HTML before writing any CSS or do you take one thing at a time and add up to the markup as they come?

• I initially struggled with centering the card vertically on the page and after some researching, I found out that by applying min-height: 100vh to the body could accomplish this.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

I'm not entirely sure why exactly this works and if there are any more effective or clean ways to achieve this effect, I would love to know alternative ways to accomplish this!

• This project was also a great to get into the habit of writing CSS variables for properties that I thought I would have to re-use throughout the code.

After reading about it on MDN, their recommendation was to apply these styles directly to the :root pseudo-class. Where do you apply your CSS variables?

:root {
  --white: hsl(0, 0%, 100%);
  --lightGray: hsl(212, 45%, 89%);
  --grayishBlue: hsl(220, 15%, 55%);
  --darkBlue: hsl(218, 44%, 22%);
}