All solutions

Happy to have completed another challenge :)

Takeaways:

• I further learned how to position elements with CSS grid, as I mainly used grid-areas, which is tricky for this challenge.

• Again realized how important it is to plan the entire project from the beginning, even down to the smallest detail. I spent unnecessary time rearranging code, because of a lack of attention to detail before I started coding.

Questions to the community:

• If there are ways to structure the code more efficiently, I would appreciate if you let me know.

• Do you code all mixins (SASS) before starting to code the layout or do you create them on the go?

• What do you think is a better approach?: Coding the entire HTML markup and then move to styling or starting to code parts of the HTML (starting with the header, for example), styling it and moving on to the next section?

Thank you and have a great weekend! Happy coding :)

Patrick

Learned a lot in this project, it was a bit of a struggle, but I think I managed fine :)

Lesssons learned:

1. Always plan the full project up to the smallest detail, before starting to code. I had an overall plan, but then I had to rewrite a lot of code as I kept going.

2. Learned how to use Figma. I never used it before and I highly recommend getting the Pro subscription and using the Figma file, it is a game changer!

3. Don't show the finished project to your non-coder friends and family enthusiastically, as they don't understand the complexity. They will mostly just see a basic website and not be very impressed :)

Question: I noticed that all of my solutions are always a bit off in the sizing of the entire page, although I usually apply a height of 100vh to the entire page and work on the same size (1440px). The solution looks identical in the browsers dev tools, but once uploaded, there is always an extra space on frontendmentors solution bottom. Any ideas?

And finally, all your feedback is much appreciated, as always!

Happy Coding and happy weekend to all of you :)

Patrick

Started this challenge a long time ago but never completed and forgot about it.

So I decided to start over from scratch. Happy to notice that it took me much less time and effort than the first time :)

All suggestions and feedback are more than welcome!

Happy Coding!

Patrick

Got a nice little practice on CSS Grid again! This time I used the BEM methodology (haven´t used it in a long time).

This was my first time working with JSON data, which I always imagined way more complicated than it actually was.

I am very happy with the resut and as always, look forward to your expertise in form of a constructive feedback :)

Happy coding to everyone!

Took my time to finish this challenge, as I had not been using SCSS in a long time and had to get accostumed to it again.

Most important error I commited: planned the entire project from the beginning, except for the js form validation error message, which is now not positioned properly on all possible screen sizes. Takeaway: ALWAYS plan the entire project from the beginning, leave nothing out. This will save you a lot of time!

All feedback is much appreciated :)

Happy Coding!

Reupload of this challenge, as there were issues with the hosting on Netlify and the solution is not displayed correctly:

Happy with the end result of this challenge.

Had a doubt which I can not seem to resolve. On the CTA Box (last card) there is a box-shadow, which does applies only to the parts of the card which are not overlaying the footer. Is there a way to remove box shadow on specific areas? I tried "clip-path: inset()", but it does not get the job done properly. Happy to hear how any of you managed.

Feedback is of course always very welcome :)

Happy coding!

Struggled a bit initally to get the whole thing centered (not sure where the error was), bit went back a few steps and managed. Overall very happy and learned some new things about grid.

Feedback is very welcome as always!

Responsive landing page, using CSS grid and flexbox in some instances. I found it easier than some newbie challenges. Feedback is always very welcome :) Please note that I don´t use the figma file and go by rough measurements, not exact pixel count. Happy Coding :)

Another Challenge completed :)

I added a box-shadow, as it makes the card pop out more and looks better in my opinion. I struggled initially with the positioning of the background, but then learned that I can place several background images in one element and position them accordingly.

Overall happy with the result. Feedback is very welcome :)