Lookin' for another pair of eyes

Tell us what’s happening:
I’d just like somebody to go over this and see if there’s any fine-tuning I could do to make it more readable and see if I’m all buttoned up before I submit! Any and all constructive criticism is greatly appreciated.

Also, how do I “test” it? I can test the example one with the left side bar but how do I make that happen? Thank you!

Codepen Link
https://codepen.io/cl-engler/pen/oNNRPpw

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

1 Like

Hello!

I’m not very good at design, so I’m not that much of a help here.

That said, I would create a separate thanks section to, for example, put the link to the fonts used (You put it on the title, which is a little confusing :stuck_out_tongue:).

Other than that, I like it :slight_smile:.

Assuming You refer to the responsive tests, You should use the developer tools:

  1. Start by opening the developer tools. This is usually accomplished by pressing F12 or Control + Shift + i.
  2. On Firefox, Opera and Chrome press Control + Shift + M.
  3. Now You should be able to resize the page and test how it behaves on smaller/larger screens.

Hope it helps :slight_smile:

Hey, it looks great. To test you just put this link
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Into the settings -> javascript -> Last box
Then it will appear on your screen

I forgot to mention that You should test Your projects on every major browser, namely Chrome, Firefox, Microsoft Edge and, unfortunately, Safari.

Of all the browsers, Safari is the most difficult to test because You need an apple device (iMac, iPhone, etc.) to run the tests, since it doesn’t work on Linux nor Windows. And if You’re thinking on using Apple OS on a virtual machine, take care because it’s illegal.

The real fun thing about testing Safari is that even if you do have a mac, you can’t test older versions of Safari on it, only the one it’s been updated to. Developers can’t even test on older versions of iOS because it only supports one version of the emulator.

Safari has become the bane of my existence as much as IE was15 years ago. But at least we have babel and polyfills now.

1 Like

I didn’t know that :open_mouth:, but it makes sense.

Safari is just the same as IE was. One of the problems with proprietary software :frowning:.

They should provide a way to test their software so it’s not exclusive to the owners of an Apple device…

It looks pretty good. Here are a few things.

  1. Because your header/title (Tony Stark) is an image you should use the same CSS for it as you do for the main image. Otherwise it will overflow its container on small screens. One option would be to just target the img element in the selector and have the style apply to all images.

  2. I’d add a media query to lower the font size on the h2 at some point. The scale difference between the image and h2 become disproportional at lower screen sizes. I’d try around 540px to lower the font size.

  3. You should give the paragraphs a max-width so they stay at a line length of around 80/120 characters. This helps to make the text more legible. You can use the #tribute-info section container for the max-width style.

#tribute-info {
  max-width: 980px;
  margin: auto;
}
  1. You should increase the line height on the paragraph text, I’d say use no less that line-height: 1.4;. Again, this helps with legibility.

  2. To get the social icons round you need to either remove the width, or you need to add the same value for the height. You can use a line-height with the same value to center the icons. You have to use !important; on the styles that overwrite any defaults for font-awesome, or you need to increase the specificity on the selector for the icons (e.g. footer .fa). You likely also have to keep the font size and width/height at the same values. Personally I would use a span or i element for the icons and wrap them in the link instead. I’d also suggest moving the font-awesome css link to the pen settings.

footer .fa {
  padding: 10px;
  font-size: 20px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-decoration: none;
}

Again, good job. Keep it up.