Insights on website architecture, usability, etc

Hello,

First off I have a limited understanding of web development. I consider myself fairly comfortable with HTML and CSS but my JavaScript skills are lacking.

Anyways I have a long term goal of building an informational website on tree species found in my area. It will have webpages for each species (248 total species!) with pictures of the leaves, other images, and text describing the species. There’s no need to have a login, e-commerce, or anything fancy.

This is my dilemma: building a static website with 200+ html files for each species page is obviously very tedious, yet doable. Is it worth it to do this being as I can do it with my current skill level? What are the downsides of doing this besides the tedious construction? What are my other options? Can I build it this way then update it down the road? Some guidance is appreciated :slight_smile:

Thanks in advance.

Yes, creating a web site with a lot of html files is one way to go. So they navigate to www.treeinfo.com/poplar and that sends them a file called poplar.html. This is one way to do it. This is the way that makes sense when you are starting out.

The other way would be to generate that content dynamically. You would store your data either in a database that you would call on the backend or a json file or series of json files on the frontend. Then you would generate your menu and pages dynamically. So when they call www.treeinfo.com/poplar it figures out what to send them and sends that back.

If you finish the course, you will know how to do that.

You could do it with each html page being a separate file you manage separately and it wouldn’t require anything “fancy”, heck you could use something like github pages and do it for free too. But, if you wanted to change 1 tiny thing, say the header links that exist on every page, you would need to manually change 200+ files, or use some trick like find and replace (and pray you don’t mess anything up)

As you said, this is tedious. But were talking about learning programming right? The whole point of programming is to make tedious, boring, repetitive tasks easier. I won’t go into how you should do this, (there are loads of ways), but as you already are realizing, doing it the “quick and easy way” right now doesn’t seem like the best option. Here are a few options I’ll throw out there that come to my mind.

  1. Use a static website generator
  • The main pro of this option is you can serve your pages on github pages for free. This is a great skill if you ever wanted to make a blog (without any fancy bells and whistles), or some other static site.
    Here’s a HUGE list of options for this route:
    https://github.com/myles/awesome-static-generators
  • The main con is you lack flexibility to add any “dynamic” content beyond a certain extent. This doesn’t seem like a concern so this probably wont ever matter.
  1. Use a front-end framework
  • The main pro of this option is you can really zone in on your Javascript skills, as regardless of the front-end framework of your choosing, odds are you will end up doing a good amount of javascript even for this basic use-case.
  1. Use some server-side technology to render html dynamically.
  • The main pro of this option is you basically can do whatever you want, however you want to. You could use a front-end framework, or just rely on server-side rendering. You also could use whatever server-side language you want. You mentioned your lacking javascript skills, this is a great place to get some fundamental use-cases going.
  • The main con of this option is your going to have to run the server somewhere if you want people to see. This means you might have to use some paid, cheap or free server hosting like heroku, aws, google cloud, etc. These are great things to know, but pretty far and away from the basics of programming you want to currently focus on.
  1. Use a CMS (Content Management System) and not code at all
  • This is the “real world” option. Since what your asking for is a very very straightforward static site, any popular CMS would work, like wordpress, wix, etc.
  • Obviously you probably wont learn much “programming” or development as you could if you did this yourself, but it is worth knowing if you were faced with this in the real world. You don’t want to re-invent the wheel, unless were here to learn how wheels work (which is what we are here to learn, but instead of wheels were talking about development haha)

I will want to point out, all of these will require you have a list of some kind of all the content you want to show. The main goal you would want to have is to limit the amount of work you have to do to add or remove content. Since your the only one adding/editing/removing content you can just “re-deploy” the site whenever you want to update content.
A large file/multiple files filled with the raw content, or actual smaller html snippets would be optimal, where each species shares some common boilerplate HTML. Kind of like how the FCC forums always has the title in a green bar, with a few menu buttons.

Goodluck :smiley: