All solutions

At an initial glance, this project looked quite easy, but as I started, I realised there was a lot more going on with it.

My biggest challenge was getting the components and views to communicate information between each other. I'm sure there is a much easier way to do it than I did, but the site is functional.

All data is taken from the JSON file, so the components are pretty modular. For example, the planet component handles all 3 images for all 8 planets.

If you have any feedback that'll help me improve, please let me know!

Thanks!

This was my first time using Vue.js.

Whilst it made things easier, I also found it much harder. However, with practice, I'm sure it'll get easier.

The real challenge was positioning the speech bubble. I made its position absolute. I then noticed that it wouldn't react to the browser being resized, so I added a bunch of media queries. I'm sure there must be a better/easier way?

I don't expect anyone to go through the code and understand what's going on there. I'm not even sure I do. Haha.

If you do, though, please don't hesitate to give feedback. I appreciate it.

Thanks!

This was pretty easy to do. It was my first time using an API, and I found using Axios makes things a lot easier.

I'm not sure why the die doesn't render properly in Firefox though. It looks good in Chrome.

Also, I use px for everything and then at the end of the project, I manually change them to rem. Is there an easier way? Or do you just start using rem from the start?

Thanks!

I found the design was not too difficult. Styling the radio buttons was a little tricky, though. The hardest part, and the part that took the most time, was catching user errors and preventing the app from breaking.

If you have any suggestions or tips on how I can improve the code, please let me know.

Thanks!

This challenge was way above my current skill level (newbie), but the app just looked really cool and I couldn't resist trying it out. I thought it would be a great way to practice working with JavaScript arrays, but I found the CSS way more challenging!

I learnt that not all browsers are created equal!

Styling the slider was a tremendous headache, especially getting the background behind the thumb a different color to the background ahead of the thumb.

I had to admit defeat with the arrow, though. I could get it in place, but I just couldn't figure out how to make it turn green. I used the filter property for the copy icon, but I don't think it would work for the arrow? So I went the straightforward route and used an HTML arrow. I think I prefer it to the arrow in the design document, though.

For the password strength indicator, I used the zxcvbn library, which made life much easier.

Any tips to improve are always welcomed!

I quite enjoyed this challenge. I tried to make the form validation happen "live" instead of on submission. I'm sure there's a better/easier way to do it, but it works.

Any tips to improve are always welcomed!

Thanks!

I had a bit of fun with this one.

My primary focus was getting the JavaScript to work, so the design may be a bit off. I added some extra functionality as well, like the error message and colors disappearing when you click away from the form.

Please could you look at the JavaScript code and let me know if I can make any improvements? I really appreciate it!

This one was really difficult. Took me around 2 days to complete. Depressing, I know. It was my first time using JavaScript in a challenge.

I don't know if I did it right or not, but it seems to work. I'm finding it difficult to ask specific questions as I don't know if what I did is even correct? If you have any tips or suggestions, please let me know!

I appreciate it.

I quite enjoyed this one.

Had a bit of a hiccup with the image not automatically resizing, but sorted it out using object-fit: cover.

The mix-blend-mode was also a new property for me.

I seem to struggle with the layout of the webpage - especially with the desktop versions.

Is it correct to add the background images to the body and then have a main container that wraps everything? Then within that main container, have other smaller containers for the various elements.

Thanks for the help!

I found this challenge very difficult. The hardest part was deciding whether to use CSS Grid or Flexbox and then how to implement it for the mobile and desktop versions.

CSS Grid would have been perfect for the mobile design, but I wasn't sure how to implement it for the desktop version.

I ended up using Flexbox for both the mobile and desktop version.

If I had to use CSS Grid, how many columns and rows would the desktop version have? 3 columns and 2 rows? And can you still use transform: translate(Y) with CSS Grid?

All in all, I'm not too happy with this one. I may need to do it over again using CSS Grid.

Thanks for the help!

This differed from the other projects I've completed, so it was an enjoyable challenge.

The only thing I'm not too sure that I did right was the border color on the top of the cards. It's hard to tell from the design image, but it looks as if the borders are inset? I tried using border-top-style: inset, but that made the colors very dark. I'm not sure why though?

Thanks for the help!

This is my second attempt at using CSS Grid.

Is it still necessary to use grid-template-columns and grid-template-rows when using the grid-template-areas property? I find that if I don't, the sections are different sizes.

Thanks for the help!

This was my first attempt using CSS Grid. I quite like how easy it is to change the layout using media queries.

I do have two questions though:

1. Regarding media queries, is it better practice to put them at the end of your CSS document, or under the section that it affects, like I've done with this challenge?

2. In this challenge, I've disguised an anchor tag as a button. Is it better practice to rather use <button></button> and nest the a tag in that? I find the styling to be more difficult doing it that way though, but I worry later down the line I won't be able to "submit" data.

Thanks for the help!

I felt really comfortable with this challenge. It was my first time developing mobile first, so it took a little while to get my head around it.

Having the image change depending on the browser size was also interesting, but I think I found an elegant solution.

All in all, I'm quite pleased with the result.

The first challenge I ran into was the background and how to position the two images. I think I got close using this code:

body {
    background-image: url(./images/bg-pattern-bottom.svg), url(./images/bg-pattern-top.svg);
    background-position: right -7.5rem bottom -31.25rem, left -7.5rem top -31.25rem;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, auto;

Could there have been an easier way?

The other part I struggled a lot with was the positioning of the profile image, but I think I got it right efficiently.

On the mobile design picture, there always seems to be a gap between the browser and the actual card. I have been adding a margin around the card once the browser reaches a certain width. Is this right?

@media screen and (max-width: 500px) {
    body {
        margin: 0 1.25rem;
    }
}

Thanks for the help!

I struggled a lot more than I thought I would with the background image. I got there eventually, but I'm still not sure it's correct. It's difficult to tell from looking at the design pictures. It seems like it still needs to be shifted slightly higher?

I'm still not quite comfortable developing for mobile though. According to the mobile design picture, there seems to be a gap between the card and the edge of the screen. Is it correct to add a margin once the page size reaches a certain limit (500px in my case)? Or is there another method I could use?

For the next challenges, I'll try to develop mobile first. I'm currently developing desktop first and then changing things to fit the mobile design.

Thanks for the help!

This challenge was much easier thanks to the helpful feedback I received from my previous challenge. However, there is one thing I don't quite understand:

I struggled a lot with getting the overlay right and centering the eye icon. I eventually found a resource online that worked, but I don't quite understand what's happening in this block of code:

.overlay img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

From what I understand, position: absolute; puts the eye icon at the top left of its parent. Then the top: 50% and left: 50% I thought would put the icon in the middle, but it doesn't...just.

Then the bit that I really don't understand is the transform: translate(-50%, -50%);. I tried experimenting with the percentages and they move the eye icon around a little, but I don't know what it's moving in relation to?

Lastly, could this have been done an easier way? Perhaps with background-image: url(...), or am I on the right track with this?

Thanks for the help!

I mostly seem to struggle with resizing images. I've used the max-width property on the QR Code image, but should I have used the width and height properties instead? Does max-width and min-width have to do with responsiveness? The difference between these properties is something I need to research further.

Mostly, I'm relatively pleased with the result.