Any general feedback is welcomed.
very proud of acheiving the layout, It looked deceptively simple at first.
What challenges did you encounter, and how did you overcome them?I was forced to understand flexbox properties, especially the 'flex-shrink'
What specific areas of your project would you like help with?Any feedback is welcome!!!!
Looks like you forgot to add the color to the number headers at the bottom.
:) Another deceptively simple project, I am proud of sticking to accessibility principles and limiting myself to as few aria- attributes as possible. I stuck to aria-invalid and aria-describeby for the error messages so that screen readers can read with the proper context.
What challenges did you encounter, and how did you overcome them?Sticking with accessibility was a pain but I persevered
What specific areas of your project would you like help with?My js file might be a little cluttered, any help there is welcome!!! also any feedback on any other section is helpful!!!
You can use form.checkValidity() directly instead of checking all the individual elements.
Beginning the project with accessibility in mind introduced me to the details and summary tag which made the whole project easier
proud of this html for a single accordion
What is Frontend Mentor, and how will it help me?
Frontend Mentor offers realistic coding challenges to help developers improve their
frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for
all levels and ideal for portfolio building.
and the associated css
details > summary {
list-style: none;
cursor: pointer;
font-size: var(--summary-size);
font-weight: 600;
color: var(--heading-color);
display: flex;
justify-content: space-between;
gap: 1rem;
}
details > summary:hover {
color: var(--summay-hover-color);
}
.summary-icon {
width: var(--summary-icon-dimension);
height: var(--summary-icon-dimension);
background-image: url(./assets/images/icon-plus.svg);
background-repeat: no-repeat;
background-size: contain;
flex-shrink: 0;
}
details[open] > summary .summary-icon {
background-image: url(./assets/images/icon-minus.svg);
}
details > p {
margin-top: 1.5rem;
font-size: var(--details-size);
color: var(--details-color);
line-height: var(--details-line-height);
}
Nothing much
What specific areas of your project would you like help with?Any feedback is welcome!!!
Looks good
I think you forgot to change the background color for the star image.
N/A
What challenges did you encounter, and how did you overcome them?I wasn't sure how I should deal with the image change when making the screen smaller.
What specific areas of your project would you like help with?Any General feedback is welcomed.
forgot to uncomment width size for card, I'm out of new screenshots for the month.
Making the card responsive.
What challenges did you encounter, and how did you overcome them?The box with the annual plan was a bit tough to position with all the children item.
What specific areas of your project would you like help with?Any general feedback is welcomed, but I was wondering how to make those box-shadow under the card and process paymen button. I wasn't sure how I could get the exact color and how to get the same blur and spread.
I fixed the image and the price color but I am out of screenshots for the month.
