Step 1 - Here we are
So how was this space created? This is what I did to make this site:
I'm not going to re-invent the wheel here, I'm literally going to explain the route I took to go from nothing to establishing an online presence with my own website that I control, can edit in any way I want and have complete ownership of.
Step-by-step Walkthrough guide
This is what I did in order:
- Literally the very first thing Neocities encouraged me to do was to "join Penelope the cat" in a basic HTML tutorial (it's a super simple intro if you're not ready for the next step yet)
- Then I followed this one by learn.sadgrl.online
- At this point I had more than one page and could see is was going to start getting confusing if I couldn't keep track of everything easily, so looked at how to unify page elements across a website
- Second thing
- Third thing
- Next thing
- Final thing
There are basically 3 core parts to any modern responsive website, and I only focussed on 1 of these at a time for clarity's sake.
HTML -
Neocities offers up help to setup straight away, which is why at certain points in this site you might see:
On your first Home page "index.html" you will see that Neocities have already shown you:
This is a paragraph! Here's how you make a link: Neocities.
Here's how you can make bold and italic text.
Here's how you can add an image:
Here's how to make an unordered list:
- First thing
- Second thing
- Third thing
Here's how to make an ordered list:
- First thing
- Second thing
- Third thing
To add to that, here's tabular data:
| Name | Number |
|---|---|
| Person_1 | 42 |
| Person_2 | 69 |
Resources
To learn more HTML/CSS, check out these tutorials!
Needed to center text etc: W3.org
That site also gave me an intro to CSS: W3.org
List of CSS properties: CSS properties
Some cheat sites:Ultimately, you can use this validator to check if your html is written correctly (to convention).
CSS -
Found some simple CSS generators on Shecodes, (ironically written by a French man)
N.B. White space html = " " (Source).
This uses "html entities". Reference lists can be found here:
Buttons
It's likely you'll want buttons somewhere:
As with most things, you can style the button in the .CSS stylesheet.
Now this is awesome! Thank you Aegi. This will be a really cool site development.
Pure HTML+CSS template gallary. Some of these are incredible, like https://codemyui.com/pure-css-page-turning-animation-for-images/. I wouldrecomend exploring and using the limit of CSS befor moving on to JavaScript.
Since learning all these CSS tricks (or learning to look them up as needed), I decided to see how I might be able to 'transform' elements for an effect I'd like to use on my home page
Howevwer, it seems that these require more advanced SCSS or SASS features and I haven't figured out how to set that up yet: