kamo
/
pimp-soup
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

contents wip

Browse Source
master
km0 3 years ago
parent 0c1ef90c40
commit a5bf221448
7 changed files with 157 additions and 46 deletions
Show Stats Download Patch File Download Diff File

3
.vscode/settings.json vendored
Unescape Escape View File

@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}

4
README.md
Unescape Escape View File

@ -1,3 +1,3 @@
# pimp-soup # Pimp my Soupboat
Little workshop on how to customize the soupboat Hello this is a little workshop to cover the basics of HTML + CSS + JS in order to customize our Soupboat⛵

135
index.html
Unescape Escape View File

@ -1,54 +1,101 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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>
<head> <body>
<meta charset="UTF-8"> <!-- TODO: number headings -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pimp My Soupboat</title>
</head>
<body> <main>
<!-- TODO: number headings --> <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>
<h1>Pimp my Soupboat 🍜</h1> <h2>Table of contents</h2>
<p> <ol>
Hello this is a little workshop to cover the basics of HTML + CSS + JS in order to customize our Soupboat⛵ <li>Workspace, or: where do we code</li>
</p> <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>
<h2>Table of contents</h2> <h3>Coding in a text editor (example: VS Code)</h3>
<ol> <ul>
<li>Workspace, or: where do we code</li> <li class="pro">Code editing features!</li>
<li>Files in the Soupboat</li> <li class="pro">Plugins! Extensions!</li>
<li>HTML (for marking up contents)</li> <li class="pro">You can work offline</li>
<li>CSS (for styling our website)</li> <li class="cons">You need to install the editor</li>
<li>JS (for making things dynamic, i.e. magic)</li> <li class="cons">You need to keep up to date the files on the Soupboat</li>
<li>References</li> </ul>
</ol> </div>
<h2>Workspace, or: where do we code</h2> <div class="chapter">
<p> <h2>Files in the Soupboat</h2>
Coding in
</p>
<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>
<h2>HTML (for marking up contents)</h2> <div class="chapter">
<h2>HTML (for marking up contents)</h2>
<h2>CSS (for styling our website)</h2> </div>
<div class="chapter">
<h2>JS (for making things dynamic, i.e. magic)</h2> <h2>CSS (for styling our website)</h2>
</div>
<h2>References</h2> <div class="chapter">
<ul> <h2>JS (for making things dynamic, i.e. magic)</h2>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN Web Docs (boring but really complete) </a> </div>
</li> <div class="chapter">
<li><a href="https://www.w3schools.com/">w3school documentation, anything you need to know</a></li> <h2>References</h2>
<li><a href="https://scrimba.com/learn/htmlcss">HTML/CSS Crash Course on Scrimba</a></li> <ul>
<li><a href="https://css-tricks.com/">CSS tricks for more guided css-styling</a></li> <li>
</ul> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML"
>MDN Web Docs (boring but really complete)
</body> </a>
</li>
</html> <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>

39
style.css
Unescape Escape View File

@ -0,0 +1,39 @@
html,
body {
margin: 0;
padding: 24px;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
color: #333;
}
main {
max-width: 1200px;
margin: 0 auto;
}
h1 {
text-align: center;
}
a {
color: #333;
}
.pro {
color: green;
}
.cons {
color: tomato;
}
.chapter {
padding: 24px;
margin: 32px 0;
background-color: #c6e2ff;
}

BIN
template/assets/pandagiri.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

18
template/index.html
Unescape Escape View File

@ -0,0 +1,18 @@
<!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>Onigiri</title>
</head>
<body>
<h1>Onigiri is...</h1>
<img src="./assets/pandagiri.jpg" alt="Cute panda or tasty onigiri" />
<p>
Onigiri, also known as omusubi, nigirimeshi, or rice ball, is a Japanese food made from
white rice formed into triangular or cylindrical shapes and often wrapped in nori.
</p>
</body>
</html>

4
template/style.css
Unescape Escape View File

@ -0,0 +1,4 @@
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
}
Write Preview
Loading…
Cancel
Save