When it comes to web development, there are many different ways to accomplish the same thing.
If you’re trying to specify a colour, there’s HEX, RGB or HSLA; if you’re trying to lay out elements on a page, you’ve got Flexbox, Grid, or Floats. No matter what you’re trying to do, there are different ways to do it, and every developer has their own style and creativity.
But, when it comes to website best practices - there are certain things that must be done a certain way. Building a website from scratch is not only a great way to show you’re a strong developer, but also to show that you know what these modern industry standards are, and that you know how to implement them. Here are seven things that are vital for every modern website to have, and for every modern developer to understand.
Proper Layout Techniques
When building a website, it’s important to show a mastery of layout techniques. At Juno, our Web Development curriculum is moving towards teaching Flexbox as the main technique, with Floats being a secondary method used to support older browsers when necessary. This doesn’t mean that Floats are inherently wrong. It simply means that Flexbox is easier to use and is often thought of as the more modern method since it provides more consistent results when creating complex layouts.
Whether you use Floats, Flexbox, or Grid to achieve the layout you are creating, it’s simply important to show a mastery of that technique. Writing clean code that shows you understand how a layout method works is the best way to build a modern website, and to show off your skills at the same time.
Semantic Markup
When HTML5 was introduced in 2014, some significant changes to Semantic Markup came with it. New elements like <main>, <section>, and <nav> were introduced to give more meaning to areas where you would normally use a <div> tag. Semantic elements like these do important things like improving SEO and making it possible for browsers to understand the purpose of parts of a website.
Plus, it makes it easy for someone to glance through your code and know whether you have knowledge of modern HTML. Though older elements like <div> and <span> are still useful in some circumstances, these tags are easy to spot when they’re overused. If you’re creating a modern website - an understanding of semantic elements is a must.
Readability
Another important factor when writing modern code is making it readable. Though computers can understand code regardless of spacing or line breaks, using proper indentation is essential to making your code readable to other people, and is an industry best practice. Proper indentation in your code, or lack of it, can also be seen at just a quick glance, making it vital that you layout your code according to these modern best practices.
Responsiveness and Compatibility
One of the most important parts of creating a modern website is making sure that it’s usable across every device and browser, no matter how a person is viewing it. Coding a beautiful website is great - but it doesn’t mean anything if that website breaks when you scale it.
With the use of mobile devices becoming more prevalent over time, it’s never been more important for a website to be both responsive across devices like iPhones and Laptops, and compatible across browsers like Safari and Chrome. Using media queries, compatibility testing, and modern best practices to build a website that scales well is an important factor in making a modern website.
Naming Conventions
Modern web standards are based around teams of developers, who all need to be able to read and understand the same files. For this reason, best practices like naming conventions are put into place. This includes naming things like classes, IDs, and even files.
Choosing a naming convention like camel-case or kebab-case, and then using it consistently and correctly throughout your code, is a great way to show your skills. Though each company and developer has their own preference, the important factor is just to pick one convention and stick to it.
External Styles
It’s not only naming files that’s important, but formatting them. Using an external style sheet is vital for a number of reasons, and is an industry standard when it comes to development. External styles means having your CSS in its own file, rather than in the same file as your HTML. Though inline styles are sometimes necessary, using external styles is the norm, since they help with things like site speed, organization, easy updates, and more. Though this may seem like a simple step, using an external stylesheet is an important way to show that you understand modern best pratices.
Accessibility
Last, but certainly not least, is accessibility. Accessibility means making your website usable by people with different abilities like colour blindness or visual impairments, and is a consideration that has become even more important in recent years. No matter how responsive or beautiful your website is, if your website is not accessible, there is a portion of the population who will not be able to use it.
Implementing things like image alt tags, form field labels, and contrasting colour combinations is a very simple way to show that you understand modern standards, and that you’re coding content made for everyone.
Understanding these seven things and knowing how to properly apply them in your code is vital to being a modern developer, and a great way to show you are up-to-date with industry standards and best practices. It also means that you’re probably ready for our JavaScript course, or maybe even ready to dive right into our Web Development Bootcamp.
If this post was the first time you heard about any of these concepts, our part-time Web Development course is likely a great place for you to start. In this course you’ll learn everything you need to know to code a website from scratch, as well as advanced concepts and modern best practices like these that every modern developer must understand. Sound like that might be the place for you?