All solutions

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

• I used the key-up event to check the user input when they typed in the wrong email format immediately
• I will use React JS for this challenge next time.

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

In this challenge, I used JavaScript to change the image source according to the screen size, and then I met the "Cannot set property src of null" problem. After that, I googled (ofc) and found the solution from Stack Overflow that said I should put all the variables into the DOMContentLoaded event and that fixed the problem. Read more from here.

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

Feel free to notify me about any problems I have in the code. Thanks.

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

I have no idea what I will do next because I think in my own way there are 2 versions of the share links list, one for mobile and the other for desktop (according to 2 classes in CSS code). Therefore, I wrote JavaScript code to follow that idea.

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

• The image's not covering the whole div Solution from StackOverflow
• Button background color does not appear when the links list is active because of the stacking order in the website Solution: 4 reasons your z-index isn’t working (and how to fix it) - Jessica Chan

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

I have a problem with transition effect on the share links list that fires when the page loads, and I have no idea how to fix it.

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

I can finally understand grid now!

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

Fonts, color, and background color are a mess in my CSS code.

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

Nothing much.

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

Nothing much.

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

While using Flexbox, I didn't know how to control the item width (set to 350px) until I found the Flexbox magic (flex: 1) which means flex-growth and flex-shrink equal 1, flex-basis equals 0. Due to that, the items now have the same width and responsive.

You can read more about Flexbox from Basic concepts of flexbox - MDN Web docs

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

• How to name tags and build structure in HTML.
• How to use grid in this project.

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

• Using basic grid CSS and flexbox
• Responsive with media queries in CSS

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

I have some problems with image width and height which can't fit in the div if I set the width a little bit wider. For example, if I set the width to 350px the image will flow out of the div. So my solution here is to stick with 300px width.

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

I need to learn more about grid CSS and how to control the image better.

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

• Building a neat HTML structure
• Using reusable CSS variables
• Styling the lists and the table

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

The difficult part is setting the image on smaller device screens because I have to make sure the image ignores the original padding that I set up. So I asked ChatGPT to get a quick solution.

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

• Responsive CSS
• Font and font size

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

• Building a neat HTML structure and easy to style.
• Next time, I will use CSS grid.

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

I think the hard thing to face here was to set the gap between each div so that it had an appropriate look.

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

• How to choose a pretty font, and a great set of colors?
• Sizing?
• Spacing?

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

• Building a neat HTML structure.
• Using a static font in CSS.
• Finding and fixing problems when publishing a page on Github (mostly my mess).

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

The problem that I faced here was with static fonts (mostly). So my solution here was to fix the URL path and format when setting up @font-face:

• url('/assets/...') => url('./assets/...)
• format('truetype')

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

How to make a more flexible card width, not a static one, and action stage in CSS.

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

• Maybe the part in the code that I am proud of is the way I can use Flexbox to achieve the outcome that I want and with the help of the calc function to create the footer part at the end of the page for an appropriate look. But as you can see the HTML structure is a bit messy.
• Next time I will use CSS grid for this challenge.

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

• The footer part made me think hard and had to try a lot of ways to achieve it.
• Using Flexbox can help stack 2 components as a column, but then the container that includes the QR box will only have the height of the QR box, so I had to calculate the height of the footer and used the calc function to achieve the container height as the way shown in the page.

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

• If the result is shown as the page that I coded, which way would be the best approach?
• I hope to hear your idea on this.