HTML Resources
resources that have helped me during my website building that might help you now
Hello there!
I did not create this website by hand. I am not that good. I only know basic HTML (；´∀｀)
Instead, I had several help! and several uh, sleepless nights fueled by compulsion and an obsession to get it right. For example, I am writing this at 5/17/2022 at 2:43AM. I need to get it right.
First off, I had help from Nice Page. It is a drag-and-drop (like Wix) Desktop program to create and design websites. There is also an online editor. However, in my opinion, it is not as feature-packed as the desktop program. You can use the service for free, but when you export your website to HTML, you have to keep their credit section. If you don't want to, you can purchase a license from them.like I did ≧◉ᴥ◉≦
Below is an example of the Nice Page Interface.
As you can see, there is a lot going on, so let me try to explain this. On the left-corner, you can see the elements--from headings to regular text to lists--you can add with basic designs and templates to use from.
What is the difference between a block and pages?
A block is another part of the current page, while clicking on the top (the Page) will take you to the pages and allow you to add a new page from there.
Additionally, you can use from the hundreds of theme the website offers.
When you Publish & Export, make sure to save the file as HTML, so you can upload it to your account in Neocities. Additionally, Nicepage makes responsive websites, so you can check what your website looks like in the icons on the center-top.
The folder should have contents that look like these ones:
Yes, you can add passwords to a page. It uses a page with a password.css. What basically happens is it creates a page that when you get the password right, redirects you to the actual page. I find the code for this a bit complex, so I use the code from this website, but I digress.
Once you upload the whole folder to Neocities, the links connecting the images and icons will be broken. Do not worry. Go to the page you want to edit. For example, index.html or yourpage.html and reconnect the images from the folder. It wil be as simple as the code for images as in <> img or <> a href.
The buttons below are websites from Neocities that feature a lot of tutorials and guides. It may be helpful for you ʕ◠ᴥ◠ʔ
I think you will learn a lot from browsing their websites. For example, from sadgrl online, I learned to make easy blogs. From Alliens, I learned you can customize your site's cursor.
Additionally, I use websites as well. The following are my favorites:
🌻 W3Schools
This site literally has HTML, JavaScript, and CSS tutorials. This site also has useful tutorials like the TOP button you see in the bottom-right (in desktop, tablets, and landscape). You want a slideshow on your page? A dropdown menu? Perhaps, you want tabs? This site has everything.
🌻 Cursors4U
If you are viewing this website on desktop, you may see that I have a custom cursor. You want one? This site has it for you.
🌻 IMGBOX
If you need an image hosting website that can store NSFWs for whatever reason, I don't judge ^^, you can try this one. It's also straightforward. There does not seem to be a community where people can see your images unlessyou give them your link.
🌻 Mimo
You want to learn coding in a gamified way? You'll love this. Below is an example of the game interface:
🌻 Favicon Generator
You want an icon on the tab browser instead of the common world logo? You can get one from here (っ＾▿＾)💨
🌻 Text Emoticons
To save you and myself the hassle of Googling, so here you go ≧◠‿◠≦
🌻 Commentbox
Try this one! Alternatively, there's multiple options, and not just HTML Comment Box. There is also Smart GB .
🌻 Multi Screen Resolution Test
If you need to see what your website looks like on a different screen, not just on your phone or desktop, you can do so using this website. It's not the only one out there, either :3 This is important, especially if you're adding responsive codes.
"Responsive web design is about creating web pages that look good on all devices!" - HTML Responsive Web Design by W3Schools.
🌻 Inspect and View Page Source
If you want to know how a certain website is made, you can also right-click on a page and select either Inspect and View Page Source.
🌻 Google It!
For everything else, Google it. More than likely someone has asked the same question or encountered the same problem that you have ^^
This page is still a WIP, but I think I have most sites I want to include in. Also, it's 3:20AM as I am writing this. I'm gonna continue sometime.
If you have any other questions, comment below. I'll try my best to answer.