Looking for best practices feedback on tribute page

I’m not new to dev but new-ish to webdev and I am looking for feedback on my CodePen tribute page regarding best practices, refactoring, etc.

I understand there’s a lot of ways to reduce markup, such as using style cascading (does CodePen even support multiple CSS files?) and configuring Bootstrap, but I’m trying to not stray too far from the tutorial as written.

Should I be using my CSS file more? Should I be using Bootstrap classes extensively? I have no idea what best practices are these days. Years ago when I was learning XHTML in college I was taught that it’s best to separate content as much as possible from the styling and markup but I don’t see that happening so much these days.

Any feedback that could help my code be more “professional” would be appreciated.

I understand there’s a lot of ways to reduce markup, such as using style cascading (does CodePen even support multiple CSS files?)

Yes and no. You can link to outside CSS files, but codepen gives you no way to store them. If you can store them on the web somewhere, then you can use them. But if your CSS is that complex, then codepen probably isn’t the right tool. Codepen is great for trying something out quick or for learning on simple pages, but is not a powerful tool for large scale things.

Should I be using my CSS file more?

If need it, sure. In codepen, you can just put it in the CSS pane.

Should I be using Bootstrap classes extensively?

If you want. Bootstrap is one way to make things look nice. There are other libraries, or you can build it yourself. But bootstrap is one of the most common libraries on the planet. You may or not chose to use it, but you need to learn it.

Years ago when I was learning XHTML in college I was taught that it’s best to separate content as much as possible from the styling and markup but I don’t see that happening so much these days.

That is still a good idea … to a point. There are instances where they start to mingle, but when starting out, keeping markup, styling, and logic (javascript) separate is a good idea. That’s a good reason why codepen has a separate pane for each.

I’m tired and need to get to bed, but when I do a quick scan of your code, nothing looks particularly problematic. Looks like a good start.

1 Like