|
|
|
|
<!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" />
|
|
|
|
|
<link rel="stylesheet" href="style.css" />
|
|
|
|
|
<title>Pimp My Soupboat</title>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<!-- TODO: number headings -->
|
|
|
|
|
|
|
|
|
|
<main>
|
|
|
|
|
<h1>Pimp my Soupboat 🍜</h1>
|
|
|
|
|
<p>
|
|
|
|
|
Hello this is a little workshop to cover the basics of HTML + CSS + JS in order to
|
|
|
|
|
customize our Soupboat⛵
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<h2>Table of contents</h2>
|
|
|
|
|
<ol>
|
|
|
|
|
<li>Workspace, or: where do we code</li>
|
|
|
|
|
<li>Files in the Soupboat</li>
|
|
|
|
|
<li>HTML (for marking up contents)</li>
|
|
|
|
|
<li>CSS (for styling our website)</li>
|
|
|
|
|
<li>JS (for making things dynamic, i.e. magic)</li>
|
|
|
|
|
<li>References</li>
|
|
|
|
|
</ol>
|
|
|
|
|
|
|
|
|
|
<div class="chapter">
|
|
|
|
|
<h2>Workspace, or: where do we code</h2>
|
|
|
|
|
<h3>Coding in Jupiter editor</h3>
|
|
|
|
|
<ul>
|
|
|
|
|
<li class="pro">Fast and easy</li>
|
|
|
|
|
<li class="pro">You don't need to replace files all the time</li>
|
|
|
|
|
<li class="pro">
|
|
|
|
|
The page is already hosted on the Soupboat, so it is online!
|
|
|
|
|
</li>
|
|
|
|
|
<li class="cons">You need to be connected to edit your files</li>
|
|
|
|
|
<li class="cons">
|
|
|
|
|
Less code editing features (code completion, helps, templates, formatting)
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<h3>Coding in a text editor (example: VS Code)</h3>
|
|
|
|
|
<ul>
|
|
|
|
|
<li class="pro">Code editing features!</li>
|
|
|
|
|
<li class="pro">Plugins! Extensions!</li>
|
|
|
|
|
<li class="pro">You can work offline</li>
|
|
|
|
|
<li class="cons">You need to install the editor</li>
|
|
|
|
|
<li class="cons">You need to keep up to date the files on the Soupboat</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="chapter">
|
|
|
|
|
<h2>Files in the Soupboat</h2>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
In Jupiter Lab everyone has 2 main folders: <code>public_html</code> and
|
|
|
|
|
<code>shared</code>. The former takes you to your personal page, while the
|
|
|
|
|
latter permits you to access to the common areas of the Soupboat.
|
|
|
|
|
</p>
|
|
|
|
|
<p>Remember that web URLs are just like paths on your computer.</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="chapter">
|
|
|
|
|
<h2>HTML (for marking up contents)</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chapter">
|
|
|
|
|
<h2>CSS (for styling our website)</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chapter">
|
|
|
|
|
<h2>JS (for making things dynamic, i.e. magic)</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chapter">
|
|
|
|
|
<h2>References</h2>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML"
|
|
|
|
|
>MDN Web Docs (boring but really complete)
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="https://www.w3schools.com/"
|
|
|
|
|
>w3school documentation, anything you need to know</a
|
|
|
|
|
>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="https://scrimba.com/learn/htmlcss"
|
|
|
|
|
>HTML/CSS Crash Course on Scrimba</a
|
|
|
|
|
>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="https://css-tricks.com/">CSS tricks for more guided css-styling</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
