All solutions

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

I am proud that I was able to recreate the provided design.

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

Creating the progress bar was challenging. I used progress element for the progress bar, in this project. I learned that styling and animating the progress element is not easy. Javascript is needed to animate a progress element.

The two articles below helped me learn about using and styling progress element.

• The HTML5 progress Element
• How to style a progress bar using CSS

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

I would like to learn about best way to style and animate a cross-platform progress bar. I know my solution is production ready.

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

Nothing

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

Fortunately, nothing.

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

Fortunately, I think it went well. Still, I welcome reviews and suggestions to improve my code and understanding. Thank you.

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

Nothing.

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

None, fortunately.

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

Fortunately, I think it went well. Still, I welcome reviews and suggestions to improve my code and understanding. Thank you.

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

I was trying out SASS in this project and would use it in upcoming challenges as well.

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

N/A

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

Fortunately, I think it went well. Still, I welcome reviews and suggestions to improve my code and understanding, especially accessibility improvments. Thank you.

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

Nothing really.

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

Fortunately, I think it went well.

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

I welcome reviews and suggestions, to improve my code and understanding. Thank you.

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

Nothing in particular.

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

N/A

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

Fortunately, I think it went well. Still, I welcome reviews and suggestions. Thank you.

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

It was my second tailwind project and it took me embarrasingly long time to finish it. I completed another project while putting this one on hold. I do like tailwind and will be using for upcoming projects, but sometimes all the utility classes on the markup just threw me off.

I started again and completed this challenge after gaining fresh perspective. I was needlessly complicating simple styles.

So, yay! Finally, did it.

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

I didn't stick with the mobile first approach which is what this challenge required. I lost my way through utility classes and put this challenge on hold.

Eventually, I decided to tackle this challenge today and to my surprise everything went smooth.

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

Fortunately, I think it went well. Still, I welcome reviews and suggestions. Thank you.

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

Nothing in particular. This challenge was easy, thankfully.

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

Again thankfully, nothing.

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

I'm open for reviews and suggestions.

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

Nothing at all. I made a mistake while marking up the content by choosing div where I had a better semantic element. Although, I made the change to semantic element, it took me long time to complete this challenge.

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

I spent a lot of time on using flexbox and fluid sizing to achive a media-query less responsive design. I failed, though I did gain some insights into achieving fuild design using minimum number of @media rules.

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

Open to reviews and insights.

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

N/A

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

It was suppose to be an easy challenge but I got stuck with setting background images. I couldn't get it right. I did learn how to do it eventually, looking at @grace-snow solution.

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

Open for feedback.

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

I learned Tailwind CSS! This was the first project where I make use of Tailwind CSS. It took more time than it would have writing just plain css, but since it was my first project using tailwind, time was well utilized. I learned a lot in this single project. :hover states, overlay effect, using flex and grid utility classes, setting font styles and spacing using utility classes, and so much more.

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

Since this was my first project using Tailwind, I took way longer than usual to complete this challenge.

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

I'm not sure. I'll explore Tailwind more for now..

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

Nothing in particular.

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

It was fairly easy.

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

Accessibility perhaps.

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

Learn and implement better, accessible components in upcoming challenges.

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

N/A

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

N/A

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

Never got a chance to use table element, so I learned quite a lot about styling table, th and td.

Another learning opportunity came with styling lists and list items.

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

I was thinking about using CSS Grid or Flexbox for this, but it felt like an overkill. I know they are THE tools for such jobs, but all the elements when properly marked-up, were arranged one on top of other (that's how block level elements are stacked).

So it was all about providing a proper vertical rhythm. So I went ahead with margin and padding, on and between elements.

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

I would like to know a better way to implement a wrapper element. I used two wrapper divs, in this challenge, one for the image and other for the text content, to provide inline padding so that content doesn't touch the edges.

I couldn't use one wrapper div for all the content including image, as the mobile design has image touching the edges of the viewport.

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

This challenge was easy, so I'm not sure if I'd do something differently.

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

Nothing in particular was challenging in this project.

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

Fortunately, I don't think I'll need any help. Though I'm open to any suggestions.

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

I learned from my last challenge and started using flexbox and a css reset. Fortunately, I did not spend a lot of time adjusting, the spacing between elements, to get it just right.

I will refine my process for upcoming challenges.

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

I wanted a better system to make fonts responsive. I knew about clamp() and fluid typography through a online tool called utopia, which I tried using in this challenge.

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

I'm not sure if I'm using @font-face correctly. I'm sure there is more to fonts than I know, so learning about different ways to use fonts (web or local) would be helpful.

Another one is making use of fluid type scale in the project.

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

I learned how to use variable fonts from Google fonts. Project was easy as it is. I would probably use flexbox for something like this from now on.

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

Getting the spacing around components just right was really time consuming. Lots of trial and error.

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

I would like to learn the best way to add variable fonts to a project.