All solutions

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

• For this project, I'm most proud of successfully integrating SCSS into my workflow. Creating reusable @mixins for colors and buttons really streamlined the coding process and kept the stylesheet DRY.

• I also took to heart the BEM methodology for class names, which has significantly improved the readability and maintainability of my CSS.

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

• If I were to do anything differently next time, I'd invest more time in planning the responsive aspects of the layout earlier in the process. Adjusting components for mobile views was more challenging than I anticipated, and adopting a 'mobile-first' approach from the start seems like it would be more efficient. Additionally, I'd like to dive deeper into more complex SCSS features, like loops and functions, to see how they could further enhance my coding efficiency.

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

• As for the final product, I'm still not entirely comfortable with my code. The mobile version didn't turn out as robust as I would like, and wrestling with overflow-x: hidden; was particularly tough. It's clear I still have room to grow in creating fully responsive designs without resorting to quick fixes.

Any feedback on these points would be greatly appreciated ;)

In working on the Huddle landing page, I ran into a few main challenges:

• Responsive Background Images: Transition between desktop and mobile background images across different screen sizes was challenging.

• Preventing Unwanted Scrolling: Eliminating horizontal scrolling caused by overflow elements

• Optimizing for Different Screen Sizes: Adjusting the design for various screen sizes without heavily relying on media queries.

I absolutely love the clamp() function. Any suggestions or corrections are welcome ;)

Background Image Placement:

One of the main difficulties I faced was correctly positioning the two background shapes (one at the top left and the other at the bottom right of the screen) in a way that they remain partially visible across different screen sizes. I experimented with various background-position and background-size values, but I'm not confident that I've found the most effective approach.

• I found dealing with image sizes quite difficult while building this project. In Figma, the image sizes were 64x40px but when I implemented the same sizes in my project, they seemed much larger. I couldn't identify the cause of this discrepancy. Has anyone else experienced this issue before, and if so, how did you resolve it?

• As I used SCSS, Vite, and terminal commands extensively in this project for learning and experimentation, I'm curious to know if there are any improvements I could make to the way I've set up my SCSS files or any Vite configurations that could enhance my development process?

• I used flexbox for layout management in this project to further familiarize myself with it. Can anyone provide feedback on my use of flexbox? Are there any best practices or alternative methods I should consider?

• I've noticed that when I try to deploy my project on GitHub Pages, the CSS styles aren't applied, even though the path to the CSS file is correct in my code. Has anyone faced similar issues? What could be causing this problem and how can I resolve it?

• Lastly, are there any areas in my code that could be optimized further or any best practices that I might have overlooked?

I struggled with keeping image intact from desktop to mobile version. From 800px the image would shrink. Not exactly sure i used @media query in a right way.

P.S. why when i upload my project via GitHub "Live site URL" is not showing my project right ?

Can anyone help. Thank you