Tribute-Page help/feedback!

HTML-CSS
1

First time poster, so forgive me if I break any unwritten forum rules :slight_smile: or am in the wrong section! Got through the lessons just fine but I’m having a little trouble finding how to make things look pretty!

  1. For the Tribute page, the example we’re given aligns the bullet points list (ul elements) to the center of the page. I was trying to play around with the CSS portion by creating a CSS grid and using flex containers and switching display to “block” but none of them seem to work. Does anyone have some hints to steer me in the right direction?

  2. In the figure element, the example page we’re given aligns the image into the middle of a “block”… The back-ground color for this “block” is white (in contrast with the gray background for the rest of the webpage). I’m not sure how I would create a block like they have and place the image into the center without the image covering the whole container!

  3. My current colour scheme is something I found online using “https://coolors.co/100b00-85cb33-efffc8-a5cbc3-3b341f” but upon further inspection it’s pretty… unappetizing. Would anyone have a suggestion for a better website?

  4. I’m curious as to why Visual Studio Code has highlighted my “center” tags red? I don’t see any mistake and it seems to be working just fine!

Any criticism and feedback is welcome and appreciated!

Screen Shot 2020-06-02 at 12.14.51 AM
Screen Shot 2020-06-02 at 12.14.51 AM3360×2100 1.44 MB

Thanks for your time and help! :slight_smile:

I’m using Safari to load my webpage - also running a live server by ritwik to see changes from the code in real-time (no idea how this works, TheOdinProject led me this way)

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.5 Safari/605.1.15.

Challenge: Build a Tribute Page

Link to the challenge:

2

The center element is obsolete. Use CSS

A few other things to note;
It’s hard looking at someone’s code with a screenshot. It’s best if you post a link to your code…codepen, repl.it, GitHub pages. When you submit the project it’s going to have to be somewhere that’s a working version.

Have fun with the RWD projects. The notes say it should be something like the example page and make it your own. Don’t replicate the example.

Keep the testscript when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).

  • The test script should be included, with all tests passing, when you submit your projects.
  • When using Safari you’ll get the following pop-up when you have the link to the test script in your code;
    “Test suites are currently optimized for Chrome and Firefox. There are known issues that we are trying to work through to make these suites fully cross-browser compatible, but it is a work in progress. For the best user experience, please use Chrome or Firefox until these issues are resolved. Thanks and Happy Coding!”
3

hi @Burns88

this for color picker
https://www.w3schools.com/colors/colors_picker.asp

1 Like
4

For colors palette https://colorsinspo.com

1 Like