All solutions

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

This challenge allowed me to get better at pseudo elements and getting them to line up. I used two for the background and another for the phone to create the cutout at the top.

I may have tried using different settings and configurations for the phone to make the design a little better. I feel like the phone was a little too big.

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

Nothing major within the challenge that I had an issue with. It took a little time for the pseudo elements and getting them lined up to where they needed to be.

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

Nothing in particular, but will always take suggestions and critiques.

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

Did a little alternative on the curves by using a CSS mask to creating the curves instead of using the svg images. My version does have additional waves to the edges, but it uses less images to create the sections.

If I had to do this again I would mess around a little more with the settings to try and match the curves a little more.

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

There wasn't any major challenges that come to mind. It did take a little more to create the padding and margins between the sections in using my CSS solution for the curves instead of the images, but it will take less load times without needing the images.

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

Nothing in particular, but will always take suggestions and critiques.

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

The CSS variables and grouping of settings came in handy making the mobile to desktop changes a lot easier.

If I did it again, I might try using some TailwindCSS to mess around with it. I may integrate it into later projects

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

This was not as hard as the Fylo landing page with positions. It actually came together quite easy.

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

Nothing in particular, but will always take suggestions and critiques.

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

There was something in particular that stands out with the layout, but I would look at limiting CSS, in turn limiting what was needed to be changed for the media queries. I would also take additional time to create a dark mode for this page, but it would have required a lot of color changes to allow visibility on a dark background.

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

I spend longer than I care to admit working on both the See how Fylo works link in getting the line under the arrow, then just gave up on trying to extend the underline and just using a border instead.

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

Nothing in particular, but will always take suggestions and critiques.

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

Nothing stands out with this solution. I allowed the footer navigation stretch more in the middle because I wanted to have it cover more space.

If I was going to re-do this page, I would try to adjust the layout a little more to eliminate some CSS. I feel like I over engineered it.

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

I had some issues with the company images and scaling. I had to use an object-fit on them to stop them from distorting at the larger screen size. Vector and HP logos were getting an odd compression.

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

Nothing in particular, but will always take suggestions and critiques.

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

Making complete objects out of CSS is always fun (the progress bar and the pseudo triangle on the storage left box).

If I were to complete this again, I would have maybe tried to create it without as much positioning to allow better scaling instead of having to use min-widths and min-heights to stretch out the containers.

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

Nothing major within the challenge that I had an issue with. Used some empty divs with positioning to create the bar and the storage left sections, which made some scaling difficult.

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

Nothing in particular, but will always take suggestions and critiques.

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

I used grid to lay out the pattern it was a lot easier than trying to get flexbox to work for the scenario. Also, setup utility classes for backgrounds and text color changes so it can be used with card templates to stylize without having to write duplicate code for each card individually.

If I had to do again, I would probably look for a way probably with JavaScript to flow out the grid without having to assign sizes to individual cards, it would just add the class to the card and they would flow into place as needed.

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

Nothing major within the challenge that I had an issue with. It was a pretty easy case to use grid for.

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

Nothing in particular, but will always take suggestions and critiques.

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

I created a dark theme version and used media queries to check what the user's preference is and it will display it based on what the browser preference is. With this I duplicated them changed the svg opacity and created a version for dark theme. Also, instead of placing 5 versions of the star image in the ratings, I made an empty div with it as the background, and adjusted the height/width and used background-size: contain and background-repeat space to have it show 5 stars. You could adjust this for full star ratings, but I would have to change to using JS if I needed to account for portions of a star.

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

Biggest challenge was working with the background and adjusting them to fit. I ended up for-going the mobile version of the background and just using the desktop positioned to work with both.

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

Nothing in particular, but will always take suggestions and critiques.

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

Nothing special within this layout outside of the background image positioning, which took a little time to position.

What I would do differently, would work on the card itself and have the responsive scaling work better. The Card doesn't seem to scale, it just centers to the middle of the page, which works for 375 and up, but if you have a smaller screen like some smartphones around 320, it doesn't scale down well.

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

The biggest challenge was positioning the svg images for the background, it was just using trial and error to find the positioning that worked for them.

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

Nothing in particular, but will always take suggestions and critiques.

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

I decided to create a dark theme version of the page as well and again used variables for the card top border color, so they can be changed from one location and change the color.

I might mess around with the color scheme and maybe a little different dark theme for it.

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

I had just spent the last week working with grid, so using it for the cards made it a lot easier than I originally thought it was going to be.

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

Nothing in particular, but will always take suggestions and critiques.

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

Decided to go with a clamp for the Heading to allow the font to scale up as the page scales and placed the breakpoint a lot later than normal (1200px) as I didn't like the paragraph wrapping that was occurring while growing it out.

I like it the way I have it, but their may be a better solution for the scaling up that limits the image more to give the paragraph more space instead of an even flex.

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

I had some major things with positioning and the scaling, but just take a step back, cleared out some properties and went again. Typically a position or flow issue is because mine own error, so it's better to open dev tools in the browser, check what the settings are showing as there, then reevaluate the properties to make sure you not using something in the wrong place.

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

Nothing in particular, but will always take suggestions and critiques.

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

I used variables for each section, that I could call back to the three colors and the lighter versions for the svg vehicles. This allowed me to only have to have one CSS for the btn and just pull in the colors based on the section. This also allows for the colors to be changed from the root variables and adapt for the rest of the CSS. I also, added the color-scheme property since the body didn't have a background color, so those with dark themes will have a dark background and light themes the white background.

I don't think I would do anything differently with this challenge.

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

No challenges in this one, after doing a few of these, the newbie challenges are getting easier.

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

Nothing in particular, but will always take suggestions and critiques.

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

This was a pretty simple challenge, didn't have anything that's out of the normal on this one. It was just a basic layout with some overlay for a hover effect. I stripped the svg of the fill colors and replaced them with CSS just to make it easier if it was going to be used for a template for other cards as they may want different colors for longer or shorter time remaining or different crypto currencies.

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

Initially was trying to make it harder than it was, just stripped back the CSS and went as simple as I could with it.

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

Nothing in particular, but will always take suggestions and critiques.

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

I used calculate on the padding for the stats to allow them to flow nicely between sizes. Originally it was getting to close to the image on shrinking and would have needed another media query to correct it without that calculation.

I would have probably worked in the scaling across the entire card to limit what was needed with the media query.

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

I was originally having some issues with the mobile to desktop transition in getting everything to line up. I started with grid for the desktop version, but switched to flex with a reverse flow to limit the amount of changes needed.

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

Nothing in particular, but will always take suggestions and critiques.

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

It was a basic setup, so I used a combination of grid and flexbox to create it. The grid for the main layout so I could flip from Mobile to Desktop with just a template and a span on the larger screen. I probably could have completed it with a little cleaner of code. I just could not think of another option at the time for the project.

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

No real challenges on this one, it was a simple grid/flex page.

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

Nothing in particular, but will always take suggestions and critiques.

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

This was a pretty simple challenge, used variables to make some box-shadows for the container and the button so if colors ever need to change the shadow will adjust all from one location.

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

Wasn't any major challenges in this that were not already covered in the other challenges I have completed.

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

Nothing in particular, but will always take suggestions and critiques.

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

I stripped out the stroke for the svg files and re-populated it with CSS variables and data-types to allow easy changing of the colors for those summary items in the future. You would just need to change the color at one location and it will adjust the background, svg icon, and title of the result all at the same time.

I would attempt to mess with the JSON data and pull the information in from there, but wanted to use the data-type and svg tag for the coloring instead.

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

Biggest challenge was remembering the svg stroke replacement and creating those variables to adjust it. I looked back at a previous tutorial I had done with that process to refresh my memory.

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

Nothing in particular, but will always take suggestions and critiques.

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

Basic single style page with not much to adjust.

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

Didn't really run into any issues, just got measurements as close as I could was the Figma file wouldn't open in Figma.

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

Nothing in particular, but will always take suggestions and critiques.

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

This was a pretty simple challenge, added a box shadow to the card to give it a little depth. I couldn't tell if the image had one from the jpeg images, but thought it looked better with one.

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

Had a little trouble with finding the best breakpoint because of the image sizes. Worked it out to 600px as the best point to keep the design looking good while providing the best transition.

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

Nothing specific, but any suggestions for better limiting needed CSS or critiques to help with improvement.

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

I didn't see anything on whether the hover/focus state was just for the title or for the card itself. I went with it just being the title and used a before pseudo element for the box shadow. It was the first time really doing it outside of a tutorial, so was nice to get it working.

I don't think I would do anything differently as it was a pretty basic design.

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

Biggest Challenge in this was remembering the CSS styling for pseudo elements to make the box shadow to use for the hover/focus effects. I did a quick look on MDN for the before to make sure I didn't forget anything when creating it.

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

Nothing in particular, but will always take suggestions and critiques.

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

This was a plain and simple project not much to it. I used some variables for the fonts, font weight, and colors, so that if it was added to a larger project in the future, or the design changed, you only have one location to go to adjust the colors and font type. This can be expanded to include font sizes, padding sizes, etc.

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

Didn't have any challenges in this one, more just debates between using buttons or a list of links, but ultimately landing on using links since it wasn't a form, and added the type attribute to the unordered list since the style was removed from them to make sure browsers still read them as a list for accessibility.

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

This was pretty straight forward, but will take any suggestions to make it better.

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

The image adds the border radius just as it pulls from the edge of the page and the overall flow between the media breakpoint.

I would have tried to match the colors exactly, but was not using the free access and didn't have the Figma files to pull the exact colors. I could not tell from the image what was being used for body text or what font was being used for the ordered list numbers as it doesn't seem to be either of the provided fonts in the folders.

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

I was having some issues with getting the headings to line with the markers instead of the li text, so I adjusted this with a negative rem margin-left to allow that to line up.

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

I would like suggestions on how to correct the alignment on the sections without needing to use the negative margin.