What did I do wrong?

I corrected the max-width. I looked through the code all the lines are finished with a ; and or a </> where they need to have a div line or otherwise. I don’t know :open_mouth:

I just did the pen thing and its fixed did you edit it? :smiley: https://codepen.io/DamnedScholar/pen/zeopmO well on the code pen, not on github it seems.

I didn’t. Here’s what I see when I take the code from your GitHub, enter it in Atom, and run the atom-beautify package:

See how the second post is inside the first post? That’s the issue. You don’t close the first post, so everything after that isn’t handled correctly. You can also click on different tags to see them highlighted by the bracket-matcher package like you see in that image. If you click on <div id="content">, you will notice that there’s no highlight, because it has no match.

Ah okay so when I attempted to add the third post, I didn’t add it in correctly.

Yeah, and since you’re just using div tags, which are inexpressive compared to the newer tags available in HTML5, it’s hard to tell just by looking how many tags there are.

Fortunately, if you ever put these lessons into practice, you aren’t going to be hard-coding blog post tags yourself. Every blog CMS ever will generate those for you, and if you happen to get into designing a blog CMS (or a Wordpress theme, or similar), it will be much easier because you will only have to make one template that the software will fill out and repeat on its own.

That’s exactly my plan, to make a blog-like website for my friends and I to use as we want to stream and we need somewhere to link us all together instead of having us all separate. So far I’ve made a starting site using this method. But I have yet to learn how to make it interactive and allow it to work like a blog.

Second to that, I am trying to add this to my list of skills as it may come in handy if I ever want to get anywhere in the world of creativity. As being stuck in retail is really not fun. I’ve already got an Animation degree under my belt, so I’d like to add coding for both web development and eventually gaming to the list. You know? I really appreciate your help in this, I apologise for the lack of knowledge I posses. I am going to go research some more and look at how this all knits together to try and better understand it. (or in better terms, mess around on atom and keep breaking it :smiley: )

You have the right attitude, but a ways to go before you can achieve interactivity if you try to write it yourself. If you sit down and draw out all of the theoretical components involved in making a blog that you can update without access to the physical computer it’s hosted on and where it populates posts automatically, you’ll find that they’re a lot of things that HTML can’t do. So how have people skinned this cat in the past?

There are three languages I’ll talk about (there are more than that, but I’m not going to tell you to look at ASP because I still have nightmares about ASP, and I’m not going to tell you about Elixir because I love Elixir but it’s over my head and that’s something to pick up only if you find yourself slightly bored by what you already know). When you fully understand what you want to achieve, and you either download and learn or write a CMS program, it will be in one of these languages:

  • PHP is what has powered Wordpress, Wikipedia, and a legion of forums going back into the wild days of the Interwebs when computers were frankly quite crappy. It’s a server-side language where you write code in a .php file that’s a mix of HTML and PHP. When a browser sends a request to your server for a specific page, the code on that page is run and a plain HTML page is generated and passed over the Internet. It requires almost no resources on the part of the user, but the server needs to have a CPU and RAM, so none of the good options are truly free (think obligatory banner ads), and you have to pay more if you get any amount of volume (especially if you have multiple features on your site or want to host a lot of media). The costs are really small in this day and age (15 years ago, they were substantial), but having to think about how much compute power your server has and how much overhead your site needs is its own cost. The bright side is that Wordpress is one of the oldest and most-used platforms for blogging, so it’s been tested and there’s a ton of help out there for you.

  • JavaScript is another veteran language in site design, but until fairly recently, it was limited to making your HTML pages do fun tricks. The really advanced sites such as Facebook would generate code with PHP and use JS to make the display prettier, giving you the illusion of dynamically interacting with the application when any substantial interaction was all really forms and SQL calls. But the times, they are a-changin’, even though the core capabilities of the language haven’t fundamentally improved since 1995. It still just makes your HTML dance around the page. What has changed is the syntax of the language to make it easier to write complex programs. The average user’s computer has also grown so massively powerful that it can run most things even in a dreadfully inefficient environment like the browser (Atom wouldn’t be possible without unimaginably powerful CPUs in every laptop). New frameworks (really big libraries that make it easy to perform complex tasks) mean that you don’t need a large development team as much, and almost all of them are completely open-source and free to use. The benefit of JS is that the processing happens entirely on the user’s computer, so your server doesn’t actually need to do anything except serve a big file of plain-text code. This isn’t good for tasks that require security, but it’s ideal for sharing public web pages.

  • Python is fairly new to the web site game. Like JavaScript, it started off running individual scripts and people built more complicated constructs out of it because it’s much easier to work with than languages like C++ and Java. These days, you can have a Python application that functions very similarly to a PHP server, except that the server and the template code are the same language so you don’t need to actually load a page in order to tell your program to do a thing. What’s even cooler is that, if you have some kind of data collection program running in Python, it can generate a server with all of your data points and graphs without requiring any intermediary software or any languages other than Python and HTML.

I don’t enjoy PHP so much these days, so either JavaScript or Python as the server is my preference. For display purposes, you’re always going to lean on JS if you want your page to change on its own (JS is what the browser speaks), so the main distinguishing factor in my mind is that JS for both client-facing and server-side code makes it very easy to maintain and understand, while Python is generally better at being software than JS is.

Static sites

So you’re familiar with flat HTML and you’ve used a lot of dynamic sites. It’s very easy to conceive of the server generating code on the fly, and you know a bit about the fact that browsers are scriptable. If you combine all of these different concepts together with the priority of minimizing overhead for yourself and generating lightning-fast pages for the user, you arrive at static website generation. This is a newish trend where tiny compiler programs take a set of data and a set of templates and mash them together to make a set of flat HTML pages. Your next bit of homework should be to read up about these programs. Some of them can be used with GitHub Pages, so you’re already most of the way there. In terms of getting yourself to where you can make competent decisions about picking, configuring, and/or modifying a CMS, these are a great step. They’re simpler to understand than Wordpress and will get you started working with a site that changes when you tell it to.

1 Like