What did I do wrong?

Okay, which of the 434 tutorials under Make a Website are you looking at? I’m not going to go through every one of them searching for code that looks like what you’ve written.

https://getmimo.com/learn/29 that one? does that work?

That link shows me all of them. I still have no idea where to go.

Have you tried adding padding to the #header selector? padding: 0 20px; would do it, and then you can make adjustments until you feel good about it.

You should use CodePen to share code that you need help with. It’s much easier to read that way, and I could just edit your code to fix things if I needed to and then re-share the changed version so that you could compare them.

The courses are just telling you how to do simple code, there are projects on their the one im on is the second project that starts with ‘‘Going back to square one’’ you can skip all of it to find their previews of what the website is supposed to look like once you complete the steps. I.E:

Also adding padding made it worse - made ''My Blog and rhe about and contact ‘’ move all the way up to the top and not away from the edges.

If there is no page or view where you can see the entirety of the code you’re trying to copy, then it is a poor tutorial in my estimation. HTML and CSS depend a lot on context and each element is affected by its siblings, parents, and children. It’s highly predictable, but I can’t explain to you what you’re doing differently without being able to use the dev tools to inspect their source code.

Don’t just tell me, show me. I can’t help you if I can’t see the code. Put it all up on CodePen and post the link here.

fyi I don’t know how to add the about page on the html thing on that so it’s just got the home page and the css page.

Okay, I figured out what happened.

#header {
  background-color: #1abc9c;
  height: 150px;
  line-height: 150px
}

This is where you added the padding, but it’s missing a semicolon after the line-height rule (CSS doesn’t care about whitespace, only brackets, colons, and semicolons). So when you added the padding without fixing the syntax, both rules were broken.

When the code is on CodePen, you don’t have to share it as a Gist. You can just paste the link to the pen itself, which is optimal because you can click on that link and are immediately able to see that the live result is what you wanted, then look up and see how I did it.

Oh my that is awesome thank you, do I need to apply the same thing to the footer? Cause that still remains squished to the sides?

No, because #footer already has padding. You just need to delete the zero, and read this tutorial on padding to understand why.

Deleting the 0 actually made the black panel shorter and the text is now correct

and also when I applied the codes in atom, the turtle image now appears larger and I’ve checked the #img and it still the same?

Ah-hah. I looked through your site with the Chrome developer tools and noticed something else.

There’s no such property as maxwidth. It’s spelled max-width. If you undo what you’ve done to the padding, and fix that property, you will find things looking much better.

I noticed something else, and it’s the reason why the footer appeared to shrink:

You have the footer inside a .post-content tag, probably because you forgot to close a tag somewhere (or, more likely, three tags, since it’s also inside .post and #content when it should be at the same level as #content).

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