Skip to content

Instantly share code, notes, and snippets.

@VishrutAggarwal

VishrutAggarwal/fcc-technical-documentation-page.markdown

Last active January 25, 2022 15:29
Show Gist options
  • Save VishrutAggarwal/428744f6ee484115c4288b39c35fae09 to your computer and use it in GitHub Desktop.
Save VishrutAggarwal/428744f6ee484115c4288b39c35fae09 to your computer and use it in GitHub Desktop.
Download ZIP
FCC: Technical Documentation Page
Raw
fcc-technical-documentation-page.markdown
Raw
index.html
<html>
<body>
<aside>
<nav id = "navbar">
<header>Programming Languages</header>
<div class = "links">
<a href = "#C++" class = "nav-link">C++</a>
<a href = "#Python" class = "nav-link">Python</a>
<a href = "#Java" class = "nav-link">Java</a>
<a href = "#C#" class = "nav-link">C#</a>
<a href = "#JavaScript" class = "nav-link">JavaScript</a>
<a href = "#References" class = "nav-link">References</a>
</div>
</nav>
</aside>
<main id = "main-doc">
<section id = "C++" class = "main-section">
<header>C++</header>
<p>C++ is used to develop games, desktop apps, operating systems, browsers, and so on because of its performance.</p>
<p>After learning C++, it will be much easier to learn other programming languages like Java, Python, etc.</p>
<p>C++ helps you to understand the internal architecture of a computer, how computer stores and retrieves information.</p>
<footer>
<p>This is how "Hello World!" is printed in the language's syntax:</p>
<pre><code>#include &ltiostream&gt
int main() {
std::cout << "Hello World!";
return 0;
}</code></pre>
</footer>
</section>
<section id = "Python" class = "main-section">
<header>Python</header>
<p>Python is easy to learn. Its syntax is easy and code is very readable.</p>
<p>Python has a lot of applications. It's used for developing web applications, data science, rapid application development, and so on.</p>
<p>Python allows you to write programs in fewer lines of code than most of the programming languages.</p>
<p>The popularity of Python is growing rapidly. Now it's one of the most popular programming languages.</p>
<footer>
<p>This is how "Hello World!" is printed in the language's syntax:</p>
<pre><code>print("Hello, world!")</code></pre>
</footer>
</section>
<section id = "Java" class = "main-section">
<header>Java</header>
<p>Java is a platform-independent language. We can write Java code in one platform and run it in another platform.</p>
<p>Java is a general-purpose language with a wide range of applications. It's used for developing mobile and desktop applications, big data processing, embedded systems, and so on.</p>
<p>Java is an object-oriented programming language. It helps in code reusability.</p>
<footer>
<p>This is how "Hello World!" is printed in the language's syntax:</p>
<pre><code>class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}</code></pre>
</footer>
</section>
<section id = "C#" class = "main-section">
<header>C#</header>
<p>Being a high-level language, the basic constructs of C# is easy to understand.</p>
<p>C# is the most popular language used for desktop applications. It is also widely used for creating web applications.</p>
<p>C# has a huge community. Hence a C# related question is more likely to be answered quickly.</p>
<footer>
<p>This is how "Hello World!" is printed in the language's syntax:</p>
<pre><code>namespace HelloWorld
{
class Hello {
static void Main(string[] args)
{
System.Console.WriteLine("Hello World!");
}
}
}</code></pre>
</footer>
</section>
<section id = "JavaScript" class = "main-section">
<header>JavaScript</header>
<p>JavaScript is used on both the client-side and the server-side. On the client-side, the code is run and displayed by the browser. On the server-side, Node.js is used.</p>
<p>JavaScript is a platform-independent language. Any browser supporting JavaScript can run the code irrespective of the operating system.</p>
<p>JavaScript uses the just-in-time compilation technique. Since the compilation is handled at run time, JavaScript is considered an interpreted language.</p>
<p>JavaScript is a dynamically typed language. That is, a variable containing a number may be reassigned to a string.</p>
<footer>
<p>This is how "Hello World!" is printed in the language's syntax:</p>
<pre><code>console.log("Hello World");</code></pre>
</footer>
</section>
<section id = "References" class = "main-section">
<header>References</header>
<ul>
<li>https://www.programiz.com/cpp-programming</li>
<li>https://www.programiz.com/python-programming</li>
<li>https://www.programiz.com/java-programming</li>
<li>https://www.programiz.com/csharp-programming</li>
<li>https://www.programiz.com/javascript</li>
</ul>
</section>
</main>
</body>
</html>
Raw
scripts
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
Raw
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
font-family: sans-serif;
grid-template-columns: 250px 1fr;
grid-template-rows: 300px 1fr;
grid-template-areas: "aside content"
"aside content";
}
aside {
position: fixed;
border-right: 3px solid;
border-color: #AAA;
grid-area: aside;
width: 250px;
height: 100%;
}
nav {
display: flex;
flex-direction: column;
width: 100%;
padding: 20px;
align-items: center;
gap: 30px;
}
.links {
display: flex;
flex-direction: column;
width: 250px;
height: 100vh;
overflow-y: scroll;
}
a {
color: #3B3B3B;
text-decoration: none;
border-top: 1px solid #666;
padding: 10px 25px;
width: 100%;
}
nav header {
font-size: 2rem;
}
.main-section header {
font-size: 2rem;
margin-bottom: 10px;
}
main {
display: flex;
flex-direction: column;
margin: 40px;
grid-area: content;
}
section {
display: flex;
flex-direction: column;
gap: 10px;
}
p {
color: #3B3B3B;
}
pre {
margin: 20px;
padding: 10px;
background-color: #F2F9F9;
border-radius: 10px;
}
footer {
margin-top: 19px;
font-style: italic;
}
ul{
padding-left: 60px;
}
@media screen and (max-width: 700px) {
body {
grid-template-areas: "aside aside"
"content content";
}
aside {
position: relative;
height: 250px;
width: 100%;
border-right: 0px;
}
.links {
width: 97vw;
height: 230px;
border-top: 2px solid #666;
border-bottom: 2px solid #666;
}
}
@media screen and (max-width: 416px) {
body {
grid-template-areas: "aside aside"
"content content";
}
aside {
position: relative;
height: 250px;
width: 100%;
border-right: 0px;
}
.links {
width: 97vw;
height: 200px;
border-top: 2px solid #666;
border-bottom: 2px solid #666;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment