Help Needed! Fotomatic Project

Hi all,

I spent 3 days on this project and finally caved and looked at the solution.

First: My approach was to assume the media queries had to be reorganized into "min-width: 425px"etc queries. Meaning, each one would be a “min-width” with increasing px size. I thought this because in the course we were taught that we should design for mobile first. I thought that meant eliminate the “max-width” queries (even though I didn’t get to the point of completing that) Anyway, for this project, I realized this was obviously the wrong approach after looking at the solution. So my question is, as a web developer, should we design for mobile first? or is this project teaching us that we may have to design for desktop first, sometimes?

Second: I learned a ton doing this project in a kind of backwards way. But, before I continue past this section or try restarting this project, can anybody tell me the main learning points that I should learn from this project?

I know I learned how to use Chrome Dev Tools pretty freaking well. I got pretty good with flexbox, position attribute, various width/height settings, text stuff, and just countless other things.

But I really want to know what are the main learning points from the project so I don’t miss anything if I move on.

Here’s my project code as I left it in frustration: Fotomatic - Google Drive

You could simply view the site and then give your opinion if you don’t want to look through the code.

But ya, All I am looking for is the main learning lessons.

Thank you very much.

Rene-Lee

@mtf I am tagging you in this and another post since you helped me way back when. Hopefully you can shed some light on my issue.

1 Like

IMHO, no. Design for the largest scale first and get it looking right in a desktop monitor (min-width: 1024) then scale back to laptop and then a tablet, then mobile. This will give you three or four different versions. It is much easier to scale down than to scale up. And it gives you room to work out all manner of solutions that can be easily adapted in narrower device widths before we implement media queries.

Mind, a lot has changed from my day when all we had were adaptive techniques and no media queries. Now we also have Flex and Grids as optimization tools, something I’m not sure I could offer a lot of help with. I don’t even own a smart phone.

Not having done this project (if memory serves) it’s impossible to describe the take-away points, especially as I have no doubt it involves Flex. Focus on one format at a time and keep a descriptive log of the key aspects of the layout. Borders, font-size, margins, padding, etc. will all be different depending upon device width. Expect to change small details as you scale down.

1 Like

Thank you very much for both your replies. The feedback helps a lot and gives me an idea of the changing tactics that are used. I wonder, is there anybody that is working for Codecademy that you can tag in this posts that can opine on why the course teaches mobile first? And also confirm that the course does in fact teach mobile first? I feel like I really want to confirm the main teaching points of this project, but that doesn’t mean I don’t greatly value your perspective and your input.

Edit: oh, also judging by your reply I could very well be mistakened because the project does seem to design for large screens first like you suggest. But ya, just looking for whatever clarity I can get.

1 Like

Not really sure whom would be best to tag in. Maybe DM Lillian, our community manager. She might have a better idea who to take your question to the curriculum team since she is employed by CC.

1 Like

hey @megaslick23. I’m checking in with our curriculum team now and will report back!

1 Like

Hey guys!

I am taking the Front-end engineering career path in Codecademy and I just came across the Fotomat project. I am completely done with the project and would like to have your feedback. Please check out the live version (https://ahman502.github.io/Fotomat/) of my project or if you are stuck in this project and need help with the code, please visit my GitHub (https://github.com/ahman502/Fotomat) and check out the different project files (HTML and CSS) as I have added a lot of comments to help understand how I am manipulating the code to render a similar website as the solution presented by Codecademy. Hope this helps.

Thank you! :slight_smile:

1 Like

Whooaaa. Well done man. That looks very good. I don’t think you need any feedback except - great work!