Beginner Website-Making Resources

Filed under: Technology, Tutorials/Guides

Have you ever said to yourself, "man, I wish I had a website, but coding is way too hard!" I'm here to tell you that, as someone who once learned Python and hated it, making a website is actually quite accessible and will not cause as many headaches as you think. Here is a list of resources I gave to a buddy of mine that was interested in making a website and wanted a place to start.

This is nowhere near comprehensive, it's just a launchpad based on my own experiences learning to make a nice looking website :^)

Text editors for coding/webdev:

(I recommend watching/reading a short guide on how to best use/setup your code editor of choice, especially if you are a true beginner.)

VSCodium - An open source version of Microsoft's Visual Studio Code editor. My personal favorite with a ton of useful plugins.

Notepad++ - A super fast code editor that works well right out of the box. May be a bit intimidating at first.

Sublime Text - A simple but powerful code editor. Has a pleasant and not-overwhelming interface.

Beginner tutorials:

Interneting is Hard - 100% free, up to date guided learning for web development. Very friendly to beginners!

Mozilla Developer Network - Very thorough web development resource WITH a tutorial! Gives you starting options depending on your experience level.

W3Schools - Another great reference site for webdev that also has a tutorial! Includes free code snippets to use for your own sites.

Codecademy - Great guided learning for not only web dev, but programming languages too! Expensive for premium, but it's worth it in my opinion.

freeCodeCamp - Not the most informative tutorial, but it guides you through different website projects which I find to be good practice. Try this after you learn the basics.

Intermediate guides:

Accessible Net Directory - A directory of accessible websites as well as information and resources on making your site more accessible.

Flexbox Froggy - A game that teaches you CSS Flexbox. Genuinely a better learning tool for flexbox than traditional guides.

Things that will make your life easier:

HTML Cheat Sheet - Exactly what it says it is. Includes code generators, code snippets/templates, and other bits of info! Also has CSS/JS cheatsheets too.

Sadgrl's Webmaster Guides - Tutorials to achieve specific effects on your website. Also includes some code snippets!

Codepen - A playground for you to test your code with real-time previews.

Construct Your CSS - A visual layout editor that generates the basic HTML/CSS layout you want to work with.

WAVE Web Accessibility Evaluation Tools - Run your website through this tool to see your website is properly accessible for all web surfers!

Optimizilla - An online image compressor. Make your image files small so that your webpages don't take 1000 years to load.

Beginner tips:

HOST YOUR WEBSITE ON NEOCITIES. To have people see your website on the internet, you need to have it hosted somewhere! My website is hosted on Neocities, a free web hosting platform for anyone to use! It's very easy to get started on here. Protip: do not use the Neocities code editor and instead keep your website stored in a folder on your PC. Work on your website offline (i.e. in a code editor like VSCodium), and when your next update is ready to publish, upload the files onto Neocities. You'll thank me later!
THE INSPECT ELEMENT TOOL IS YOUR BEST FRIEND. Use it to peek on websites with cool effects you want to imitate! Also use it to test edits to your website... Did you know you can preview tweaks to your HTML/CSS just from there without needing to edit your original files?
IT'S OKAY TO STEAL CODE. I'm not saying steal a person's entire layout (especially if they are NOT creating free layouts or are protective of their code) but if someone is creating an effect you like, maybe take a snippet of their code to see how they're doing it.
SEE IF YOU CAN DO IT WITH CSS INSTEAD OF JS. One thing they don't tell you in Webdev 101 is that you can do a lot more with CSS than you may realize. Instead of a JS gallery, try a CSS gallery! It's more accessible for non-JS equipped browsers and improves your page loading speeds.
HTML FIRST, CSS LATER. Just make sure everything is ordered as you'd like it in your HTML before you start styling it with CSS. Using semantic HTML definitely can make your life a lot easier.
KEEP RESPONSIVE/ACCESSIBLE DESIGN IN MIND. I know some websites are impossible to make responsive, so if you have a specific vision you NEED to stay intact, I won't stop you. But since most people access the internet from mobile browsers, it's best to design so that your website looks good on a phone screen! Make sure to learn about responsive web design and remember - you don't have to sacrifice accessibility for creativity.
ASK FOR HELP! Join a website-making Discord or ask a friend with a website if you're having trouble with anything! Many people are willing to help identify errors and explain how to fix them. Just be sure to link your website or code so that they know what they're working with and can point out where you need to make edits.

I wish you the best of luck in your journey to become a webmaster!!! :^)