Does anyone have any suggestions for a newbie to the tech-space or am I in way over my head? I'm asking on HN becuase there seem to be a dizzying number of ways to create a website with little experience, but it seems like everyone is just selling a product, which can be a little off-putting. I'd like to be a little more self-sufficient and learn how to do things along the way.
Get your ideas from existing pages in the web. Don't try to create your own. Copy as much as possible from the web for your design.
Once you have done as much as possible on paper. Sign up on to one of the page builder sites such as square space or wix. Set up your design there. They also have the ability to create interactive pages so go thru the tutorial until you can create the interaction you want.
A big advantage of having a project you want to create is that you can hunt for the different tutorials on the web that will show you how to get what you need done. There are tons of tutorials on the web. Take advantage of the situation and use them.
There's going to be a steep learning curb for you but it's very doable.
Once done decide if you want to continue learning. At that point turn your site into html files and look for a place to host the site. Once you have a working html web site look into creating the interactive pages in javascript or php.
You can't be an expert overnight but if you do it a bit at a time you can achieve a lot. Make it a hobby where you learn a little bit at a time.
Based on what you're describing you can likely create a bad looking version with html and plain JavaScript. It will look like a website from the 90s.
Keeping your same html and JavaScript you could then add something like bootstrap css for making it look a little more modern.
Using those fairly light tools you can make an entire working web page.
After that if you want to learn more / make more elaborate things I would reccomend Vue. React is also good.
For your goals, you can probably just read chapters 1-3, 13-14, and 18.
Does anybody know whether something like this exists in the English language? So far I've seen only some bullshit "let's draw rectangles in canvas" like tutorials that lead to nowhere.
MDN and all are great, but expect the person reading it already knowing most of how to develop for the web. Selfhtml on the other hand was targeting an audience that even doesn't know what a text editor was, so they literally started from scratch.
For me, selfhtml taught me how to make a website when I was a child. It got me into web programming, and without it I would certainly not be the person who I am today. I hope that resources like this can be preserved for future generations in an easily consumable manner.
I wouldn't be surprised if some supermajority of Germans who (a) know a bit HTML and (b) are between 35 and 50 years old learned from it.
Even as a reference I stumbled upon MDN and W3schools much later.
Thank you, Stefan Münz! You deserve a shoutout on an international forum.
Getting started is really tough and a pretty big initial barrier (and rabbit hole) is deploying your application. But once you have something actually deployed on the web it’s easier to mess around with details (and learn!). You don’t even really need “git” and “heroku” if you use a hosting provider with FTP like Dreamhost…
If you want to publish it for the world to see, you can get free web hosting all over the place. I see Neocities come up a lot on HN.
If not, you can literally just edit a single file - mysite.html or whatever you want to call it - using Notepad - on your computer and open it in a browser.
Start small. There's no need to prototype beforehand. There's no need to pick up a huge framework. No need to find a web host. This is all you need to get going, in an .html file on your computer:
<!DOCTYPE html>
<html>
<head>
<title>Optometry calculator</title>
<script>
function add() {
var first = parseInt(document.getElementById("first").value);
var second = parseInt(document.getElementById("second").value);
document.getElementById("result").innerText = first + second;
}
</script>
</head>
<body>
<p>
First number:
<input type="text" id="first">
</p>
<p>
Second number:
<input type="text" id="second">
</p>
<p>
<button onclick="add()">Add</button>
</p>
<p id="result">
</p>
</body>
</html>I imagine Vue or React would do this nicely, although I'd personally use Flutter Web.
Making a basic website that's sorta ugly is easy, making it look nice is much much harder.
https://jbcoventry.github.io/standard-drinks-calculator/
You can see the code here:
https://github.com/jbcoventry/standard-drinks-calculator
My suggestion would be to install VSCode, it's a very popular code editor so there's lots of information on the internet about doing things with it. Then install the extension Live Server for it. This lets you have your code up on one screen or on half of your screen, a browser showing your webpage on the other, and as you make changes to your code the browser will automatically show them. I find that instant feedback really helpful.
As a test to make sure you've got it working and to quickly get some results up on the screen, feel free to copy my code and make some changes. Open three tabs in vscode, copy my html, js, and css files in to one each of them, save them all in to the same folder as index.html, script.js, and styles.css; then when you run Live Server a tab should open up in your browser that looks the same as when you open my first link except with this one you can change it.
For example go to line 16 in index.html and change "Standard Drink Calculator" to something else. When you save it you should see the heading on your page in the browser change. Then you can go in to VSCode settings and turn autosave on, and you wont even have to press save any more.
Then I can recommend three resources.
freecodecamp.org for basic structured guides that take you from having nothing to something.
javascript.info is a great online textbook.
developer.mozilla.org/en-US/docs/Web you can think of as basically your coding dictionary. If you search for a term in here you will get a page on exactly what it does.
Initially I think you will find searching javascript.info more useful than the mozilla docs because it fills you in with more general context. For example if you were reading my code and were all "huh, what's this addEventListener thing do" and searched for it in them, the top results you would get are these:
https://javascript.info/introduction-browser-events
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget...
I like that javascript.info starts with what events are, what you would do with them, and then moves in to why you would want addEventListener and how to use it.