Things to Keep In Mind When Creating a Website : Jesús Mejías

When I started learning web development, I didn't know where to start. I was all over the place, checking the source code of all the websites I was visiting. I didn't understand the meaning of most lines of code. A few years later, I realized it was all much easier than I thought by following a well-defined path.

When creating a website, we have to keep in mind a few things:

Consistency
Accessibility
Currency

Consistency

Why consistency? This is mainly for you. For you to understand the structure of your website, and if you work with other people, for them to easily understand it. Consistency in web development is about having a set of rules for you and for your team to follow.

Rules can be as simple as using <p> instead of <div> for paragraphs and using <em> instead of <i> for italicized words. They're all there mainly for consistency but also to keep a higher and better standard.

When it comes down to consistency, we also have to keep in mind that the user wants a similar experience throughout the entirety of the website. If a page uses a specific color palette and another one uses a different color palette, the user will not have an optimal experience.

That's why it's important to define a color palette to use throughout your website. A way to implement this with CSS is by using variables.

:root {
    --blue: #0096c7;
    --red: #ae2012;
    --orange: #f4a261;
}

.important {
    color: var(--orange);
}
...

There are a few websites that are very useful for creating color palettes:

Besides having a defined color palette, it’s also good to carefully pick out fonts for the website. As a good rule of thumb, having a different font family for the headings is a good practice because it helps differentiate headings from the rest of the content. One of the most useful websites that has a wide variety of free fonts to use is Google Fonts. That tool makes it very easy for web developers to use their fonts on a website.

Accessibility

Making the web accessible to everyone is a must. Everyone deserves access to the Internet, and that’s our job to make it happen. Accessibility in web development is about making a website accessible to people who have special needs (e.g. blind people who use screen readers).

There are a number of things that we as web developers can do to make sure our website is more accessible:

Check whether the colors of the website pass the contrast checker. This is to make sure that people who have certain color blindness or whose vision is not the best can still visually understand your website.
Add meaningful alt attributes to all <img> elements. This ensures that people who can't visually enjoy an image can still get an understanding of what the image is about.
Use headings (h2, h3, h4, etc...) correctly. Screen readers use heading elements to organize the structure of a website and separate different sections of the content.
Use tables only for tabular data. Screen readers also follow a very defined path when it comes to tables. Using them for layouts prevents screen reading from doing this for its intended purpose.

Currency

Keeping up with the most up-to-date trends is very important in web development. Web technologies are constantly changing and being upgraded, and as a web developer, one must be able to keep up with that.

MDN Web Docs is one of the most authoritative web development sources of information. It's a website that contains the most relevant and up-to-date information about the technologies that are currently in use. It also shows what specific technologies are deprecated or are no longer supported by specific browsers.

Social media is also a great source (but not as authoritative) to find out what's new in web development. Reddit has a few subreddits that have great content:

Hope you found this useful!