All solutions

What are you most proud of, and what would you do differently next time?

A new week a new challenge!

Yet another small, but beautiful landing page that was really fun to build out ! This was a good workout for my HTML/CSS skills, and I can feel myself getting much better and comfortable with each practice. This one was took me much faster to code up as there were many reusable components in this layout such as the cards and the buttons. If I had to do something different next time, it's to rest instead of code when I'm actually ill haha

What challenges did you encounter, and how did you overcome them?

The toughest part of this challenge actually was trying to get linear-gradients to transition. I learned today that it's not actually supported, though there is a workaround that I tried exploring ! Though I didn't quite get it to work, I'll look more into it soon. Nonetheless, I still managed to finish the landing page much faster than usual, so I think that's a great sign.

What specific areas of your project would you like help with?

All feedback are welcome and deeply appreciated!

What are you most proud of, and what would you do differently next time?

This FAQ Accordion challenge was a small and rather simple one, in the sense that it didn't require as much CSS and layouts, like some of the other full landing pages I've done. However, I was tempted to try it out anyways, as I knew it would be a test of my HTML and functional CSS skills ! This challenge was meant to be done with Javascript, but I knew it could be done with only HTML and CSS, and I gave it a go ! This was also a free challenge, meaning I did not have access to a Figma file this time around, and had to practice eye-balling the dimensions !

What challenges did you encounter, and how did you overcome them?

• Functional CSS As I mentioned, this challenge was meant to be done with Javascript, but I knew it could be accomplished with just HTML and CSS, with a few tricks. I was aware that I could use the 'checkbox method' in order to accomplish this, utilising input type="checkbox", label for, and the :checked: pseudo-class, in order to simulate click events ! That being said, it's my first time actually using this trick on my own, so I had to take my time with it, and I'm happy with the end result !

• Background Positioning: I had some issues trying to get the background image to properly scale with with the viewport as I tested for responsiveness, in the end, with a few tweaks using background-size, I managed to get it done.

What specific areas of your project would you like help with?

All feedback are welcome and appreciated !

What are you most proud of, and what would you do differently next time?

My 5th challenge done on Frontend Mentor!

This FAQ Accordion challenge was a small and rather simple one, in the sense that it didn't require as much CSS and layouts, like some of the other full landing pages I've done. However, I was tempted to try it out anyways, as I knew it would be a test of my HTML and functional CSS skills ! This challenge was meant to be done with Javascript, but I knew it could be done with only HTML and CSS, and I gave it a go ! This was also a free challenge, meaning I did not have access to a Figma file this time around, and had to practice eye-balling the dimensions !

What challenges did you encounter, and how did you overcome them?

Functional CSS As I mentioned, this challenge was meant to be done with Javascript, but I knew it could be accomplished with just HTML and CSS, with a few tricks. I was aware that I could use the 'checkbox method' in order to accomplish this, utilising input type="checkbox", label for, and the :checked: pseudo-class, in order to simulate click events ! That being said, it's my first time actually using this trick on my own, so I had to take my time with it, and I'm happy with the end result !

Background Positioning: I had some issues trying to get the background image to properly scale with with the viewport as I tested for responsiveness, in the end, with a few tweaks using background-size, I managed to get it done.

What specific areas of your project would you like help with?

All feedback are welcome and really appreciated !

What are you most proud of, and what would you do differently next time?

My fourth challenge completed on Frontend Mentor !

This one was really fun to build ! I was really attracted by it's beautiful design and I really had to try this one out. It looked intimidating at first but I managed to pull through somehow :D ! If I had to do something differently next time, maybe plan the structure a little better. After my last challenge , I learned the importance of planning out my code structure, but there's always room for improvement !

What challenges did you encounter, and how did you overcome them?

This one was a real test of my dynamic layout skills ! In my opinion this challenge tested my ability to dynamically code layout changes beyond just flexbox and grid, as I had to find a way to change the layout with absolute and relative positioning along with the media queries. I also used a lot of background-position property and explicit sizing in order to match my images with the design. I'm not sure if it was meant to be that way, but I couldn't find a different way to do it. If someone knows and would like to give me feedback on anything at all, I'd greatly appreciate it !

What specific areas of your project would you like help with?

Any feedback is much appreciated !

What are you most proud of, and what would you do differently next time?

A new week, a new challenge !

This is my third challenge on frontend mentor, and this time, a premium one! That means I was finally able to start working with a figma file, and it was my first time as well. It's a different experience learning to convert a figma file into code, as I had to take some time to get used to it, but it also meant that I didn't have to waste so much time guessing the margins/paddings/font-sizes and all that good stuff !

If I would do something differently next time, it's once again spending less time to make it as identical to the design as possible, as sometimes it's just impractical considering I'm still learning. Also, I didn't plan this challenge very well, as I kept improvising and changing my code as I went, and I tried to keep it as simple as possible. As a result my code ended up being messy , but going forward I will take some time to plan it out more. Nonetheless, I was proud of finishing this piece, and it's beautiful to look at !

What challenges did you encounter, and how did you overcome them?

I encountered a few challenges, first of all with responsive images. This challenge was a bit tricky, as I learned about the limitations of the picture element, so I had to come up with a different way to replicate the desktop version of the hero after finishing the mobile/tablet version. I also had issues replicating certain parts of the layout, specifically the desktop footer ! I couldn't quite get it to match the design, and I ended up having to hard-code certain elements in the footer, but it felt like I had no choice. And the last issue I encountered was trying to position the background image to match the design. I tried using the background-position property, and played around with the values, but it usually meant creating a gap around the entire footer, leaving a white space, so I left it as it is in the end. Nonetheless, I'm really proud of this and if anyone would leave me any feedback, I would really appreciate it ! :D

What specific areas of your project would you like help with?

As mentioned above, any feedback at all would be greatly appreciated !

What are you most proud of, and what would you do differently next time?

Another day another challenge completed !

This was another good, simple and fun challenge ! I'm proud of challenging myself by using grid, instead of flexbox, even though I instinctively knew how to use flexbox to do the layouts in both mobile and desktop, but I knew that it probably would be more fun to use grid instead, and I managed to do it so I'm happy about that.

Once again, something I would do differently next time would be to spend less time guessing the margins/paddings and spacings because it really does take a lot of time, and it's probably impractical to spend hours getting the pixels perfect. However, I am really happy with this result, I think I did even better than my first challenge so I'm satisfied :D ! I'm hoping someone would take a look and give me feedback again, that's the most exciting part !

What challenges did you encounter, and how did you overcome them?

I attempted this challenge using grid, something I'm not as confident with as with flexbox, however I knew I had enough knowledge to attempt it, and I'm happy I did ! I learned a lot along the way , made some silly mistakes with grid-rows but a moment of realization, and a facepalm was all I needed to correct those. I also spent quite some time trying to replicate that line break at the top, but I managed to learn how by reading an article on digitalocean, so in the end I really did learn something new !

What specific areas of your project would you like help with?

Honestly, any feedback at all would be great ! It's really the most exciting part of all this, having someone to look at my work and review it would be amazing and much appreciated :D

On to the next one !

What are you most proud of, and what would you do differently next time?

My first challenge on Frontend Mentor !

I'm proud of taking the time to make it look as close to the design as possible, without using the figma file. If I were to do something differently next time, I would probably spend less time trying to get the perfect spacing sizes as it's probably impractical to spend hours trying to make it look perfect. That being said , I would love some kind of code review by anybody to help me improve my code :D. On to the next one.

What challenges did you encounter, and how did you overcome them?

I actually had issues with responsive images, but I managed to fix those by reading up on mdn web docs.

What specific areas of your project would you like help with?

Any kind of code review and feedback at all would be appreciated. Although for such a small project such as this one, I'm not surprised if no one takes a look haha !