I’ve just finished my technical documentation page. About the RGB model and colors in the web in general.
I’m afraid it is too simple, didn’t want to put transitions and things of the sort that distract you from the subject matter. Also, tell me whether I should add more text.
Thanks! @michaelnicol, this one goes for you kid.
It’s is very good! Here is my suggestion, font and colors. Improving the header will make it stand out!
@razzakammar_nano Hi! I was afraid of putting so much color. Have to think about it for a while. Thank you for your help!
Hey again, You have a good start.
The first thing I recommend is evening it out. Make that side bar 100% of the height and then stick it to the top so it stays in place. Click here for a example.
Next, create a header and try to separate your page. For example, here is my page:. The switch is broken and I will fix soon.
Its almost like how your product page had a main box over top a background. In this case, I have a bunch of simple boxes over top of a blank background to give it depth.
You created a 3D box for your nav bar (don’t forget the smooth scrolling), but your content on the page does not have that.
This technical documentation page is a little less complex then a lot of other pages (mostly text) and is more fit for full screen like you have rather then small screen with your product page. So no background images and simplistic colors are best. This is why getting the depth down is important because its one of the few non-distracting details you can add without taking away from the page.
Hi Mike! Wise words, all of them. I wanted some highlights but didn’t dare for color, what you’re saying makes a lot more sense. I’ll go for it tonight. Thank you my friend! I’ll edit this post not to clutter the topic but I wanted to reply in case you were around.
Edit: Here’s my page. You were right about the header, it really gives more depth to the page and some organization too. I fixed the navbar and for the content header I put a touch of blue. Not much, enough to call for attention without taking it all (the attention). So thanks again my friend. I keep on learning and that’s an important thing. And you get to have some mental exercise too, practicing what you know.
Here’s the pen:
Hey, sorry for the delay on responding.
Your page is looking great and I like the header and how responsive it is.
On smaller screens collapse the side of the Nav bar before it disappears. Between 650 px and 500 px the page looks weird as a result of the fixed side nav bar.
I think the header is cool because it is about colors. However, If you go make to my page you will notice I use a light gray for the background and white on the main elements. That adds a subtle depth that will look nice for the page.
This is the smallest project and you are almost done. This project was about making a very simple and repeatable page, which you have done. This is also a full sized page, so bright colors are not used as much as subtle difference in colors for depth. You have done this fairly well so far.
You are getting good. Your page is responsive and you used media Queries without me even asking.
You can add transitions if you want, but on large scale documentation pages they are not used as much. Documentation pages might be accessed by a wide variety of systems and browsers, so transitions might not work anyways is a real setting.
Edit: I also like the font you used. Didn’t even notice it at first, but it looks so modern and clean. Such a small touch that adds so much.
Hey Mike! Good to read you again. Don’t worry about the delay. Last night I wasn’t able to fix the page so I’m doing it now.
The weird thing when you changed the screen size is fixed now, with a max-width of 599 instead of 459, the change from navbar to no navbar is now smooth.
So guess this is it! Thank you for noticing my choice of font. I love that font, as you said it’s modern and clean.
Well now I got to prove all I learned with you beyond the curriculum in my next page, the portfolio page-big challenge indeed.
See you soon kid. Thank you for being there all the time. You’re really my master. Congratulations.