CSS FOTOMATIC PROJECT - I want to cry!

Hi all,
I’m really stuck with this 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
I feel that after studying the HTML and CSS courses on Codecademy I still don’t have the skills to do this project and searching google and other forums just hasn’t helped me at all.
I have no idea where to begin. I’m losing my cool with it.

Is there a walkthrough video? I couldn’t find one anywhere.

I need help with this one. For now I’m going to skip over it before I have a breakdown :rofl:

Thanks in advance,
Tina.

1 Like

Hi There,

If you are really stuck, clicking “next” will bring you to the solution. But if you are trying to avoid looking at the solution and doing this on your own; the idea is to download the code and modify it so that the output looks the same as the working model provided.

The spec shows you the classes involved and how they need to be modified (or they hint at how they need to be modified based on your course material so far).

I am not too sure if you are set up yet in order to work locally, but if you haven’t already, I suggest you download a text editor that will help you view your work. Personally, I like VSCode, here’s the Codecademy tutorial on how to install it. You may need to Google how to preview your content in a browser.

Also, just as a FYI, the general rule of thumb for posting questions in coding forums is that you are supposed to take your best shot at the problem and demonstrate your work/code so that others can help you figure it out. You might find that posts like these are ill-received in the future.

So yeah:

  • download the code and work on it in a text editor
  • take your best shot at the projects (making use of the chrome dev tool and your previous lesson material)
  • post your code where you are stuck so that others can help identify what is missing

I hope this helps!
Eric

3 Likes

Thanks!
Yes, I too use VS Code and have practice of working with some templates etc. I looked at the solution code, and I guess I’m not in the frame of mind to try and decipher it at the moment, so I’ve skipped on over it.

I really think watching someone else guide me through it would help a lot. I’ll search for other YouTube videos on similar projects later.

Hi @tinahagar9240659254, I am currently working on Fotomatic portfolio project. I have to confess that it is not easy. It took me more than one week to finish the landing page for the desktop. So I am open to help or to pair-program. If this sounds nice to you, please reply to this message thanks. I am Ben by the way.

to be honest, I’m not sure I have the time to commit to a pair-program although it would have been awesome. I live in Chile, so there’s most likely time differences to consider and I also work between 8am and 8pm here. I am studying in every free moment I have.

I guess I need to take a few hours to sit with the code and the solution and go line by line to figure out what it is I’m not understanding.

Keep in touch with how it’s going! :sunglasses:

Alright. I wish you a good understanding. It is not easy but not impossible also. So you can do it. All the best.

1 Like

Hey there, just finished that project. Sorry if this sounds super obvious and you’d already figured it out, but I nearly missed it at first and it would explain why you were feeling so overwhelmed if you did too.

Initially one of the stylesheets (style.css I think) isn’t actually linked to the index.html file, only the reset.css and font api’s are I think. Once that one is attached, a lot of the structure is already in place and the tasks are a bit more manageable. Again, sorry if you’d done that part, but I just remember when I first opened the project, before realising a lot of the css was already there, I was pretty freaked out about how much there seemed to be to do.

3 Likes

Yea, I do agree with you. You are totally right. I also spent some time before figuring out that the link to the style.css file was not there in the index.html.

1 Like

It is kinda a sneaky issue haha. Like, I understand they’re trying to test your problem solving, but it if you miss it then it creates a situation where you don’t even know where to begin to start fixing the rest of the stuff.

Thanks! Actually, I hadn’t realized that. I took it for granted that it was attached. Rookie mistake!

Thanks!

Happy to help! I thought your frustration sounded familiar haha, when I first saw the page without the stylesheet attached it seemed a super overwhelming amount of work.

Hello @tinahagar9240659254 ,

Hang in there and thanks for being honest with your struggles.

Step away and come back to review it later is always a good idea. Don’t be too hard on yourself, sometimes in a rush we miss things that would have saved us a lot of tears. :joy: (Then, it becomes a lesson where you remember to look for that “thing” the next time.)

1 Like

Hey everyone, this is the most recent post I can find on this project since it was moved to a later place in my path and I was wondering if anyone else has noticed that the measurements listed on the specs do not seem to match up with the finished project?

I’m working on the featured section and I noticed these issues:

  • the height of the feature class is listed as 635px

  • the padding-top of the feature class is listed as 64px while the padding-bottom is listed as 46px (assuming a typo as they are visually the same)

the specified height makes the white space around the images much too large to look good on the page and also does not match up visually with the white space pictured on the spec. The solution code also seems to be a totally different value. Should I be ignoring the specs? Am I overthinking this too much? I really wanted to do this project without looking at the solution but too many things were not matching up with the values present on the spec sheets.

https://content.codecademy.com/courses/freelance-1/capstone-1/specs/fotomatic_spec_landing.png link to specs

Hey, I think I have completed the desktop version but I would love to go through the rest with someone else. If you fancy doing some pair-programming, I’m on the lookout for partners!

Nicola

1 Like

I have also noticed a little issue with the height and width of the featured images.
After I inserted the images, they were out of the container box and I have been trying to figure out how to make the images fit into the container.

Any comment, hint or assistance would be largely appreciated.
Thanks.

Hi @nicolahearn, thanks for your proposition, but unfortunately I am very busy these days.
Though, any pair programming with you in the future will be welcome. Thanks.

Hey no worries at all, good luck with everything