Had a real hard time with building Technical Documentation

Code Feedback
1

The course stopped being easy when I was tasked to build a technical documentation, but I finally managed to finished it.

Here is my project:
Python3 Control Flow Technical Documentation (codepen.io)

What do you guys think about my project?

Well, aside from asking opinion on my project, I have some questions:

  1. Is a technical documentation supposed to be mobile-responsive?
  2. Can I make the code highlighted? I guess this needs some JS or had to make every line have its own element, either by <p> or <span>
  3. I don’t understand the logic behind position: absolute; and position: relative;. Am I expected to understand this? (Unix reference)

Thank you!

2

Hi @admuh

It looks great to me! I am still working on projects thought. :sweat_smile:
Answering you point 3, I think it is important topic to understand position property. Did you read this?

I think as we work more in our own projects our css knowledge will go deeper. :sunglasses:
Happy coding and well done! I envy you :laughing:

3

I believe positioning is crucial for web design. Besides FCC, there are many resources on youtube and others that can help you out.

4

Hi, @admuh . People have already addressed your question about positioning, so I’m just going to answer your first two questions.

  1. Ideally, all websites should be mobile-responsive. Many people use tablets and smartphones to access websites, so it’s important that they’re able to view your content. This specific project had a requirement for a media query, which can help with mobile responsiveness. With media queries, you can do stuff like change font sizes or the layout to make a webpage look better under (or over) a certain screen size. The example provided for us had the navbar at the top of the screen for mobile devices, which is a better layout for those devices than a side navbar. Since you currently only have a media query related to motion, adding at least one for mobile screens could improve your page a lot.
  2. You can style all your code with just the code element, just like you could with a paragraph element. If you want to style only some of your code (for example, the code you have that isn’t pre-formatted), you can create a class for each of those code elements in your HTML, for ex: <code class="highlighted">Some code here</code>. Then, in your CSS, you can create a class selector for highlighted and set a different background color. Adding a span class would be unnecessarily complicated, and you aren’t expected to use Javascript for the RWD projects. (It’s optional, but I wouldn’t unless you really know what you’re doing.)
2 Likes
5

  1. If it’s responsive web designing, everything should be responsive. Regardlesss of the type of website.

  2. You can do some styling on CSS.

  3. absolute positioning is used to force the element go wherever you want without anything stopping it, hence, absolute. You use relative positioning on its parent so it doesn’t go further than that parent.

Hope it helps!

1 Like
6

After considering some campers’ advice on responsiveness, I finally updated and added new media query for mobile screens. How do you think about it? Others are welcomed too.

About second question, does it mean that I have to make every code block into its own code element?

7

So I read material that @carlosvisator gave earlier and let me understand this with example:

  1. Suppose that we have <p></p> within <div></div>
  2. If I apply position: absolute; to <p> and move it top: 20;, the <p> element will move top 20 from document body.
  3. If I apply position: relative; to <p> and move it top: 20;, the <p> element will move top 20 from <div>.

Is that correct?

1 Like
8

Blockquote About second question, does it mean that I have to make every code block into its own code element?

No, the code is already its own in-line element. You simply need to add a class if you want to style the code that isn’t pre-formatted. The span tag makes most sense if you want to style something that isn’t already differentiated from the text around it, like a random word in the middle of a paragraph.

The mobile responsiveness looks a lot better now, but I’d personally do the first size-based media query sooner (maybe at 769 px, which is the standard width for portrait-oriented tablet devices.) You might consider reducing some of your font sizes. Your body text and the text in your navbar is 23px, and 16px is generally considered a good size for body text on mobile view. You’ll want to keep your section headers a bit bigger to preserve visual hierarchy, but the size for that could be reduced as well. I also noticed that the width of your pre-formatted code causes horizontal scrolling at around 769 px. If you let some of the longer lines of code take up another line, it would be better for people on mobile devices. Finally, I’d look into setting a maximum height for your navbar on mobile view, and then setting the overflow for the navbar to auto so people can scroll down it on smaller devices. I had a lot of sections in my technical documentation, and I had to control the navbar height on smaller screens so it didn’t take up too much of the screen.

I’m sure there’s things I could improve, but my technical documentation is here if you’d like to take a look at it: https://codepen.io/TurtleQueenCoding/pen/GRQrPeZ

2 Likes
9

Would like to know more about that recommendation. Is there any some W3 recommendation of that?

Noted.

Sounds like a good idea to set a max-height. At first, I considered implement a menu button for mobile devices but then I remembered about my course that it is not a good UX . I visited your page, and it’s nice!

About the overflow auto, is there any reason to not use overflow scroll? Or it is same thing?

Oh and, I noticed an error at line 127 of CSS.

10

I don’t know if there’s some specific recommendation from W3, but it’s a recommendation I’ve seen a lot when I Googled the subject. It’s the default font size for most browsers, and it usually hits that sweet spot for body text by being readable but not too big. Of course, this depends on the specific font you’re using. You can afford to go a little smaller on some, and some look too small at 16px. Use your best judgment on that.

Overflow scroll vs. auto will probably have the same result for this project, but they are slightly different. Overflow auto only shows a scrollbar if it’s needed, and overflow scroll shows it all the time, even when the content is too small to require a scroll bar.

Thanks for pointing out the CSS error; it’s been fixed now.

11

You can’t put same position on the same element. You can put the absolute positioning on the paragraph and the relative positioning on your div. After that, whatever positioning you put on your paragraph like you mentioned top: 20; it will do that but will never get out of the relative which is your div.

Edit: I found a freeCodeCamp article about this, take a look:

12

One quick note: I think that if you try being more generous on padding, that would give better breathing space and contrast to your text.

13

Hi again @admuh

Since my english skills are not good enought I just made a template with some styles to help you understand this, or I hope so . Remember, I am not expert, I am just learning like you :smile:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position Property</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div>
    <p>Some test</p>
  </div>
</body>
</html>

And with this styles:

* {
  outline: 5px solid pink;
  box-sizing: border-box;
}

html {
  height: 100vh;
  background-color: aquamarine;
}

body {
  width: 70vw;
  height: 80vh;
  margin: auto;
  background-color: yellow;
  /* position: static;
  position: relative;
  position: absolute; */
}

div {
  width: 70%;
  height: 70%;
  margin: 4rem auto;
  background-color: violet;
  /* position: static;
  position: relative;
  position: absolute; */
}

p {
  background-color: greenyellow;
  /* position: static;
  position: relative;
  position: absolute; */
  top: 5%;
  left: 5%;
}

The position property is comment out to help you later, after you open that html on your browser, Firefox or Chrome are great for this.
After you upload HTML page, open dev tools on your browser, F12 key / Inspector tab, or double click and select Inspect.
Select the p element in the HTML and, below HTML, switch off/on between the diferent position properties. Static is the default one.
Turn off all and go to DIV element and turn off his position to relative, for example, and back to P element again, and turn off/on every option.
Finally, turn off all again. And active BODY position and do the same tests with your P element again.
I hope i have explain myself well and this help you.
On the other hand, Kevin Powell (youtube, fcc or here Conquering Responsive Layouts Conquering Responsive Layouts) have said that he thinks its better to learn first Grid basis syntax, then Flexbox basis syntax and after start to check have to make things you want or have to fix the issues you got in your own pages. I was thinking the same too after a few tutorials, and I glad he says that. And he thinks also it is better nearly always start for Mobile First Aproach, he has an article there too about it.
Don’t be to hard with yourself.
Allow yourself make mistakes, it is the way we all learn. :wink:
Now I should do something for myself aswell because I am behind in mine projects. :sweat_smile: :laughing:
Happy coding and congrats! :sunglasses:

14

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