Walk Through video of the fotomatic pro project?

I agree that it can be confusing to this without the step by step guidance of the lessons, but this is more realistic of what will be expected for a front-end software engineer in the industry.

Some users have mentioned that the project uses flexbox and the program doesn’t cover it until later. I agree it can be confusing. I think what really clarify it for me was clicking the “specs” link provided (this page). That’s when I realized all I was really expected to modify to “complete” the project was the CSS file based on what the content had covered so far CSS color, Typography, display and positioning.

Hope that makes things a little better! :+1:

1 Like

“Some users have mentioned that the project uses flexbox and the program doesn’t cover it until later. I agree it can be confusing. I think what really clarify it for me was clicking the “specs” link provided (this page ). That’s when I realized all I was really expected to modify to “complete” the project was the CSS file based on what the content had covered so far CSS color, Typography, display and positioning.

That makes sense. It would be nice to have codecademy give a hint on maybe ignoring the mobile view/flexbox problem for now.

I’m so frustrated with this project that I started a GitHub lesson (through GitHub) to try to help me understand. It has not helped one bit. In fact, I’m more confused than ever. I also bought a paperback book to help me. It is ‘HTML and CSS QuickStart Guide’. I’m struggling through it as well. It’s really frustrating to buy Codecademy Pro and take the lessons and then be thrown to the wolves on this project. I can’t even begin to understand how to do this. It’s equally frustrating that there are walkthroughs for all of the lessons/assignments, then for this there is nothing. I’ve been struggling with this for a week and a half now and don’t know if I can continue. I’m beyond frustrated and depressed as heck. I was doing so well with all of the lessons. I don’t know what to do. I feel like quiting Codecademy now.

Hi there! I hope you don’t quit. Programming is full of snags and even professional developers hit roadblocks that take them days to solve (if they figure it out at all!).

To my understand, some of the projects have less instructions and aid than others so that you can challenge yourself to put everything covered in the lessons together by yourself. The idea is that, to test that you have really absorbed the content and learned how to do the things covered in the lessons, you should try to challenge yourself with less guidance.

Have you tried going to the Get Help section of the forums and posting the question? Which part are you caught up on?


I appreciate your reply. I’ve decided to go back and review all of the lessons I’ve completed so far. That includes from the start: HTML and then CSS again. I am stuck with the Fotomatic project.

Thanks again,

For the fotomatic project, don’t forget that your solution will be focused on fixing the CSS file. That means, when you download the project files, don’t worry about the HTML file or anything else. Just look at the site and based on what the chapter has covered so far in using CSS to do sizing and positioning of elements, how to set different fonts, how to set colors, backgrounds, and the box model, etc. Look at those lessons, and step by step start fixing the layout of the project.

It’s like solving a 1,000 piece puzzle: find the easy ones first, like the right font, or the right colors, then work on the more complicated ones like how to set display rules so the elements look like in the mock up

Good luck!


I really appreciate your help and concern for me.
I’ve been so frustrated that I’ve bought a book on HTML and CSS and I started doing a lesson on GitHub as well. Doing this didn’t help me one bit. Your suggestion is very helpful. I don’t want to give up. I want to continue to learn.

I’m missing some guidance for this project, the assignment is a bit short and vague:

“As you fix Fotomatic’s bugs, remember to use the skills you acquired in the Chrome DevTools article to help you decipher and update the site’s CSS. Chrome DevTools are essential for debugging – they allow you to view current style values, toggle rules, and test different rule values.”

At least explain what the desired end result should be; do i need to fix and find all bugs including the ones inside media queries?

And why such a messy unordered css file? I get it that real life project also are messy; but I’m learning, my brain is already working hard enough fixing the bugs!

Just here to comment that I too am struggling

The first thing I noticed was that you gotta link the style sheet, you dont delete the Reset CSS style sheet (it stays in there, I researched that)

But then moving everything around adn figuring out what classes changed what is difficult because you gotta , in my opnion, change code of things, see what it changes, then UNDO THE CHANGES (which can cause errors if you dont do it correctly) . I just split-screen the solution and am going through it one thing at a time trying to see what to do- i dont feel good about that though cause i felt like i understood all the concepts taught to me but the application is SUPER hard.

Honestly you should probably skip this project and come back to it. Some of the concepts were not taught to you for this project but are taught later in the course. Honestly this was the worst project I ran into because the concepts were not taught in order.

1 Like

I’m having a fun time with this project…

It feels really good to be confused about something and then do some searches on stack overflow or look at documentation, and then implement some code attempts until I get what I was looking for. The “Aha!!” moment when whatever little piece I’m working on looks correct on the page is a great feeling.

For all the people that are struggling with this:
Don’t let yourself get frustrated! :wink: it’s not meant to be easy, but shows you how effective some research really is. You’re not expected to know the entire project and have the ability to see every bug… Just do it piece by piece and you’ve got this!! (I’m still working on it)


I agree about resourcefulness but I think the jump from what we’ve done to this is a bit too big.


Using DevTools is definitely the way to go.

I just copied the code down (for the most part) to get the right formats.

Also, some CSS declarations don’t have their class syntax properly listed, so keep an eye out for that.

1 Like

I don’t have a walk-through, but I was able to complete it. This was a doozy! Here is my solution. It looks closer to the spec sheet. [fotomatic_landing_page]

What helped me solve it was that I commented out all lines and added them back one by one to isolate problems. Also, I found the banner being chopped off when it was max-width. when your content on or below the banner is more than max screen for your banner, your banner will get smaller and won’t be max-width anymore. So you have to make your content on or below your banner to be smaller.

Not sure if anyone is still following this thread, but i also got stuck in this program and discovered the forum is full of complaints and frustrated users about the Fotomatic project. I sent the request to Codecademy, they replied and said they will hopefully work out a walkthrough in the next few weeks. Let’s keep our fingers crossed :slight_smile:


Ignore me, I realized a solution has been added lol.

Wow reading all of this has cleared up a lot of things.
I get that they’re meant to be throwing you out on your own, but I feel like they didn’t actually give us instructions on what the project goal actually was.
I saw there was two CSS files and just presumed that we were meant to edit everything through reset.css not styles.css…

I have been so so confused for hours!! :sweat_smile:

so are we not suppose to touch the reset.css file? im so lost at the moment.

i hope so, im so lost its really discouraging i understand we have to break our heads once in a while, but we aren’t in a class setting where we can raise our hand and ask questions.

this is the most help full tip on this question!.