Technical Documentation Page with CSS designed 'terminal'

Code Feedback
1

I got creative with this one and designed a terminal window to hold my <code> elements.

https://codepen.io/jdelles/pen/poeyeaP

What do you think?

2

Hello and Welcome to the Forum!

I like your page, it has a nice layout and font type and size. My only suggestion would be to play around with background colors or font colors. The black and white looks generic. These projects are a way to learn what looks good. I use a color wheel site that shows complementary colors so you can coordinate.

Amanda

3

Welcome to the forums @jdelles. Your page looks good. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address. You’ll need to use HTML entities within the code snippets rather than the angle brackets.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Search for scroll behavior and see what it can do for your page. I think you’ll like it.

On a side note, since it’s a tech doc, unlike @Medearave I rather like the color scheme. It’s a personal choice. Take the suggestion or not.

4

It looks nice, I like the CSS terminal.

  1. I would look to increase the contrast of the text a bit. Darken the text and/or brighten the background (just a hair). I’d also consider a bump in font size (just like .1 or .2 rem more).

  2. Make the nav links block-level elements and move the padding from the li to the link (larger click area).

Good job, keep it up.

5

Hi, I really like it! If you could add color to the letters it would be the best, with the <span> </span> tag enclosing each word you can add a class for the names of the tags, others for the names of the attributes, etc. And you can assign a different color to each word or sign. In my code there is something similar to what I say:
https://codepen.io/juangpereira_/full/GRNwWeN

6

Thanks for all your comments.

@Medearave Thanks for sharing the color wheel. I used a ‘dark mode’ color palette for this site and inverted it. So there are 3 shades of gray and the off-white background. I like a more minimalist design for technical documentation so the design doesn’t take away from the information being conveyed. But I will strive to use bold colors in other projects to demonstrate that capacity.

@Roma I noticed you’re local! I fixed the <> characters inside the code. Great catch. I knew codepen was giving me an error on those I just couldn’t quite figure out what the problem was. I’ll use the validator going forward. I’m also going to check out scroll behavior. Thanks for the tips!

1 Like
7

@lasjorg By making the links block level - do you mean to wrap the list items in the anchor tags? <a><li></li></a>?

@juangpereira I love the color in your code - that’s something I might circle back to and implement!!

1 Like
8

@jdelles, oh yeah. I didn’t notice how close you were. Hey neighbor

9

No, I just mean instead of this:

nav li {
  border-top: 1px solid var(--color-light-gray); 
  padding: 2vw 5vw; 
}

nav a {
  color: var(--color-black); 
  font-size: 1.1rem; 
}

You do this:

nav li {
  border-top: 1px solid var(--color-light-gray); 
}

nav a {
  display: block;
  padding: 2vw 5vw;
  color: var(--color-black); 
  font-size: 1.1rem; 
}
10

Thanks, @lasjorg! I see the advantage of the larger click area. This has been added to the page.

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.