After getting a handle on the “holy trinity” of web dev languages — HTML, CSS, and JavaScript — you might feel inclined to jump right into building websites. But if you aren’t careful, you could overlook some key considerations that’ll affect your site’s functionality and user experience. Needless to say, a lot of work goes into web development, whether you’re looking to market your skills, sell a product, or share the next viral game.
To help ensure you’re covering your bases, we’ve put together a checklist of mistakes people often make when building websites. Ahead, Codecademy Domain Manager Kenny Lin shares some common developer pitfalls and how to avoid them.
1. Coding without a plan
Before you start writing code for your website, you need a plan: “Why do you need this website?” Kenny says. “What’s its purpose?” Figuring out what you’re hoping to achieve upfront will save you from spending time building a website that isn’t actually focused on a particular goal.
For example, say you’re looking to build a website to promote a side gig or hobby, like photography or a personal blog. In that case, using a more low-code solution like Wix might be more efficient than building a website from scratch, Kenny says. (You can check out our Create a Professional Website with Velo by Wix course to learn how.)
Or maybe you’re building a website to include in your technical portfolio. Reading job postings related to your desired role will give you a sense of which languages and frameworks you should focus on. Plus, exploring the company’s website might give you some inspiration for features and functionalities you want to include in your own. You could also find developers with similar career paths on social media and explore their projects for more ideas.
Once you’ve identified your site’s purpose, Kenny suggests writing your plans out on paper. Create a wireframe that illustrates your site’s layout, including where your text, images, and components will go. Your goal in this stage is to figure out your MVP (Minimum Viable Product), which is essentially a version of your product that can be achieved with much less effort than the ideal state you have in mind. The idea is that it’s polished enough to achieve your goals and can be fine-tuned later.
“After setting that goal, you can iterate upon it and build other features after the fact instead of trying to build Rome in a day,” Kenny says. “Even final products need iterations and other corrections — it’s a continuous process.”
2. Leaving vulnerabilities open
Anyone with a website needs to think about privacy and security. Last year, there were 1,862 data compromises in the U.S. — up 68% from the year before, according to the Identity Theft Research Center. As a result, privacy and security are a growing concern in web dev, so you’ll need to ensure your users’ data are in good hands.
To start, Kenny recommends utilizing HTTPS (Hypertext Transfer Protocol Secure). This internet communication protocol encrypts data sent between servers and browsers and helps ward off man-in-the-middle cyber attacks.
Next, you’ll also want to make sure all your code (including your widgets and plugins) is up to date. Developers occasionally find vulnerabilities that hackers can exploit to gain access to systems and sensitive information. (Remember the log4j crisis last year? Developers found a vulnerability in the popular Java library that put countless systems and devices at risk — including those used by top companies like Google, IBM, and Microsoft.)
When discovered, these vulnerabilities are quickly resolved with updates. That’s why keeping your code current helps prevent potential security risks before they happen.
Kenny also notes that some web hosting providers offer security measures, like Cloudflare, which prevents suspicious IP addresses from accessing your site. If you want to dive deeper, try our Fundamentals of Cybersecurity skill path to learn more about cyber attacks and how to prevent them.
3. Missing accessibility features
Accessibility features and practices are a must because they help provide an equal experience for all users, Kenny says.
How well does your site accommodate users with sensory, mobility, or cognitive impairments? Can your HTML be read by screen readers? Does your video content include captions? What about your icons — are they crammed together or spaced far enough apart?
Implementing accessibility features helps broaden your potential user base — plus, it’s the right thing to do. It’s also legally mandated (in the U.S.), thanks to the Americans With Disabilities Act.
Check out the accessibility module in our Learn Intermediate CSS course to learn more.
4. Overlooking user data
If you aren’t using data analytics tools, you should probably start.
User data holds a treasure trove of valuable information that can help you find problem areas and potential improvements to your site. Kenny points to tools like HotJar (which offers free and paid packages) that can give you insights into how people use your site, like where their cursors tend to go, what they click on, and how long they spend on certain pages.
“Using that info can be really helpful,” Kenny explains. “If something is really popular, you might want to spruce it up with extra resources.” Seeing how real people use your website can also help you uncover bugs that you missed while you were coding it.
Moral of the story? Data analytics can give you more insight into your users. Tools like Google Analytics can provide insights into your user demographics. With this info, you can better cater to your current audience — or even switch up your site to appeal to other demographics.
5. Forgetting about mobile performance
Studies show that 54% of all web traffic comes from mobile devices, so if your website isn’t responsive on a phone, tablet, or e-reader, you’re setting up a huge chunk of users for a wonky experience.
Each of these devices has different sizes and dimensions, so your site needs to be able to adjust to the environment and provide a consistent experience.
“Imagine trying to read a size 12 font on your phone — it would be terrible,” Kenny says. “And it would lead to a poor user experience and retention rate.”
But it’s not just fonts and styles. You’ll also want to ensure your website’s functionality remains consistent across devices. For example, you can’t hover a cursor on mobile devices, so how will that affect a user’s experience? Plus, mobile functionality plays a big role in SEO (Search Engine Optimization), so adding responsiveness to your website can help you rank better in search engines and generate more traffic (if that’s your goal).
6. Lagging load times
A website that takes forever to load isn’t just annoying, it also deters people from sticking around. In fact, Google found that 90% of users will leave a page after only 5 seconds — and who can blame them? Speedy load times are basically the norm these days.
So what do you do?
First, check your website’s loading speed using tools like Sitechecker or GTmetrix. If the load time is too high, there are a couple steps you can take to help bring it down — for example, utilizing caching, optimizing images on your site, and trimming down your code to remove any unnecessary bits (the same goes for your plugins).
Kenny also recommends using CDNs (Content Delivery Networks). CDNs help reduce loading speeds by storing your web assets in servers around the world. That allows your users to access them faster, and they also help defend your website from DDoS attacks.
Speeding up your website will also make it more discoverable, because search engines prioritize websites that provide a good user experience and have low bounce rates.
Want to learn more about how to build a useful and impressive website? Learn Intermediate CSS dives deeper into accessibility, responsive design, and browser compatibility, and our Introduction to Cybersecurity covers the basics of cryptography, authentication, and network security. And, if you want to learn how to build a website from scratch, check out our courses on web development.
