# 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... Bring back the blog!1 Amazing html tutorial sites: - https://thoughts.melonking.net/guides/introduction-to-the-web-revival-3-make-a-website - https://brutalist-web.design/ - [motherfuckingwebsite](https://motherfuckingwebsite.com) written in pure html as one should 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. - [Brackets](https://brackets.io/) is the preferred Editor for HTML/CSS but nowadays there is [Phoenix](https://phcode.dev/)! Straight from your browser. For instance designing a [Neoshop Blog](https://www.sunnyneo.com/tutorial/blogtutorial.php)!
Stuff Goes Here. Leave the Credit in the blog text.

Blog coding by SunnyNeo.com









On a more serious note, HTML is used everywhere. HTML (**Hypertext Markup Language**) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document. **HTML has been in use since 1991,** but HTML 4.0 was the first standardized version where international characters were given reasonably complete treatment. When an HTML document includes special characters outside the range of seven-bit ASCII, there are two aspects should be taken into consideration: the information's integrity, and universal browser display. ### Neopets HTML Code ```
Stuff Goes Here. Leave the Credit in the blog text.

Blog coding by SunnyNeo.com









``` Getting started in HTML --- ``` Shwetha's Website ``` - `

` is used for headers - `

` is used for paragraphs - omg remember a href?? ``` Check out my website! ``` - and then of course, can't forget about img src ``` ``` - ```

Shwetha's Website

Welcome! Check out my website!


My top animes are:
  1. Sailor Moon here
  2. Naruto
  3. Dragonball Z

I've lived in:
``` ##### 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)! ``` ``` ### 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"). --- #### 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 - Alternatively, there is also [this HTML encoder](https://www.w3docs.com/tools/html-encoder/) tool --- # 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 - The [CSS Cheatsheet](https://cheatography.com/davechild/cheat-sheets/css2/) all on one page! - [Every Layout](https://every-layout.dev) is a guide that will show you how to code CSS for, well, every layout! --- # Customizing Style - hundreds of user themes found on [Stylish](https://userstyles.org) - use the [Stylus extension](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) to make custom CSS - ![video](https://www.youtube.com/watch?v=fCVvGwoF5cQ) - [CSS Peeper](https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk) is another necessary inspection if going based off of inspired Inspected webpages --- ---> Onwards to UX/UI Design HTML & CSS were how you hand coded designs for webpages, this was before automation where it was simply easier to copy and paste to do the same thing. However, now that is so commonplace it has since lost the charm of hand-crafting a webpage from HTML & CSS to create something of your own. That is why there is a directory that you can place hand-crafted webpages onto as well. [Here is the link to add your hand-coded website.](https://gossipsweb.net)