Best practices in HTML, CSS?

Hi everyone!

I’m new here! Even though I have a degree in computer science (10 years ago) I never did any web development and that’s why I’m here.

I did my very first challenge here which was quite sloppy:
Tribute page challenge

Are there some general best practices you guys follow in terms of how I should structure the elements in the HTML? For example, should I try to divide all elements into their own separate <div> tags?

Hey @waleedfateem , my experience is a little similar to yours degree in computer science (5 years ago) but hardly did any web development. Anyways, you can have a look at the links below and take your time and go through them.Your tribute page is good,nice job :+1:. Don’t worry too much about being sloppy, eventually with time and practice you will go from sloppy to awesome.

  1. The Little Book of HTML/CSS Coding Guidelines
  2. Google HTML/CSS Style Guide
  3. High-level advice and guidelines for writing sane, manageable, scalable CSS
1 Like

Awesome tribute :smiley:

I’d say the most important thing right now is to keep your style and your markup separate. Don’t use inline styles, and don’t use <i> or <b> tags for styling. I would definitely not advise you to separate all of your elements into <div>s, but it certainly helps to logically group elements within them.

4 Likes

@azdrian @PortableStick Thanks for the pointers! I really appreciate it.

Another thing I was struggling with is finding a good reference for all the different classes in Bootstrap. I found this one that will probably come in handy:

Cheat sheets are great, but it would probably be best to reference the official documentation most of the time. Otherwise, you may be getting information that is outdated or just wrong. I really like Bootstrap’s documentation, and I’d suggest browsing it to get an idea of what you can do with some examples that show you how to use each feature. In the same vein, I suggest bookmarking DevDocs. DevDocs is a platform that lets you choose the documentation that’s important to use, and then search all of them at once. Since it’s synced with the official docs, you can be sure that it’s correct and up-to-date.

4 Likes

Yeah I also am having trouble figuring out best practices, like how about bootstrap vs responsive design using css? It seems we can make two exactly great looking websites but the html, css, bootstrap, etc. used can be completely different, I would like to learn the best way rather than correct bad habit down the line. Anyone have suggestions of great looking websites that utilize great code design?

1 Like

As I’m getting further in the tutorials it’s starting to make sense somewhat when to use what, I’m thinking it will all make sense the more I go through, but it is hard to explain in words when to use what and I guess thats why there’s no real answer to the question.

1 Like

The only way to achieve the best code is practice. I have seen many people here attest to the fact that solutions they did only several months ago look so verbose and bad compared to more recent work. I would argue that there is no perfect way to write code. Obviously inline styles as @PortableStick mentioned are bad, as are too many spaces or improper usage of things. But I believe coding is in a sense an art. Many people have mastered it, yet have their own individual preferences and flavor. You may like to indent four spaces or two. You may like something that others do not like. As long as your code is easily understood and efficient, I believe you should do it how you feel best. Coding is a way of expressing yourself, and just like a builder has his own touch to his work, your code can have your own flavor for how you deem best. Follow guidelines and generally accepted rules of good coding, but don’t let what someone else does dictate how you express your individuality.

2 Likes

http://www.w3schools.com try this

Hello, I have moved your post to the general category in the forum as this is not a wiki entry.