All solutions

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

It was fun using Grid and fetching from a local JSON file. I started coded the CSS using only Flexbox then later on I switched some containers to use Grid. If I was to redo the project from scratch I would have started using Grid right away.

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

Needed to relearn basic Grid concepts... which I did.

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

I think my code is "okay". I attempted to match the design specs. I imagine I could have made better use of Grid, such as Grid Areas, to control more of the UI display.

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

Mobile-first design with extra time spent trying to match all the interactive design notes.

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

Had to learn how to open and close dialog modals. Added code reset the form and modal after each useage.

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

I think I got fairly close to the design expectations... other than my decision to place the desktop modal visibly over the Newsletter, ie. instead of placing the modal over a dark-color background (visually by itself).

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

Spent time adding code to make slight adjustments in font size as responsive design changes size.

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

Needed to learn how to adjust UI sizing based (in part) on view width.

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

I'm wondering if I should have created variation is HTML code (between mobile and desktop designs) in the JS file and inserted what was needed based on view width.

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

My plan was to add code in stages... 1) html-only, 2) general css, 3) mobile css, 4) tablet css, and 5) desktop css... helped reduce the "ripple effect" of making code changes that might adversely affect previous work. In hindsight, it might have helped to considered (early rather than later) the need for inner "containers" to group some related UI design blocks. Note that I did make a few subtle changes to the design, such as changing the font color for the button hover effect.

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

Find specific css code within "Mobile Design", "Tablet Design" and "Desktop Design" became more time consuming as the number of css lines increased... so I added comments to both html and css files to clearly indicate what the sections were for each of the mobile, tablet and desktop css styling.

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

The one thing I could not figure out what how to control (remove?) the opacity on the second divider (that partially covered the last section) and, similarly, how to control the opacity of the button in the last section.

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

Good excuse to review how to set Grid row and column that include spans.

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

Had to review Grid.

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

No request for help.

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

Good opportunity to relearn and use Grid. Probably would have helped if I'd paused the development to retake a basic Grid course.

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

Took me several tries to figure out how to add the correct styles to position the two outside cards to be vertical-center in their columns. Helped to review some basic Grid position concepts on MDN.

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

Nothing particular.

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

Learned how to use the tag to setup different images for different view-screen sizes. Coded the HTML based on the desktop design, then coded the CSS mobile before adding a media query to add code changes for the desktop layout.

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

Had to learn how to use different images for different view-screen widths.

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

How (if possible) to force side-scrolling once the mobile view-screen width reaches the min-width setting... or is there no side-scroll bar displayed on mobile screens?

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

A bit more organized in the process of completing the structured HTML code before beginning to write the code to added the CSS styles. Next time, after writing the HTML based on the desktop design, I will begin with a mobile-first design and finish with a media query for changes needed for the desktop design.

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

Some colors in the browser display did not match the look in the Figma file even though I'm 99% sure I used the expected color codes provided in the design file. I considered changing the code to match my visual feedback and (after considering it) eventually decided it's better to use the provided color codes rather than visually match the colors to my monitor.

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

I expect it's not a "perfect" solutions but I imagine it's close enough for a "newbie" challenge. ;-)

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

It was nice to keep the size of the @media styling to a minimum. Made my first attempt at creating a README file and need to learn more about what info to add.

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

For this project I attempted to use rem, em and % for various sizing... along with min-width and max-width... in an effort to minimize setting specific px sizes.

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

Needed to learn ways to control bullet/number size, type and color for ul/ol list items display. I started but did not complete implementing variable names for the various colors used... thinking I'd leave that for a future project.

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

Is there a way to specify the numbers for ol li are in the form of "1." (with the period) rather than the default "1" (without the period)?