All solutions

Still a beginner 😁

Back with simple challenge!

I've just completed a front-end coding challenge from @frontendmentor! 🎉

You can see my solution here.

Any suggestions on how I can improve are welcome!

This is my first upload of a react project and step/process to learn and apply what I just learned 😀😌

And my third attempt at coding this.

And if you are using React Framework, what are the best practices? Share it!

I don't know why is the background image won't change it's position when the screen is in the specific size. Please let me know if you have any suggestion/solution on it.

I find challenging in aligning the after element on p tag of active item when it is in a mobile view or size. Still now, can't think of any solution(❁´◡`❁)

The illustration image part is kind of the hard part :)

Just got back here in FEM and things got really hard to regain my knowledge especially in CSS Grid

How can I use the picture tag for a different size of images in this landing page? I tried it but it was just displaying two image even though I put a media attribute with different values just like this:

<picture>
  <source media="(min-width: 375px)" srcset="...mobile-image.jpg">
  <source media="(min-width: 1440px)" srcset="...desktop-image.jpg">
  <img src="...mobile-image.jpg" alt="">
  <img src="...desktop-image.jpg" alt="">
</picture>

My second try in this junior challenge. Still getting a hard time in placing the exact position of the image background.

My first one was kind of not good and got accessibility issues so here's a second try with SASS. I should have put box-shadow and more border-radius 😅

It was almost but the goal is to learn more specially in accessibility and html validations.

Happy Testing!

Hello Everyone! This is my second attempt but with SASS making more my self less frustrated and efficient while I was making this.

Happy Testing!

Setting custom properties and utility classes was worth it, kind of saving you from getting more frustrated and it will also make your code readable and less struggle when you want to change some properties values.

Let me know if there is some more improvements I can put on it. I forgot that I should styled the dark theme first 😣😅 Lastly why the layout sizes isn't match with the design? Although I really aligned the design with mine but here it is still not getting the pixel perfect haha. My goal is to learn more but it was more challenging to make the layout accurate with design.

Happy Testing!

I don't know why the layout becomes different when I submit a solution 😑 when I double check what it should look like in different sizes of browsers. Please give me some tips or tricks on how I can improve the layout in different browsers or devices. Is it because of what device you where developing at that will affect the layout of it? I use laptop by the way.

And why does the grid part of pictures are kind of invisible when someone wants the browser theme set to dark?

Thank You!

This was really hard specially in the part where you need to position the background image and making sure it is also responsive. Thanks to Ms. Elaine who gave me tips to utilize the power of width: min(); 😃

Although the layout is kind of decreased in size I still learned a lot!