from Hacker News

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

by yukistar on 5/24/22, 10:22 PM with 18 comments

• by ThrowITout4321 on 5/25/22, 12:02 AM

  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.

• by f0e4c2f7 on 5/24/22, 11:37 PM

  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.

• by Leftium on 5/25/22, 3:05 AM

  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.

• by cookiengineer on 5/25/22, 4:11 AM

  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

• by dieselgate on 5/24/22, 11:51 PM

  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…

• by WalterGR on 5/24/22, 10:33 PM

  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.

• by 999900000999 on 5/24/22, 10:30 PM

  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.

• by jbc1 on 5/25/22, 1:31 AM

  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.