HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<div class="container" id="top-anchor">
<nav id="navbar">
<header><h1>Unix for beginners</h1></header>
<ul>
<li><a href="#_introduction" class="nav-link">_Introduction</a></li>
<li><a href="#_what_is_unix?" class="nav-link">_What is Unix?</a></li>
<li><a href="#_unix_architecture" class="nav-link">_Unix architecture</a></li>
<li><a href="#_listing_files" class="nav-link">_Listing files</a></li>
<li><a href="#_metacharacters" class="nav-link">_Metacharacters</a></li>
<li><a href="#_hidden_files" class="nav-link">_Hidden files</a></li>
<li><a href="#_creating_files" class="nav-link">_Creating files</a></li>
<li><a href="#_editing_files" class="nav-link">_Editing files</a></li>
<li><a href="#_display_content_of_a_file" class="nav-link">_Display content of a file</a></li>
<li><a href="#_counting_words_in_a_file" class="nav-link">_Counting words in a file</span></a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="_introduction">
<header><h2 class="first-h2">_Introduction</h2></header>
<p class="project-brief">This project is part of my ongoing studies with the <a href="https://www.freecodecamp.org/" target="_blank">FreeCodeCamp project</a>. After learning about the basics of HTML and CSS and how it relates to Responsive Web Design, I am encouraged to test out my skills with real life projects. Here I´ve styled a beginner´s technical documentation page for Unix. All content here are excerpts from <a href="https://www.tutorialspoint.com/unix/index.htm" target="_blank">Tutorialspoint</a>, a fantastic Unix resource.</p>
<p>Unix is a computer Operating System which is capable of handling activities from multiple users at the same time. The development of Unix started around 1969 at AT&T Bell Labs by Ken Thompson and Dennis Ritchie. This tutorial gives a very good understanding on Unix.</p>
<p>This tutorial has been prepared for the beginners to help them understand the basics to advanced concepts covering Unix commands, Unix shell scripting and various utilities. We assume you have adequate exposure to Operating Systems and their functionalities. A basic understanding on various computer concepts will also help you in understanding the various exercises given in this tutorial.</p>
<p>If you are willing to learn the Unix/Linux basic commands and Shell script but you do not have a setup for the same, then do not worry — <a href="https://www.tutorialspoint.com/codingground.htm" target="_blank">The CodingGround</a> is available on a highend dedicated server giving you real programming experience with the comfort of singleclick execution. Yes! It is absolutely free and online.</p>
</section>
<section class="main-section" id="_what_is_unix?">
<header><h2>_What is Unix?</h2></header>
<a href="#top-anchor" class="what-is-unix-top-link">Back to top</a>
<p>The Unix operating system is a set of programs that act as a link between the computer and the user. The computer programs that allocate the system resources and coordinate all the details of the computer's internals is called the operating system or the kernel.</p>
<p>Users communicate with the kernel through a program known as the shell. The shell is a command line interpreter; it translates commands entered by the user and converts them into a language that is understood by the kernel.</p>
<ul>
<li>Unix was originally developed in 1969 by a group of AT&T employees Ken Thompson, Dennis Ritchie, Douglas McIlroy, and Joe Ossanna at Bell Labs.</li>
<li>There are various Unix variants available in the market. Solaris Unix, AIX, HP Unix and BSD are a few examples. Linux is also a flavor of Unix which is freely available.</li>
<li>Several people can use a Unix computer at the same time; hence Unix is called a multiuser system.</li>
<li>A user can also run multiple programs at the same time; hence Unix is a multitasking environment.</li>
</ul>
</section>
<section class="main-section" id="_unix_architecture">
<header><h2>_Unix architecture</h2></header>
<a href="#top-anchor" class="architecture-top-link">Back to top</a>
<p>Here is a basic block diagram of a Unix system:</p>
<img src="https://jjberg83.github.io/myImageLibrary/unix_architecture.jpg" alt="Diagram showing architecture of Unix">
<p>The main concept that unites all the versions of Unix is the following four basics:</p>
<ul>
<li>Kernel − The kernel is the heart of the operating system. It interacts with the hardware and most of the tasks like memory management, task scheduling and file management.</li>
<li>Shell − The shell is the utility that processes your requests. When you type in a command at your terminal, the shell interprets the command and calls the program that you want. The shell uses standard syntax for all commands. C Shell, Bourne Shell and Korn Shell are the most famous shells which are available with most of the Unix variants.</li>
<li>Commands and Utilities − There are various commands and utilities which you can make use of in your day to day activities. cp, mv, cat and grep, etc. are few examples of commands and utilities. There are over 250 standard commands plus numerous others provided through 3rd party software. All the commands come along with various options.</li>
<li>Files and Directories − All the data of Unix is organized into files. All files are then organized into directories. These directories are further organized into a tree-like structure called the filesystem.</li>
</ul>
<h3>_System bootup</h3>
<p>If you have a computer which has the Unix operating system installed in it, then you simply need to turn on the system to make it live.</p>
<p>As soon as you turn on the system, it starts booting up and finally it prompts you to log into the system, which is an activity to log into the system and use it for your day-to-day activities.</p>
<h3>_Login Unix</h3>
<p>When you first connect to a Unix system, you usually see a prompt such as the following:</p>
<pre><code>login:</code></pre>
<h3>_To log in</h3>
<ul>
<li>Have your userid (user identification) and password ready. Contact your system administrator if you don't have these yet.</li>
<li>Type your userid at the login prompt, then press ENTER. Your userid is case-sensitive, so be sure you type it exactly as your system administrator has instructed.</li>
<li>Type your password at the password prompt, then press ENTER. Your password is also case-sensitive.</li>
<li>If you provide the correct userid and password, then you will be allowed to enter into the system. Read the information and messages that comes up on the screen, which is as follows.</li>
</ul>
<pre><code>
login : amrood
amrood's password:
Last login: Sun Jun 14 09:32:32 2009 from 62.61.164.73
$
</code></pre>
<p>You will be provided with a command prompt (sometime called the $ prompt ) where you type all your commands. For example, to check calendar, you need to type the cal command as follows:</p>
<pre><code>
$ cal
June 2009
Su Mo Tu We Th Fr Sa
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
$
</code></pre>
</section>
<div class="quote">
<img src="https://jjberg83.github.io/myImageLibrary/technical-documentation-page/dennis-ritchie.jpg" alt="Profile picture of programmer Dennis Ritchie" class="profile-pic">
<blockquote cite="https://www.brainyquote.com/quotes/dennis_ritchie_172475?src=t_unix">
<p>UNIX is basically a simple operating system, but you have to be a genius to understand the simplicity.</p>
<footer><cite>Dennis Ritchie</cite></footer>
</blockquote>
</div><!-- quote -->
<section class="main-section" id="_listing_files">
<header><h2>_Listing files</h2></header>
<a href="#top-anchor">Back to top</a>
<p>To list the files and directories stored in the current directory, use the following command:</p>
<pre><code>$ls</code></pre>
<p>Here is the sample output of the above command:</p>
<pre><code class="tabs">
$ls
bin hosts lib res.03
ch07 hw1 pub test_results
ch07.bak hw2 res.01 users
docs hw3 res.02 work
</code></pre>
<p>The command ls supports the -l option which would help you to get more information about the listed files:</p>
<pre><code>
$ls -l
total 1962188
drwxrwxr-x 2 amrood amrood 4096 Dec 25 09:59 uml
-rw-rw-r-- 1 amrood amrood 5341 Dec 25 08:38 uml.jpg
drwxr-xr-x 2 amrood amrood 4096 Feb 15 2006 univ
drwxr-xr-x 2 root root 4096 Dec 9 2007 urlspedia
-rw-r--r-- 1 root root 276480 Dec 9 2007 urlspedia.tar
drwxr-xr-x 8 root root 4096 Nov 25 2007 usr
drwxr-xr-x 2 200 300 4096 Nov 25 2007 webthumb-1.01
-rwxr-xr-x 1 root root 3192 Nov 25 2007 webthumb.php
-rw-rw-r-- 1 amrood amrood 20480 Nov 25 2007 webthumb.tar
-rw-rw-r-- 1 amrood amrood 5654 Aug 9 2007 yourfile.mid
-rw-rw-r-- 1 amrood amrood 166255 Aug 9 2007 yourfile.swf
drwxr-xr-x 11 amrood amrood 4096 May 29 2007 zlib-1.2.3
$
</code></pre>
<p>Here is the information about all the listed columns:</p>
<ul>
<li>First Column − Represents the file type and the permission given on the file. Below is the description of all type of files.</li>
<li>Second Column − Represents the number of memory blocks taken by the file or directory.</li>
<li>Third Column − Represents the owner of the file. This is the Unix user who created this file.</li>
<li>Fourth Column − Represents the group of the owner. Every Unix user will have an associated group.</li>
<li>Fifth Column − Represents the file size in bytes.</li>
<li>Sixth Column − Represents the date and the time when this file was created or modified for the last time.</li>
<li>Seventh Column − Represents the file or the directory name.</li>
</ul>
</section>
<section class="main-section" id="_metacharacters">
<header><h2>_Metacharacters</h2></header>
<a href="#top-anchor">Back to top</a>
<p>Metacharacters have a special meaning in Unix. For example, * and ? are metacharacters. We use * to match 0 or more characters, a question mark (?) matches with a single character. For example:</p>
<pre><code>
$ls ch*.doc
</code></pre>
<p>Displays all the files, the names of which start with ch and end with .doc</p>
<pre><code>
ch01-1.doc ch010.doc ch02.doc ch03-2.doc
ch04-1.doc ch040.doc ch05.doc ch06-2.doc
ch01-2.doc ch02-1.doc c
</code></pre>
<p>Here, * works as meta character which matches with any character. If you want to display all the files ending with just .doc, then you can use the following command:</p>
<pre><code>
$ls *.doc
</code></pre>
</section>
<section class="main-section" id="_hidden_files">
<header><h2>_Hidden files</h2></header>
<a href="#top-anchor">Back to top</a>
<p>An invisible file is one, the first character of which is the dot or the period character (.). Unix programs (including the shell) use most of these files to store configuration information.</p>
<p>Some common examples of the hidden files include the files:</p>
<ul>
<li>.profile − The Bourne shell ( sh) initialization script</li>
<li>.kshrc − The Korn shell ( ksh) initialization script</li>
<li>.cshrc − The C shell ( csh) initialization script</li>
<li>.rhosts − The remote shell configuration file</li>
</ul>
<p>To list the invisible files, specify the -a option to ls:</p>
<pre><code>
$ ls -a
. .profile docs lib test_results
.. .rhosts hosts pub users
.emacs bin hw1 res.01 work
.exrc ch07 hw2 res.02
.kshrc ch07.bak hw3 res.03
$
</code></pre>
<ul>
<li>Single dot (.) − This represents the current directory.</li>
<li>Double dot (..) − This represents the parent directory.</li>
</ul>
</section>
<div class="quote">
<img src="https://jjberg83.github.io/myImageLibrary/technical-documentation-page/ellen-ullman.jpg" alt="Profile picture of programmer Ellen Ullman" class="profile-pic">
<blockquote cite="https://www.brainyquote.com/quotes/ellen_ullman_849346?src=t_unix">
<p>I came of technical age with UNIX, where I learned with power-greedy pleasure that you could kill a system right out from under yourself with a single command.</p>
<footer><cite>Ellen Ullman</cite></footer>
</blockquote>
</div><!-- quote -->
<section class="main-section" id="_creating_files">
<header><h2>_Creating files</h2></header>
<a href="#top-anchor">Back to top</a>
<p>You can use the vi editor to create ordinary files on any Unix system. You simply need to give the following command:</p>
<pre><code>
$ vi filename
</code></pre>
<p>The above command will open a file with the given filename. Now, press the key i to come into the edit mode. Once you are in the edit mode, you can start writing your content in the file as in the following program:</p>
<pre><code>
This is unix file....I created it for the first time.....
I'm going to save this content in this file.
</code></pre>
<p>Once you are done with the program, follow these steps:</p>
<ul>
<li>Press the key esc to come out of the edit mode.</li>
<li>Press two keys Shift + ZZ together to come out of the file completely.</li>
</ul>
<p>You will now have a file created with filename in the current directory.</p>
<pre><code>
$ vi filename
$
</code></pre>
</section>
<section class="main-section" id="_editing_files">
<header><h2>_Editing files</h2></header>
<a href="#top-anchor">Back to top</a>
<p>You can edit an existing file using the vi editor. We will discuss in short how to open an existing file:</p>
<pre><code>
$ vi filename
</pre></code>
<p>Once the file is opened, you can come in the edit mode by pressing the key i and then you can proceed by editing the file. If you want to move here and there inside a file, then first you need to come out of the edit mode by pressing the key Esc. After this, you can use the following keys to move inside a file:</p>
<ul>
<li>l key to move to the right side.</li>
<li>h key to move to the left side.</li>
<li>k key to move upside in the file.</li>
<li>j key to move downside in the file.</li>
</ul>
<p>So using the above keys, you can position your cursor wherever you want to edit. Once you are positioned, then you can use the i key to come in the edit mode. Once you are done with the editing in your file, press Esc and finally two keys Shift + ZZ together to come out of the file completely.</p>
</section>
<section class="main-section" id="_display_content_of_a_file">
<header><h2>_Display content of a file</h2></header>
<a href="#top-anchor">Back to top</a>
<p>You can use the cat command to see the content of a file. Following is a simple example to see the content of the above created file:</p>
<pre><code>
$ cat filename
This is unix file....I created it for the first time.....
I'm going to save this content in this file.
$
</pre></code>
<p>You can display the line numbers by using the -b option along with the cat command as follows:</p>
<pre><code>
$ cat -b filename
1 This is unix file....I created it for the first time.....
2 I'm going to save this content in this file.
$
</code></pre>
</section>
<div class="quote">
<img src="https://jjberg83.github.io/myImageLibrary/technical-documentation-page/scott-adams.jpg" alt="Profile picture of cartoonist Scott Adams" class="profile-pic">
<blockquote cite="https://www.brainyquote.com/quotes/scott_adams_130522?src=t_unix">
<p>If you have any trouble sounding condescending, find a Unix user to show you how it's done.</p>
<footer><cite>Scott Adams</cite></footer>
</blockquote>
</div><!-- quote -->
<section class="main-section" id="_counting_words_in_a_file">
<header><h2>_Counting words in a file</h2></header>
<a href="#top-anchor">Back to top</a>
<p>You can use the wc command to get a count of the total number of lines, words, and characters contained in a file. Following is a simple example to see the information about the file created above:</p>
<pre><code>
$ wc filename
2 19 103 filename
$
</code></pre>
<p>Here is the detail of all the four columns:</p>
<ul>
<li>First Column − Represents the total number of lines in the file.</li>
<li>Second Column − Represents the total number of words in the file.</li>
<li>Third Column − Represents the total number of bytes in the file. This is the actual size of the file.</li>
<li>Fourth Column − Represents the file name.</li>
</ul>
<p>You can give multiple files and get information about those files at a time. Following is simple syntax:</p>
<pre><code>
$ wc filename1 filename2 filename3
</pre></code>
</section>
</main>
</div><!-- container -->
html {
box-sizing: border-box;
background: var(--background);
color: var(--secondary);
}
*, *:before, *:after {
box-sizing: inherit;
}
:root {
--primary: #39A817;
--secondary: #525E4B;
--background: #F2F2F2;
}
.container {
font-family: 'Open Sans', sans-serif;
}
/* -----------------------------------------
MAIN NAVIGATION
------------------------------------------*/
#navbar ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 12px;
line-height: 1.5em;
}
#navbar li {
margin-top: 20px;
}
#navbar a {
color: var(--primary);
text-decoration: none;
}
#navbar a:hover {
color: var(--background);
text-decoration: none;
}
#navbar {
position: -webkit-sticky;
position: sticky;
top: 0;
height: 600px;
background: var(--secondary, grey)
}
/* -----------------------------------------
FONT STYLING
------------------------------------------*/
header, h2, h3, #navbar, a[href="#top-anchor"] {
font-family: 'Press Start 2P', cursive;
}
h2 {
margin-top: 50px;
padding-top: 25px;
}
.first-h2 {
margin-top: 26px;
}
h3 {
margin-top: 50px;
}
.quote {
text-align: center;
margin: 70px 0 50px 0;
font-size: 25px;
}
.quote p {
margin: 0 0 15px 0;
font-weight: bold;
}
.quote p:before {
content: "\275D";
margin-right: 5px;
}
.quote p:after {
content: "\275E";
margin-left: 5px;
}
h1 {
margin-bottom: 40px;
color: var(--background);
line-height: 1.2em;
}
h2, a {
color: var(--primary);
}
h3 {
color: var(--secondary);
}
a, a[href="#top-anchor"] {
font-weight: bold;
}
a:hover {
color: var(--secondary);
}
a[href="#top-anchor"] {
color: var(--secondary);
}
a[href="#top-anchor"]:hover {
color: var(--primary);
}
#main-doc ul {
margin-left: -37px;
}
#main-doc li {
list-style-type: none;
margin-bottom: 10px;
}
#main-doc li:before {
content: ">";
font-weight: bold;
color: var(--primary);
margin-left: -21px;
margin-right: 10px;
}
a[href="#top-anchor"] {
font-size: 12px;
}
.project-brief {
font-weight: bold;
border: 3px dotted var(--primary);
padding: 10px;
}
/* -----------------------------------------
MISCELLANEOUS
------------------------------------------*/
pre {
background: var(--secondary);
padding: 10px;
min-width: 640px;
}
code {
color: var(--primary);
font-weight: bold;
font-size: 16px;
}
#navbar, #main-doc {
padding: 40px;
}
.profile-pic {
max-width: 400px;
box-shadow: 0 2px 10px 5px rgba(0,0,0,0.19), 0 3px 10px 5px rgba(0,0,0,0.23);
border: 25px solid #fff;
transform: rotate(0.7deg);
margin-bottom: 15px;
}
/* -----------------------------------------
MEDIA QUERIES
------------------------------------------*/
@media (min-width: 1200px) {
.container {
margin: 0 auto;
width: 1190px;
display: block;
}
}
@media (min-width: 1060px) {
.container {
display: grid;
grid-template-columns: 300px 1fr;
grid-column-gap: 20px;
}
.architecture-top-link {
display: none;
}
}
@media (max-width: 1059px) {
#navbar {
height: 520px;
position: static;
}
}
@media (max-width: 814px) {
.first-h2 {
margin-top: 0;
}
}
@media (max-width: 550px) {
img {
width: 100%;
}
}
@media (max-width: 529px) {
#navbar {
height: 550px;
}
}
@media (max-width: 430px) {
h2, h3 {
font-size: 17px;
margin-top: 35px;
}
.quote {
font-size: 20px;
margin: 30px 0 10px 0;
}
.profile-pic {
border: 15px solid #fff;
}
}
@media (min-width: 400px) {
.what-is-unix-top-link {
display: none;
}
}
@media (max-width: 395px) {
#navbar {
height: 580px;
}
.quote {
font-size: 15px;
}
}
@media (max-width: 330px) {
h2, h3 {
font-size: 14px;
}
}
@media (max-width: 312px) {
#navbar {
height: 600px;
}
}
@media (max-width: 287px) {
#navbar {
height: 640px;
}
.quote, .quote p {
text-align: left;
margin-left: -10px;
}
.quote p:before, .quote p:after {
margin: 0;
}
.profile-pic {
border-width: 8px;
}
}
@media (max-width: 264px) {
#navbar {
height: 700px;
}
h2, h3, a[href="#top-anchor"] {
font-size: 10px;
}
}
@media (max-width: 252px) {
#navbar {
height: 780px;
font-size: 10px;
}
.profile-pic {
border: none;
box-shadow: none;
}
}
Also see: Tab Triggers