Fotomatic CSS Debugging project - my solution (Front End)

Projects
#1

As the “Web Dev” path became the “Front-End” path I went back to make up the stuff that were not there before, including this project.
[Link to project]
This Project took me by surprise - It’s really not well explained but is actually simpler than it seems (too bad it took me a whole day to realize that).

Sans code samples, here is what I did to make it work:
HTML (index.html):

  1. Link the CSS stylesheet to your html! :wink:
  2. Fix the links to the images so they would lead to their location in your local directory.
  3. The comment that precedes the “quotes” section is missing a closing “>”, rendering the rest of the html a comment. Close the comment tag, to show the quotes section and footer.

CSS (style.css):

  • .image-container img : add a rule to set the maximum width as 100% - this is to make sure images are scaled down to the size of their container instead of being cut or overflowing.
  • Set the z-index of the header to a positive whole number.
  • sign-up section: add a background image that covers the whole container and doesn’t repeat.
  • Add a 38px padding to the feature content container.
  • The class selectors in the quotes section are incorrectly formatted.

I hope this helps! :slight_smile:

15 Likes
Walk Through video of the fotomatic pro project?
#2

thanks Yael, that’s a great response

#3

I believe there are still more issues to fix with the index.html and styles.css document. I made the same fixes that you mentioned above however my website looks like this:

image
image2559×1299 273 KB

#4

I was able to resolve the issues.

#5

thank you @yaelperez , your solution was extremely helpful.

I would like to add in some more for the CSS file:

  • add padding of 38px to h2 and h3 of .feature (so that the padding is similar to the solution page)
  • add display: flex to filters-section .images-container (to make the images line up next to each other)
3 Likes
#6

Thank you @yaelperez for providing us a simple way to look at the project.

This project was challenge for me hence if I may, I would like to mention one thing I believe it is not mentioned in above.

  • Set consecutive media screen size for tablet and mobile device.
  • Make adjustments according to the media size.

As mentioned in other posts, it seems like specs and solution code does not match. Personally this project was hard but had much to learn (importance of reset.css, how orders of code can be powerful in @media rule, and so on…). I tried to version control and somehow deleted many files via terminal… but files where recovered and made me want to learn code more. It might be a challenging project but I would go for 80% and keep learning rather than giving up on the project totally.

Once again, thank you!

``