All solutions

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

This is my first landing page. What I would do differently next time is I would start with a plan and set up as this took longer to complete than I expected. For instance, implementing the footer section was particularly challenging as there were many ways to tackle it, and especially deciding on breakpoints and adjustments.

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

Figuring out how to implement the hover color effect on the social links took some creative problem solving. Through this process, I learned about the filter property and used a filter generator to achieve the desired effect.

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

Structure and layout of the sections. Feedback is welcome 😄

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

This challenge only serves as an exercise to use and explore React. Along the way, I learned the use of picture element to group different source versions of the same image. A method that is used to display responsive images. You put the default image in the source tag and the mobile version in the img tag. Though React has nothing to "react", I'm proud to complete this challenge in React.

Feedback is always welcome 😊

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

I'm proud of completing this challenge while trying out new things and stepping out of my comfort zone.

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

I've been using hexadecimals for these challenges but I've decided to experiment with HSL for this one, and I'm not sure if I like it yet. However, I did learn from Kevin Powell the correct syntax of writing it to easily set the opacity, and it's pretty cool.

:root {
  --clr-bright-blue: 245 75% 52%;
}

button {
  box-shadow: 0 1.5rem 2rem hsl(var(--clr-bright-blue) / 0.2);
}

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

Mainly css custom properties. I'm still not confident in my usage of variables. Though Kevin said that you can literally write anything with them lol.

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

This challenge was a practice to apply my latest learnings for the first time, such as developing a mobile navigation menu, employing sass and css custom properties, utilizing rem units for scalability, and bem naming convention. It wasn't perfect but I had a lot fun making it, and I'm proud that I was able to produce this result while utilizing these new technologies.

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

I couldn't have done all of this without Google. There was a ton of Googling involved completing this challenge, and I'm proud to say that most of my searches were a success.

I also learned how to take a step back when hitting a wall. It turns out that a good night's sleep paves the way to the solution. 🤣

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

Sass, CSS custom properties: I'm not sure if I've done it correctly.

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

I'm proud of completing this within just a few hours.

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

Regex and email validation are new concepts for me, and I'm grateful to Google for providing assistance in this area 😆

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

I think I'm getting better at writing "readable" code, and I'm proud of that. 🤣 If you come across any areas in my code that could be enhanced, I would greatly appreciate your feedback.

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

I'm still uncomfortable with creating layouts using grid and flexbox. However, I've found this layout to be quite straightforward. It has been a great example for me to get comfortable with the concept.

I also learned a neat trick to center items other than using flex:

body {
  display: grid;
  place-items: center;
}

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

I decided to build a simple project as a practice to implement correct HTML semantics for accessibility. I hope I have achieved that goal. The more I learn about accessibility and its impact on users such as those using screen readers, the blind, and the deaf blind, the more intentional I become in how I construct web pages.

Please let me know if there's something that can be improved or any best practices. There's a lot to learn and I am committed to keep learning! 😊

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

My first JavaScript project! I am extremely proud of completing this project. There were many challenges in this one, such as naming classes and variables, getting the tip buttons and custom tip to work the way I wanted them to.. In the end, this simple statement made my entire logic work:

let selectedTip = 0;

While there's room for improvement in my code, the sheer satisfaction of seeing it work brings me so much joy and relief. This was a fun one. Feedback is also welcomed! 😁

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

Figuring out how much whitespace is between each section and heading: it can be a challenge when you don't have the exact Figma file for reference. However, this challenge is an opportunity to sharpen your attention to detail.

Once I figured out this solution below, through trial and error 😅, everything fell into place when it comes to figuring out the margins in between the sections.

li {
  line-height: 1.5;
  margin-bottom: 8px;
}

Creating the table section proved to be a formidable task for me as well as I didn't know how to remove the borders around it. However through meticulous web searching, stack overflow and mdn docs, I successfully figured out this solution to my problem.

table {
  width: 100%;
  border-collapse: collapse;
}

Overall, I thoroughly enjoyed working on this project. It taught me about the acceptable amount of whitespace in design, among other things. 😄

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

I would love to know how to make the horizontal lines thinner 😆 I have only found solutions to make it thicker.

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

It took me quite a long time to finish this project, but I am proud that I was able to finish it and it closely adhered to the original design. I need to structure my workflow to be more organized.