My first project - Build a tribute page

Hello everyone.

I’m looking for feedback on my first project. It’s simply designed and meant to capture the green “hacker” style and basic terminal from The Matrix, with the subject of the page being Keanu Reeves and Neo. I went with Keanu/Neo as the subject because I’m a fan of his movies and he’s been everywhere because of his inclusion in the Cyberpunk 2077 game.

https://codepen.io/emTr0/full/Kjwqoe

One thing that was odd for me is using “id” instead of “class” for attributing CSS. Using id was a requirement for the project so I couldn’t use class in the way it normally would. Did I still do it the way I was supposed to?

Thank you!

1 Like

@emTr0 You have passed the tests so the code is functioning. You can us ‘id’, ‘class’, or both to target the same element. Your page looks pretty good visually.
The page is not responsive at all so I suggest, as a challenge, going back to make sure it will fit on a cell phone.

Nice first project!

1 Like

Thanks @brandon_wallace!

I updated the code to be more responsive based on screen size. It should now fully display appropriately on smaller screens. Can you let me know what you think?

1 Like

I would increase the font size on the body and make the typography a bit more interesting.

Just as an example:

<link href="https://fonts.googleapis.com/css?family=Orbitron|Roboto+Mono&display=swap" rel="stylesheet">

For the body:
font-family: 'Roboto Mono', monospace;

For the headers:
font-family: 'Orbitron', sans-serif;

Bump up the font size to 22px

1 Like

We were of the same mind! I literally just changed the font for the whole thing to Orbitron. :laughing:

I’ll try making the body Roboto. I did notice it seemed a bit much having the whole thing set to Orbitron.

Thanks!

Well, it is a very futuristic font.

I’d agree it is best used on headers and not body text. I picked a monospace font for the body because it gives it a bit of a computer screen vibe.

1 Like

It looks great now! That was the last touch it needed. I tried making the font 22px but the block of text looked overwhelming that big.

Well, maybe around 20px. One thing to keep in mind is the switch sometime takes a little time to settle in (psychologically). It will look too big at first because you have looked at the small text size for so long. I’d suggest setting it and leaving the page for 10 minutes, then come back and look at it again. It should seem less big then.

There are also more extreme fonts like VT323 which might look cool, giving it more an old school video game vibe. Just make sure the size is big enough so it is still legible.

1 Like

Ok, I’ll give 20px a try. Thanks!

@lasjorg Orbitron is a cool font. I have used it in a project or two.

@emTr0 I suggest using something like Hack font for the paragraphs. That is a font that people would use in a terminal.
https://sourcefoundry.org/hack/

1 Like

Greetings, emTr0,

I love the look of this page. It appeals to the cyberpunker in me due to look and content.

The one thing I can see is that the right green border seems to disappear somewhere around a width smaller than 480 pixels.

Love this overall.

Regards,
Dwayne Brock

1 Like

Nice Nice, Cyberpunk 2077 launch was interesting indeed. :slight_smile:

I love the style however if you want, you could try using a complimentary color to green for some elements ( the border or caption) or alternatively use different shades of green to add some visual separation.

You could also try and using a css grid columns with rows inside of them for the time-line, but I am guessing the choice of style was intentional. :stuck_out_tongue:

Good job and keep creating.
Cheers!!

1 Like

Thanks!

I think that’s because I set a min width. Maybe I’ll remove that css rule to prevent that from happening.

I’ll definitely play with the colors. The ones used were from a color template I found specifically for The Matrix.

Thanks for the feedback.

1 Like

Cheers! Keep up the good work. :slight_smile:

1 Like

I don’t know, using an @media call to a min-width in the CSS sounds like a pretty good idea to me. That way you could have multiple versions according to size. Maybe that just needs a bit of experimentation.
Another thought would be if the whole thing were so perfectly scalable that a viewport statement did the trick.
My approach to that can be viewed in the CSS here https://codepen.io/dwaynebrock/pen/byypMm.

It got my attention, because I faced a similar problem. but I am sure my way to solve it is not the only one.
In the end, those are just my opinions about it. You might find another way entirely.

Just a few thoughts, I look forward to seeing what you come up with. I definitely like the cyberpunkish color scheme. It makes me want to go read Neuromancer again.

Regards,
Dwayne Brock

1 Like

Um, oops. I need to make a correction and an apology.

This was my version of the same challenge. I approached it by going after the mobile first, then going larger. did all of the scaling in CSS and kept html for the content separation. I learned from my end that if you don’t separate them this way, the html validator doesn’t approve.

This was my actual version, if you want to take a look. I apologize for posting the wrong one.
https://codepen.io/dwaynebrock/pen/BgjQOM

Dwayne

1 Like