Fotomatic project: Supplied solution does not match brief?

Hey, I am doing the “Fotomatic Project”

It appears the supplied solution:
(https://content.codecademy.com/courses/freelance-1/capstone-1/solution/index.html)

does not match the brief:
(https://content.codecademy.com/courses/freelance-1/capstone-1/specs/fotomatic_spec_landing.png)

I’ve only started the landing page but so far it appears the header text does not match as well as wording of fotomat / fotomatic on the left, also the bottom margin of join the waiting list button in the sign up section.

Are these errors or am I missing something?

Hey there and welcome to the forums!! :slightly_smiling_face:

I’m guessing the <a> text in the header, fotomat is a typo, which I can report as a typos in the course work. As for the different sizes and margins I am unsure why these are different.

Since the .png example has everything sized in px and the .html solution file has almost everything in rem or em I’m guessing it is just because there is no single solution to the project, and you can use which ever measurement you prefer. It is a lot easier to visualize something in px (at least for me) but in the end I would try to avoid using px since they aren’t responsive.

Could you post a link to the project?

Hey 8 bit thanks for the response. Here’s a link to the project:

https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/responsive-design-and-accessibility/modules/css-documentation-and-debugging/informationals/f1-2-c1p1-fotomatic

1 Like

My pleasure! Thank you for posting the error. I just reported it.

Continuing on it seems resizing the solution link to tablet and mobile sizes will not correctly match the brief’s tablet and mobile sizes in a number of ways. A bit frustrating.

Looking at the solutions CSS in developer tools, nearly everything is styled in rem instead of px. I’m still guessing its because there is no one solution but rather many different ways of achieving the end goal. The solution provided is just one of many to help guide you in the right direction.

Also, remember that a good website will be responsive on many different devices, were as the png only shows three. So chances are you won’t have the exact same size devices that were used to make the picture.

Yeah, I noticed that on more than one project here. I figure as long as my solution matches one of them, I’m good.

1 Like

I don’t believe it is an exact match you are looking for, as seen by the provided solution, but rather having it look nice across multiple platforms. It can be a pain when a website look great on a desktop, but then when you are using your phone can’t see anything. The projects are giving you practice to build websites that work on a wide range of screen sizes.

I’m having the same issue here. The final version link and the specs aren’t looking alike.

I guess I’ll use the final version link and disregard the specs.

1 Like