All solutions

** Hello** Another landing page done! Challenging part for this was for sure work with svg files to get those curves on background. Some effort also required section with image and card. But position: absolute solved it!

If you have any tips on what I can do better, do not hesitate to drop a word here

Cheers!

My second landing page. Getting more confident with HTML, CSS. Not difficult as previous one, only header section is a bit tricky with the image splitting on desktop view.

Build with

• HTML
• SASS

If you have any suggestions for code improvements, feel free to share!

First complete page project. This was challenging. Difficult part was to solve how to position middle section and how to prevent overlapping it on footer. Really test your skills you had chance to practice on smaller challenges.

It would be awesome if you could sacrifice 5min and do a quick code review on what I did ok and what I should focus more in the future.

I'd like to know If elements are positioned properly (white box with data left)?

Also have some problems with meter and decided to hide (sr-only) it and build custom one. Is this approach correct?

Fun project to experiment with setting grid-areas.

Good to practice align/justify - self.

Simple desing but lot of new things to test on. Decided to deviate a bit from design and added tablet view (2x2 grid).|

What I trained for this challenge:

• use vite for compiling sass (no extensions)
• clamp() for font-size instead of mediaquery
• first try of 7-1 sass structure
• @mixins, list, if/else operators, loops
• grid layout

Check it and leave comment!

Really nice challenge to learn new stuff and practice html/css:

• grid
• what is stacking context and how to use it to apply hover effect to change background color to gradient
• how to import and what is variable font
• playing with data attributes to apply different colors - alternative to modifier class

Some little differences between solution and desing is because I'm using figma designs not img.

Any comments are appreciated!

Easy project with grid.

Fun project with something new to learn about mixing colors. Mastered two column layout with flexbox.

For this challenge I use pseudo-element ::before for applying overlay background effect on why us section. Also it was nice working with 2 columns with flexbox.

Question for You:

• is my semantic HTML good?
• how about responsive display, is it ok?

Also...

I encourage you to leave any comments regarding my code as it is win-win.

You practice code-review and I get feedback!

This one was really nice for training two column content display and working with background-image depending on what screen width user is displaying our site.

I encourage you to leave any comments regarding my code as it is win-win.

You practice code-review and I get feedback!

Cheers!

Had little problem with paddings and overall html structure, but finally managed to did it. Still not sure if element spacing done on order plan is ok?

I encourage you to leave any comments regarding my code as it is win-win.

You practice code-review and I get feedback!

Cheers!

This one looked easy but wasn't :D These two bubbles was a hard battle. Finally after 2 days I've managed to finish it.

Also I encourage you to leave any comments regarding my code as it is win-win.

You practice code-review and I get feedback!

My process is described in my repo on GH. Check it if you are intrested how I've done it

Cheers!

Any comment appreciated. Nice for mastering mobile first approach.

Biggest challenges was:

• how to proper set media queries
• overlay background over top button

All details about it you can find in my repo ;)

Hope I've done it well. First challenge done. Figma really helped ;)

Any comments appreciated.