Fotomat - Fotomatic (finished). 3 Questions and a note

Web Development Front-End
1

The exercise:
https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-22-making-a-website-responsive/modules/wdcp-22-learn-css-documentation-and-debugging/informationals/f1-2-c1p1-fotomatic

The code:
https://github.com/Iampetrus/Fotomat—Fotomatic-

Hi,
In spite of the solution not matching the specs sheet, after finishing this exercise I have the following (easy) questions that I am sure most of you will answer:

1
In line 4 html {font-family: "Roboto", sans-serif;}

In line 59 .logo { font-family: Roboto-Mono-Regular, sans-serif; }

In line 70 nav li { font-family: Roboto-Regular, sans-serif; }

Are selectors after html selector redundant? I am looking for efficiency

2
I dont know how to center align - justify header icons when mobile.
Something (again) interferes to do so and I cant figure out what that is.
(Lines 176 - 196)

3
I added a max-width (line 6) (personal addition) to the html selector, but I needed to add it as well to the header itself (line 11). And I wonder if the reason of that is the header {position: fixed;} (line 42).
Anybody?

Note:

  • I had terrible two hours of frustration (swearing for granted) trying to figure out why my background-image was not working. In ten minutes of the following video I realised I was pointing to the wrong place when calling for my image (this is, I was addressing wrong the path to the picture):

https://www.youtube.com/watch?v=zHZRFwWQt2w

Whatever feedback you want to add (I am sure you will find things to improve) is very welcome.

Best regards to all.

Keep going!

2

Regarding #1, all of CSS is a balancing act between specificity and efficient code in order to get it looking how you want. So depending on the application, that could be either wasteful repetition or specific styling. However, either way, you could still use CSS variables to at least not write out the font list over and over.

1 Like