In short, yes, it is hard to code a website, provided you need the website to do anything more than just display some text and images. The path to being able to code a website like this is a long one.
Take a look at this infographic:
Website builders
This differs from using a website builder or CMS like WordPress or Joomla. With those tools, you can get online in a day with some basic images and pages. With these tools and various hosting platforms like bluehost.com, you can quickly roll out a new website with little to no functionality.
Basic one-page website
To code a basic website that displays text and images, you are going to need to do the following (at least):
- Lay out the elements on your site using HTML and CSS
- Serve your files to visitors through a web server
Even with just these two steps, you will need some foundational HTML and CSS knowledge. This might be trivial to lay out a single-page business home page, but it will start to get tricky once you see your website on different devices with different screen resolutions.
Multi-page website
If you need to add links to other pages, you will be confronted with more HTML and CSS to learn. Learning how hyperlink tags work with back buttons and links and sharing CSS across the different pages will be the next things to learn here.
At this stage, you have a basic website with a few pages up and running. As you add more features to your site, you will quickly run into difficult problems to solve. For example, if you want to set up an email newsletter to send to your site visitors, you will need to do the following:
- Add the HTML banner/section prompting users to sign up
- Create an HTML form and handle where that data is sent
- Signing up for an email newsletter service like mailchimp.com
Steps 1 and 3 above are quite straightforward. Step 2, on the other hand, begins to become quite tricky. Not only will you need to validate the data sent from your site to your signup endpoint, but you will also need to ensure validation of the data being sent and make sure your site complies with all laws in countries whose citizen’s data you might be handling.
Responsive design
Once you have a basic site laid out just how you want it, you’ll quickly realise that the site is only good for your screen resolution. Looking at the site on your phone will show you that you need to allow for different screen resolutions for even the most basic websites.
The ability for your site to resize based on the screen displaying it is called responsive design. You’ll often hear of responsive design when you browse themes for WordPress or Joomla sites. This means that the site will look good on any device.
Shrinking images and reducing font size is only part of responsive design. You will also need to change the layout based on the screen size. This typically involves using a grid system (CSS grid and flexbox can help with this).
User data and the GDPR
For example, in the EU, the General Data Protection Regulation (GDPR) requires that you have consent to use people’s data and that you can provide details of this use in your privacy policy (amongst other things). This will mean you must build an automated way for users to retrieve their information from your website.
This will then mean you need some data store (database) where the user’s data is located for easy access by your site. That then means your database needs to be secure and always available. So you can see how quickly the complexity of your site becomes when only adding basic features to it.
Dynamic Frameworks and Libraries
Once you have a basic site built, you will begin to notice that the user experience is a little clumsy. Each time you hit a link on the page, the entire site will reload to display the next page to the user.
Using a library like React, you can change the components on the page that need to be updated. These components will also update if new data is available for them.
For example, using React, you can set a component to show or hide based on some condition, like a user pressing a button or ticking a checkbox. A user experience similar to React or Angular can be achieved by using only JavaScript, HTML and CSS, but to be as fast as React and complete would take a lot of serious and complex coding.
Once in the React or Angular space, you can add boundless features to your site with the NPM (Node Package Manager). The NPM is just a library of pre-built packages that can do anything from displaying complex tables to styling your site.
CDNs and Web Services
Once you have your site content displaying and running how you need it to, you need to think about how you can deploy the site for the world to use without it costing you a fortune and also running quickly enough for your users.
CDNs (Content Delivery Networks) are just a fancy way of deploying your site assets to the cloud (there are other uses, but I’m only trying to look at the basic use case for CDNs here). The CDN will put your assets on servers close to the end users (geographically) so that they download quickly and don’t eat up traffic on your website server.
Furthermore, you could generate your site and place the entire site on a CDN so that no webserver is needed. The major cloud platforms like AWS or Azure have methods for doing this.
You can also take advantage of database servers in the cloud at AWS or Azure (or one of the many other cloud platforms). By doing this, you can then remove the need to run your own set of servers that would traditionally have run your database cluster.
Conclusion
It is easy to code a basic one-page website. It becomes exponentially more difficult as you add pages and features to your site. As soon as you progress from a read-only informational website to an interactive and responsive (works on all screen sizes) website, you are crossing a threshold that will require a substantially larger amount of work to complete.
My advice is to start with whatever method you feel comfortable with to get a site online. This would most likely be through WordPress or Joomla. That way, you can get a feel for hosting a site, traffic handling and more.
Once you’ve been able to do this, you could either double down on WordPress by learning some PHP, HTML, CSS (and JavaScript for jQuery) or begin to look at one of the frameworks/libraries and follow one of their beginner tools for getting online, like create-react-app which is effectively a script for bootstrapping a basic site in React, ready for you to start building your site.
