All solutions

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

I made this landing page fully responsive and spent a lot of time on that. I'm happy with the result. The next time i wont try to deploy a tailwindcss project using Github pages as it did not work and I had to use Render. Personally I found tailwindcss messy, i prefer SCSS.

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

Customizing tailwindcss when you're a beginner is not pretty straight forward. I use desktop first approach so it took me a while to get accustumed to mobile first, which is tailwindcss approach.

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

Maybe with customization of tailwindcss which I spent quite a while on.

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

I'm happy with Carousel since it's my first experience with building a craousel using background image rathern than images. Also the layout is perfect both in desktop and mobile layout. I can't think of something to do different the next time except for being more experienced and not to be stuck as much as i did this time.

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

The layout was abit challenging initially I went for flex and later decided grid is better for the main container. As for the Carousel it was difficult to make the transition smooth as I had to changed background image right after transition so my solution was to set timeout for changing the background slightly less than the timeout for transition.

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

Both in layout and Carousel.

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

I'm glad with the result specifically responsiveness and the next time I wont declare variables which I will need to change based on device width as SCSS variables but CSS variables (I declared media queries for these variables but that's not possible for SCSS variables)

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

I think I spent most of time on making the page responsive. Since I used SCSS and 7-1 architecture I had to move around all those folders but the result was a more strcurured and more readable project.

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

Maybe with how to organize SCSS files.

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

Apart from the final hover effect (hover on the image) it was done fast. It took just an hour to put everuthing together of course in hover effect (on the image) I was stuck and 45 mins added to my record.

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

I tried to get the image to fill the container (which itself was inside a flex container). I tried to use object-fit for the image but it was not working until I found out I had to set the height of the image container (flex-basis:3.5 rem) so never forget height 100% is not going to work.

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

It was just an easy project the challenge and how I managed to solve is mentioned above.

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

The flip effect is the most challenging part which I could achieve to complete. The effect is not perfect though, and requires more work to look more realistic.

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

I spent quite a while to create the flip effect. Among the challenges, how to get the other side of the card to show up when it flips and also how to get correct numbers to show up after each flip. Also when flipping, you need some way to hide the back half, i used a div and whenever flip starts i make this div visible and it will become invisible when rotation is complete.

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

I think the flipping part, as i spent the most time on this part.

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

This was a great project both in terms of layout (CSS) and functionality (JavaScript/React) I used CSS grid extensively and really appreaciate how powerful it is. There were also many dynamic parts present so a great opportunity to put my React knowledge into test, using states and props and refactoring components. The next time i would approach such a project in a more structured way.

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

Since there are many dynamic parts in this project at times it was challenging to manage the code also to make the layout responsive I had to use CSS grid and had to experience with some grid properties like minmax()

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

Both layout and functionality. I used React.j and I'm sure this would be much complicated with vanilla JavaScript.

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

The next time I won't forget instead of "height:100vh" I should set "min-height:100vh" (for body element to show as expected in responsive mode) I added animation to the chart but since container's height is not fixed (fit-content) the whole chart is animated not just bars,which i found cool!

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

Initially it seemes quite easy to me but as I progressed challenges started to show up. Positioning was first challenge because i was trying to center the chart both vertically and horizontally. Initially i set "height:100vh" (of body) but when on responsive mode it was shrinking. The solution was "min-height:100vh". Another challenge was chart scale. My solution was to find the maximum value and devide other values by max .

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

Positioning and scaling (assigning relative heights to bars)

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

Everything went smoothly except for a bit of confusion with responsive part. The image container kept collapsing and after some research i found out setting align-items in flex container is causing the problem. So what i changed was: 1-Placing image as background image of an empty div 2-Left align-items of the flex container to its default value : stretch When on mobile device and changing flex direction from row to column, min-height (and not height) of this div should be set, otherwise it collapses.

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

Apart from responsive challenge mentioned above, setting appropriate message for email input (either empty or wrong format) turned to be a bit challenging. The content of error message is created based on the type of error. First chacking to make sure email input is not empty and then checking the format.

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

The responsive part seemed quite confusing to me. Empty div kept collapsing.

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

Getting the form to behave as expected under different circumstances. Using React would simplified the code.

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

The first challenges were customized radio button and customized check box. Of course in those cases I followed the code i found online. There were small details in form validation like different conditions under which error messages are displayed and the final bug was to prevent error messages to be duplicated!

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

Details of form validations.

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

Customizing lists marker and padding .ul { padding-inline-start: 17px; }

li::marker { color: hsl(332, 51%, 32%); }

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

1-Customizing list items and indentation. 2-It's important to remember you need to use 'px' and not 'rem' in media queries! 3-Never forget to set box-sizing to border-box!