All solutions

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

Proud to complete my first intermediate project. The javascript was pretty interesting to get into and lots of different aspects to consider. I'm not sure there is much I'd do too differently, i decided to do the JS first which helped. There was a bit of changing of html and js after styling though, not too sure if that could've been helped.

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

Not too much challenges really, had a bit of trouble getting the custom input radiobox to style, and spent quite a bit of time trying to get the differences in sizes between tablet and mobile set up.

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

HTML Semantnics

CSS methodology and approach

JS syntax and conciseness.

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

Managing to get the JS working, was a nice little feature for this.

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

Mostly around the background image icon i could not really find a solution to adding padding , i've encountered this before and not really found a solution that works.

The buttons and constraining the widths were a bit more tricky too. Additionally i wasn't able to find a way to have the last input field the same width as the other parts of the component.

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

Help with the icon in the input fields as well as width for the second input element. JS syntax CSS responsiveness.

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

Getting the JS to work properly. Not sure there is much I'd change differently, process to creating this was actually relatively smooth. I'm not sure I did the overlapping cards particularly well as i had to constrain them quite abit it felt like there was probably a smarter way.

There's a few parts of the design like icon placement i'd individually place using position absolute maybe and few parts where alignment is a little off.

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

Not too many challenges, mostly smaller ones around overlapping cards and overflow.

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

HTML semantics CSS - Structure, refactoring potential, feedback on the overlapping cards JS - syntax and approach to the problem.

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

Getting the javascript to work for the different responsive elements.

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

Not too many really, there was a bit of back and forth between the different css between desktop and mobile, but this is because i created some of the js for desktop before mobile, so meant i backtracked a little bit.

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

HTML semantics and structure css structure and conciseness/best practices JS structure and general feedback

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

I'm glad i managed to get the javascript working, it was more tricky than I imagined with the design on the mobile side which wasn't a simple change in styles.

I would've perhaps planned a little more the different states and including the css upfront and toggling instead of creating the html and some of the css using js. The flexibility of js allows for this and is harder to refrain from using it.

I only found out at the end that i should've perhaps used utility classes and toggling classes on and off elements instead of styling individually.

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

Getting the mobile view javascript to work with the design. I eventually got there by restarting the javascript again from scratch and refactoring a little bit at a time as it started to grow.

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

HTML semantics CSS structure and responsiveness JS structure, syntax and overall approach to animation.

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

I'm proud of finally getting the responsiveness of the landing page to work within the confines of the design. It was relatively tricky to get the changes of the hero section to wrap using flexbox only. I think i might have approached the hero section with a css grid which may have given me more control over how it changes.

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

I mostly had challenges in getting the hero section to wrap correctly, I used minimum values of the width with flexbox in order to over come this behaviour, but it took a long time to get it completely right.

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

HTML semantics CSS structure CSS responsiveness feedback.

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

Eventually getting the responsiveness to work on intermediate and desktop. Next time I would plan the utilty classes in advance.

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

Getting the desktop grid set up and the number of changes of colours were a challenge.

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

HTML semantics CSS structure Responsive design and CSS Grid

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

Getting the components in a responsive manner. I would start with CSS grid for desktop view first.

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

Not too bad actually, mostly around centering the grid and getting the correct distances.

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

HTML Semantics CSS structure and layout approach

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

Getting the responsive elements working together and using BEM for more consistent HTML.

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

The main challenge i had was around centering the cards, eventually settled on a flexbox approach to both mobile and desktop approach.

The figma file was not consistent in the product details spacing which present a challenge in providing consistencies. So its not absolutely pixel perfect for that reason but from a UI perspective is more consistent.

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

HTML semantic structure CSS structure and general CSS feedback on where i can improve

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

Getting the design mostly accurate. i think i would've probably done less on getting the inbetween sizes working correctly and sticked to the desktop and mobile view only.

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

Whilst i was able to get the desktop and mobile versions to the design, inbetween sizes of height were incredibly difficult to figure out how to fix the overflowing top part of the card. It looked like the flexbox was actually causing this problem and was unable to find a solution to center the card without, despite thinking about floats or using auto margin.

Additionally getting the padding between the bullet point and the text in the list was really challenging, solutions made to seem this was relatively easy but nothing seemed to work, using ::marker, using ul or li padding/margin. Not quite sure why!

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

Better responsiveness on intermediate desktop sizes, the card overflows on my own laptop for example.

A better way to add padding on the bullet point lists.

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

Getting it up and running relatively easily, growing in confidence. i think i would provide a bit more consistency in fontsizing, padding and structure it a bit better.

Learned about how to cover images effectively, relative sizing of buttons with a fixed width using max-width and width properties, re-emphasis on using REM units in font-sizes, margins and paddings.

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

Getting it to center again, even though I knew how to do it.

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

HTML structure CSS structure and feedback

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

Getting the flex box centered

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

Getting the flexbox centered, i asked chatgpt which give me a hint in terms of height being the 100% of the viewport for the flex container to center the box without padding and margins.

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

Semantic HTML, CSS styling

1. How can I improve the BEM methodology here ? I didn't use modifiers when I perhaps could

2. Is there a way I can refactor my CSS by using modifiers ?

3. What are the accessibility improvements I can make here ?

4. How can I test for optimisation of the loading speed ?