shway
/
notes
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity
This repository has been archived on 2023-07-05. You can view files and clone it, but cannot push or open issues/pull-requests.
notes/Terminal Tips/Commands + Settings/Languages/HTML & CSS.md

165 lines
6.8 KiB
Markdown
Raw Permalink Normal View History

classical tips
2023-07-05 03:05:42 +00:00
# HTML
My very first language that I learned at 12 when I was on neopets.com. It stands for HyperText Markup Language and it's used to create websites! The website thing really takes off in the future so it's good that you got pretty good at it at some point. Now if only you could remember your neopets username and password...
Funnily enough I keep going back to the time I w as 12 and learning this stuff because I learned a bunch in a relatively short amount of time and it was so much fun designing my pet pages and my profile.
For instance designing a [Neoshop Blog](https://www.sunnyneo.com/tutorial/blogtutorial.php)!
<center>
<table width="400px" height="400px" background="https://www.sunnyneo.com/bloggers/kadoatieblog.gif" border="0" cellpadding="0" cellspacing="0">
<tr><td height="245px"></td></tr>
<tr><td width="20px"></td>
<td>
<div style="width: 350px; height: 120px; overflow: auto; scrollbar-arrow-color: #4A87D7; scrollbar-darkshadow-color: #4A87D7; scrollbar-track-color: white; scrollbar-face-color: #8DAFE7; scrollbar-shadow-color: #4A87D7; scrollbar-highlight-color: #4A87D7; scrollbar-3dlight-color: #4A87D7; font-size:9pt; color:black; text-align:center; font-weight: bold; font-family: verdana;">
Stuff Goes Here. Leave the Credit in the blog text.
<br>
<br>Blog coding by <a href="https://www.neopets.com/~TheSunnyNeo"><font color="black">SunnyNeo.com</font></a><br><br><br><br><br><br><br><br><br><br>
</div></td></tr>
</table>
</center>
```
<center>
<table width="400px" height="400px" background="https://www.sunnyneo.com/bloggers/kadoatieblog.gif" border="0" cellpadding="0" cellspacing="0">
<tr><td height="245px"></td></tr>
<tr><td width="20px"></td>
<td>
<div style="width: 350px; height: 120px; overflow: auto; scrollbar-arrow-color: #4A87D7; scrollbar-darkshadow-color: #4A87D7; scrollbar-track-color: white; scrollbar-face-color: #8DAFE7; scrollbar-shadow-color: #4A87D7; scrollbar-highlight-color: #4A87D7; scrollbar-3dlight-color: #4A87D7; font-size:9pt; color:black; text-align:center; font-weight: bold; font-family: verdana;">
Stuff Goes Here. Leave the Credit in the blog text.
<br>
<br>Blog coding by <a href="https://www.neopets.com/~TheSunnyNeo"><font color="black">SunnyNeo.com</font></a><br><br><br><br><br><br><br><br><br><br>
</div></td></tr>
</table>
</center>
```
---
```
<!DOCTYPE html>
<html>
<body>
Shwetha's Website
</body>
</html>
```
- `<h1> </h1>` is used for headers
- `<p> </p>` is used for paragraphs
- omg remember a href??
```
<a href = "https://shwethajayaraj.com"> Check out my website!</a>
```
- and then of course, can't forget about img src
```
<img src="/cat.png">
```
-
```
<!DOCTYPE html>
<html>
<body>
<h1>Shwetha's Website</h1>
<p>Welcome!<a href="https://shwethajayaraj.com"> Check out my website!</a></p>
<img src="/cat.png">
<br>My top animes are: </br>
<ol>
<li> Sailor Moon
<a href="https://en.wikipedia.org/wiki/Sailor_Moon">here</a>
</li>
<li> Naruto </li>
<li> Dragonball Z </li>
</ol>
<br>I've lived in: </br>
<ul>
<li> India </li>
<li> California </li>
<li> Connecticut </li>
</ul>
</body>
</html>
```
##### Tables
Creating tables in HTML are possible too if you remember back to your neopets website. Indeed, this is where a bulk of your reference information can live. A good tutorial on getting a refresher with HTML tables is over [here](https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Structuring_planet_data).
![[Pasted image 20230619211526.png]]
An example of an HTML table^. The tutorial for that [found here.](https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Structuring_planet_data)
A thing called [HTMX](https://htmx.org/examples/) releases updates quite frequently.
![[Pasted image 20230620180623.png]]
Here is the sample HTML code for a website visitor [counter](https://www.websiteout.net/counter.php)!
```
<script type="text/javascript" src="//counter.websiteout.net/js/1/0/0/1"></script>
```
---
#### What is PUG?
There is a template engine used for Node.js called Pug, formerly known as JADE, that is being used much more frequently nowadays because it compiles down to HTML. This makes for much more readable, html formatted code.
![[Pasted image 20230607204133.png]]
- [Pug to HTML ](https://codebeautify.org/pug-to-html-converter#:~:text=This%20tool%20that%20converts%20the,to%20Hyper%20Text%20Markup%20language.) converter
---
# CSS
Ah the design and creative part of front end coding. This is what I started out doing when I was around 12 years old on neopets.com. The world has gotten a lot better since then now and we have many options for web design and front end programming.
---
- One of the best tools to use for CSS is https://tailwindcss.com/
- for more info on how to set it up: https://tailwindcss.com/docs/installation
- [Coding an iOS calculator](https://www.youtube.com/watch?v=MaV9VqFMzB4) using CSS, HTML, and javascript
- fantastic [guide](https://every-layout.dev/rudiments/boxes/) on CSS by every-layout.dev
- [sidebar](https://every-layout.dev/layouts/sidebar/) layouts & [search bar l](https://every-layout.dev/demos/sidebar-input-with-button/)ayouts!
- if you're not using codepen.io what are you even doing.
- More tricks to be found [CSS-Tricks](https://css-tricks.com/) as well
- [CSS cursor](https://xuethms.tumblr.com/css-cursors) reference
- I've kept loads more webtools and front end references on raindrop.io
---
### Other notes:
There a lot of philosophies about a "website" such as the [IndieWeb](https://indieweb.org/) which I think is great.
via IndieWeb:
### Beyond Blogging and Decentralization
The IndieWeb effort is [different](https://indieweb.org/different "different") from previous efforts/communities:
- **[Principles](https://indieweb.org/Principles "Principles")** over project-centrism. Others assume a [monoculture](https://indieweb.org/monoculture "monoculture") of one project for all. We are developing a [plurality of projects](https://indieweb.org/principles#Plurality "principles"). The IndieWeb community has a [code-of-conduct](https://indieweb.org/code-of-conduct "code-of-conduct").
- **[Publish on your site](https://indieweb.org/use_what_you_make "use what you make")** instead of emailing a list. Show before tell. Prioritize by [making what you need](https://indieweb.org/make_what_you_need "make what you need"), [creating](https://indieweb.org/create "create"), iterating on your own site.
- **[Design](https://indieweb.org/Design "Design")** first, protocols & formats second. Focus on good UX & [using your own prototype features](https://indieweb.org/use_what_you_make "use what you make") to create minimum necessary [formats](https://indieweb.org/formats "formats") & [protocols](https://indieweb.org/protocols "protocols").