All solutions

I've taken a different approach to this challenge by tackling different categories such as text-size, spacing, layout, etc individually and making use of variable classes. Instead of working my way from the top, down.

How do you usually approach a challenge?

I'm quite chuffed in my solution. Having not much experience with grid and relying mostly on flexbox I think my solution came out pretty great, however I'm sure there are areas in which I can improve.

Let me know your thoughts :)

I wonder if there's a better way to create an color overlay onto an image. What I've done was lower the opacity of the image and add a background color to show through. Let me know if there is a better way to achieve the same or better :)

I've created my first landing page using HTML & CSS.

I'm still getting use to making my site responsive and learning about media queries.

My question to you: Are media queries meant to be minimal code to achieve responsiveness or does it matter if its a thousand lines of code (As long as you achieve your goal)?

I hope my question makes sense.

I learned to get better at using media queries to make this design responsive for both mobile and desktop. For the first time I didn't have to struggle too much with making it desktop friendly which is a big win for me.

What do you think of my code? Would be happy to hear your thoughts!

This was a fairly easy challenge. I didn't find much difficulty although if I had to state at least something challenging it would be finding a solution to bigger vs smaller font size in the monthly subscription section.

This was a challenging challenge. The most tricky one that I've done so far of the Frontend Mentor challenges. I started by identifying which elements would share the same property in order for me to write cleaner and more efficient code. Then worked my way from left to write, focusing on the elements first on the left container and then working on the elements within the right container. Small issues and challenges came up but were easily solvable. Once I got the summary container is where I faced my first real challenge. Although the styling was pretty straightforward, working out the HTML was a bit confusing as I struggled to figure out what was the best way to make it manageable.

The next challenge I faced was being able to make it responsive which took a bit of tweaking but managed to solve it quite simply with a change of a few properties.

Overall this was a fun and challenging task of which I enjoyed working through.

What was most tricky for me was the Annual Plan section. It consists of three different elements which has to be laid out horizontally. I played around with grid for this solution in addition with grid-template-columns and succeeded . I hope to get more advanced with grid and flexbox in the future.

Overall I am happy with the result however I am concerned with the amount of code that is used to produce the result. I'm sure there are much better ways to write efficient code. Are there any areas where I can improve on this within my current code? I would love to hear your thoughts and suggestions.

This challenge was relatively easy based on what I already know about HTML & CSS. Styling this was pretty straight forward when it came to the fonts, font-sizes and the image. As well as keeping this responsive for desktop and mobile.

My process was to complete the layout before centering the design. Once it came to that did I hit my first speed bump. Centering elements on a page seems to be a simple process however I've always had difficutly figuring it out. From using different methods like flexbox, grid and the famous absolute position. I decided to use flexbox for this solution however in future projects I think I would try absolute positioning again to get a bit of a refresher and to challenge myself more.

Once I was done I had a look at my code again to clean it up and make it more efficient. Overall this was a fun and quick project to build and I am looking forward to the next one.

What is your best case in centering elements on a page? I would love to know how and why you use a particular process to do so.

Happy coding everyone! DevDan