All solutions

Hello everyone. Hope you guys are doing well! I have finally completed this challenge after two weeks of struggling. I believe this marks another milestone on my way to be the entry-level frontend developer and I must continue to work harder and conquer any challenges ahead.

What did you find difficult while building the project?

• CSS I find making a website responsive across different screen size is very challenging. I built this project using mobile-first approach, but sometimes, I found my css is not working as expected. For example, I have faced a lot of alignment issues when I use position (relative and absolute), or overflowing issues, img is not resizing properly, horizontally scrollbar issues when elements is too large and exceed the width of container... There's so many issues but I just did a lot of trials and errors and overcame the obstacles.
• Js I would like to ask community how do everyone write clean code. I found my code is repeating many times. If anyone is willing to share with me tips on how to write clean code, it is very much appreciated=)

Which areas of your code are you unsure of?

1. CSS a. How to make a responsive font size according to screen size without using media query? b. Unsure of width, min-width, max-width things.

• example 1: I would use the following css for img: width: 100%; max-width: xxxrem;
• example 2: to set the min-width the body element can reach in media query width: 100%; min-width: 20rem;
• I am not sure my use cases is correct, but I would like to hear from each of you regarding how do you put these property into practice.

1. Js a. Are putting element into variable a good way to do? I find it convenient to store them into variables, before using them inside the "addEventListener" e.g., const projectGrid = document.querySelector('.js-projects__grid'); b. When defining a function, when do we need parameters? Sometimes, we can access the variables outside the function without passing them as argument during function call... c. how to write better conditionals?

Thank you=)

Hi everyone, this is my first try putting my learning into practice by building an age calculator from the ground up using JavaScript and SASS. This project is considered a bit tough for me and I do appreciate any feedback from the community regarding anything about my project. Kindly comment on:

1. html - semantic elements usage and any improvement to be made.
2. css
3. javascript - logic - I need help to verify my javascript logics and comments to make my code cleaner and better.

Thank you and have a nice day =).

This is an improved version of my project based on comments from the kindest community=)

1. What did you find difficult while building the project? As a beginner, I found styling with CSS to be particularly challenging, especially when certain styles did not render as expected. For instance, achieving horizontal or vertical centering of elements proved difficult, leading me to experiment with various solutions found on platforms like YouTube.Working on responsive design poses a challenge when resizing the screen using dev tools, as maintaining the design's integrity becomes difficult. It tends to deform and look ugly.
2. I am uncertain about specifying width and height in my project. I struggle with deciding when to set them and which units to use—whether in pixels, rems, percentages, or viewport units. In some instances, modifying these properties produced the desired changes, while in others, it didn't. How can I navigate these issues effectively? Additionally, I've encountered issues with overflowing content when the screen size becomes smaller. Both images and text tend to extend beyond the container boundaries. To address this, I've been using overflow: hidden or overflow: scroll. However, I'm uncertain whether this is a recommended solution or if there are better practices for handling such overflow concerns.
3. I would like to know if it is advisable to split CSS code into different .css files. Sometimes, the code becomes extremely long and challenging to locate. Is this a good practice? Thank you