All solutions

I have added a feature where your theme preference gets saved to the Local Storage where the theme stays dark upon page refresh. However, I couldn't quite get how to complete the following requirement of the challenge "Toggle color theme to their preference".

Wasn't sure whether to use a prefers-color-scheme media query on the variables decaled in body.dark or check for it in the JavaScript.

Would appreciate any insight or tips on how to check for the systems color scheme preference and apply it to my code.

Struggled with positioning the bg-pattern-circles.svg background image as it seemed that changing the background-position had no effect.

Seemingly I also struggled with off-setting the position of the two main 'Feature' sections. I used absolute positioning and moved the element to the right and left respectively. Do you an easier method to offset the image's position beyond the margin line without any overflow? Would be so thankful.

This challenge was definitely the hardest so far, completed the main calculator functionality in a few hours but then was fixing bugs for a couple of days to make it perfect.

Please let me know if you find any bugs, I have tried to make this tip calculator as bulletproof as possible. It only accepts positive numbers for each input field, and doesn't accept periods . for the 'Number of People' field.

Definitely underestimated this challenge, looked like an easy design to begin with but it got harder and harder going from Mobile to Desktop widths.

Ended up once again using inline SVG's as I couldn't get anything else to work. At the start I tried doing the following:

1. Adding an id="img" to the SVG file itself
2. Changing the fill value to fill="currentColor"
3. Calling the SVG in HTML

<svg class="svg-image">
     <use xlink:href='../images/nameOfImage.svg#img'></use>
</svg>

And then changing the fill value by targeting the SVG's class name.

It all worked well however I couldn't manipulate the SVG's height and width even by hard coding these values. It kept getting the default SVG 300x150 values applied by the HTML.

Used BEM and 7-1 SASS Architecture for this project and focused on code reusability - especially for the Headings, Paragraphs and buttons.

Struggled a bit with the social icons, and ended up using them as HTML inline svg elements - not sure what's the best practice.

Tried using the 7-1 SASS Architecture for this challenge and it definitely was something different that I had to wrap my head around.

Need to work on producing a more semantic HTML code as I had to "hack" the HTML by adding some classes and empty div's here and there when writing media queries from Mobile to Desktop.

Tried using % values for the width's of the 2 main boxes to make it stretch and shrink depending on screen size. However couldn't figure out the positioning of the "speech bubble" since it is 'position: absolute' it ended up being all over the place, so just set fixed widths in rem's.

Not the ideal solution as it lacks the responsiveness but I was all out of ideas :-(

First time doing a mobile first approach for these challenges, and I must say that writing media queries from mobile to desktop seems so much easier and requires less code.

Ran into some issues where the two white testimonials (Kira and Jeanette) had different text color. Hacked it by adding additional classes in the HTML - not sure if it is the 'right' way of doing things though.

Was surprised that writing media queries and adjusting the desktop layout took such a short time I decided to spend some extra time and added some simple animations.

This is my last "Newbie" challenge and will be moving on to the "Junior" challenges after I get a bit more comfortable with JavaScript!

Excited to try doing full landing pages rather than just singular components!

Encountered a little problem with the container/card height when the FAQ elements start growing so, had 3 different solutions for that:

1. let them overflow out of the container and become invisible
2. set 'height: auto' on the container - this would move the illustration up as the FAQ elements grow and so does height of the container
3. set 'overflow-y: auto' to add a scrollbar

Ended up going with solution number 2, mainly because the scrollbar is super ugly even after spending time trying to style it.

Feedback is welcome as always!

Back at it again after a short break due to impostor syndrome :)

Got much better at positioning these background SVGs and think I nailed this one. Learned a pretty decent 'trick' recently of increasing the opacity of the SVG itself or changing the color to a bright one so that it is much easier to see and position - and then switch it back to original after.

Would appreciate feedback on my HTML in particular, tried going for a more semantic HTML approach this time. Also, am I using too many divs? Sometimes I feel like there's too many of them.

Thanks in advance!

Hey guys,

First time doing anything with JavaScript, watched a few tutorials beforehand on how to select HTML elements using JS and decided to give it my best.

I've ran into a problem where I couldn't select what I wanted and had to do a little re-shuffle in my CSS, where I styled the error messages/borders using the element selectors instead of classes as usual.

Please let me know if my JavaScript is readable enough, took way too much time trying to come up with good naming conventions but ended up confusing myself :)

Thanks!

Decided to go with pure HTML & SCSS email validation for this challenge, I know it is not perfect as it does still accept some incorrect formats, however I will test my JS skills on the next signup form challenge.

Struggled a bit to position the background pattern SVG, it looks alright on tablet and mobile but couldn't figure out how to make it smaller without it overflowing or being cut off.

Also, not sure if I could do anything else to the hero image to stop it from shrinking so much.

Thanks in advance for any feedback!

First time using SVG's and struggled to make them respond to screen width, especially the illustration. Can you let me know if my use of SVG's is good or how I could improve on it?

Tried yet another animation, this time decided to animate the button with a gradient "breathing" animation.

Once <810px and making the screen smaller and smaller the illustration gains top and bottom margin and not sure how to fix to stop it from pushing the text down.

Also, in these challenges when it says "Desktop: 1440px" width in the README.md should I be doing max-width:1440px on the body to mimic the design?

Added a few simple animations purely as part of practice, I know they may be impractical but adds just that little bit of interactivity to the design.

Had some trouble finding the perfect blend-mode & filter, let me know if you have found the 'perfect' mix for that image. I ended up using:

mix-blend-mode: multiply; filter: opacity(0.8);

And set the background color of the div to the 'Accent' color from the style-guide.md.

Let me know anything I could improve on!

First time using CSS Grid on a project. Used it for both the Desktop & Mobile design layouts.

Added a few more colors to match the design better. Basically decreased or increased opacity of the colors from the style.md.

Also, added a simple :hover and :active state on the button.

Let me know if I could make my code any better or clearer.

Looking for any feedback on how to improve my code!

Tried practicing using different CSS grouping selectors, in this challenge I used the direct children selector ( > ) to give each card padding, and then the :nth-child() to give each card their respective background color.

Hey fellow coders,

This is my first project from Frontend Mentor after escaping the "tutorial hell". Timed myself on this one and from start to finish it was roughly at the 2 hour mark.

Spent the last 30 minutes playing around with the border-top-color trying to use :nth-child() and :nth-of-type() on the &__content element, but couldn't figure it out so ended up using a @mixin.

I used different width px's for the Media Queries, is that alright?

How would you rate my code readability? Is it easy enough to understand?

Anything else I could have done to minimize reusing the same code pieces, or simply making it shorter?

This will be my first code review, so looking forward to any tips and tricks.

Thanks!