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
What challenges did you encounter, and how did you overcome them?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.
I am happy with the speed in which I completed the challenge. I also am happy with how I though through the problem/applied CSS strategies that I learned based off of a previous challenge.
What challenges did you encounter, and how did you overcome them?My biggest challenge was probably centering the entire card - I had to think through how to go about centering a section within the body of an html page.
What specific areas of your project would you like help with?So I'm not able to see the image on the live site for some reason and I'm not sure why. I would also love to know whether or not the way I styled the page and structured the HTML is in line with best practices/accessibilty.
try changing it to ./images/image-qr-code.png the difference is adding "." at the start of the image path.
Creating a useful and functional JavaScript app.
What challenges did you encounter, and how did you overcome them?Initially I thought the app would be quite straight forward but there was more to code than initially expected. Important to plan how the code will be implemented.
What specific areas of your project would you like help with?The JavaScript code and how it might be improved.
Looks good, for the javascript you usually you want to use let instead of var as it prevents you from accessing the variable before it has been declared because var is hoisted to the top. And use const when you are getting values by reference like elements from your html and variables you aren't directly changing. Here is more info abour var.
Whew!
What challenges did you encounter, and how did you overcome them?Alot of challenges
What specific areas of your project would you like help with?Loading Live Data, never worked with json before
Looks good, I would look into JSON.stringfy and JSON.parse. These two methods will save you a lot time and coding.
mostly proud of my JS
What challenges did you encounter, and how did you overcome them?The responsiveness was a little challenging but using docs I was able to overcome it
What specific areas of your project would you like help with?Nothing really
looks good, I would take a look at semantic html and I think you forgot to implement the validation for the email input.
I wanted to animate the popup thing... But, I forgot how to and I ended up just fiddling around and got to nothing~ T_T
Do you mean you wanted it to activate when you hover?
none
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?none
looks good, looking at your code has given me ideas on how to use grid.
Am proud i was able to build a responsive webpage using grid
What challenges did you encounter, and how did you overcome them?None
What specific areas of your project would you like help with?None
looks good, have you looked into semantic html? It would make your project more accessible.
Your solution came out nicely, I would suggest trying to write your html to be more semantic.
I am proud of how i approached the task and next time i would take less time than this.
What challenges did you encounter, and how did you overcome them?I encountered many challenges as i was a beginner and i fought my way through it and all u need to do is work hard and put in the right amount of effort.
Looks good, I think you missed a few sentences in the instructions section. And I think you might have forgotten to use some of the fonts.
I like your background better than the given solution. Maybe try to implement using flexbox to see what kind of things you'd need to change to make it work.
learned a bit more git/git commands not a strength
What challenges did you encounter, and how did you overcome them?no major hick ups
What specific areas of your project would you like help with?any feedback welcome.
Looks good, the stroke could be a bit thinner.
I am the most proud of getting started on Frontend Mentor and trying something on my own without relying too much on tutorials!
What challenges did you encounter, and how did you overcome them?One major challenge was how to center the content! I figured it out by googling and going through stackoverflow. Another challenge was understanding some of the default behavior for HTML and CSS. Using a basic CSS reset certainly helped :)
What specific areas of your project would you like help with?Primarily want feedback on whether the code itself is good, whether I am following best practices on that (especially the CSS) and how closely I am following the design itself.
I think you could read up on Semantic HTML and try to see if some of your HTML could be rewritten to be more semantical.
