Ask HN: How can I make a simple interactive website with minimal experience?

13 points by yukistar 4 years ago | 18 comments

Non-technical user here: I recently graduated from optometry school and would like to make a website with a few useful tools for calculating some numbers that are important in optometry. I've always wanted to learn how to program and I think this might be a good introduction to it. I'd like to make a simple website that takes mathematical inputs and gives outputs. I would also like it to be mobile-friendly.

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.

ThrowITout4321 4 years ago |

First design what the website will look like and function. This part is relatively easy for non-techs. You can do an outline of the site on paper. Things like number of pages, content for each page, layout, colors, desired function. Create as much as you can on paper. You should be able to show it to someone and that person should be able to understand how the site will work from looking at the pages you put together.

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.

yukistar 4 years ago | |

Thanks for the input. This seems like another interesting route. I'll probably keep this in mind while starting with a simple site. Once I get some basics in I may try this approach.

f0e4c2f7 4 years ago |

I would reccomend starting as simple as possible.

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.

yukistar 4 years ago | |

Thank you so much, this is a very valuable roadmap and I feel like I can get things going fairly quickly (based off myspace experience...). It's a good thing that I love simple websites!

krapp 4 years ago | |

It seems as though they want to make a web-hosted tool for their business. It shouldn't matter if it looks like it's from the 90s.

webspinner 4 years ago | |

You mean, the 90's version?

Leftium 4 years ago |

https://eloquentjavascript.net/ is a great book for learning how to program (in JavaScript).

For your goals, you can probably just read chapters 1-3, 13-14, and 18.

cookiengineer 4 years ago |

In the German region selfhtml [0] was pretty common back in the days, and they meanwhile migrated all their content to a huge wiki for that very purpose. It starts from zero experience and goes over many aspects of web design up until the first CMS built in PHP.

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.

[0] https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg

Tomte 4 years ago | |

SelfHTML was incredibly important.

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.

dieselgate 4 years ago |

You can probably find a free course on YouTube that does something similar to what you’re looking for. If you are willing to pay a little for a course then Udemy is good (courses are often on sale for around $10) Some good key words to look into may be “vanilla js”, “git”, and “heroku”.

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…

dieselgate 4 years ago | |

Another key word could be “jQuery” if you go the JavaScript route

WalterGR 4 years ago |

If you want to learn programming and not a specific framework, of which there are a virtually unlimited number to choose from, I’d recommend implementing it using good ol’ basic HTML and JavaScript.

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.

yukistar 4 years ago | |

I actually never though of opening a .html file from my own computer, hah! That's kind of awesome. Thank you for the ideas for web hosting.

WalterGR 4 years ago | | |

You're quite welcome.

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>

999900000999 4 years ago |

How much time do you have ?

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.

yukistar 4 years ago | |

I am currently unemployed because I'm waiting for paperwork to come in to get my optometry license. I'll look into those options!

jbc1 4 years ago |

This is definitely something you can do as a newbie. I'm a newbie working on my first project (well technically second but i decided the first i started was a little complex for a first) that is basically exactly what you're trying to do. A simple webpage that does calculations based on mathematical inputs and shows the outputs.

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.