This is the first part of the four part series: How Your Website Comes Together. You probably already know a lot about this part of your website, but it doesn't hurt to make sure you really know. Every website online is made of code. There's no way around it and there aren't any substitutes. That's why there is such an emphasis on coding skills in web development.
That's also why there's such a divide between coding skills. You have front-end developers to work on all the user interface/experience stuff, back-end developers to handle the data, and full-stack developers that can do both. Most people are familiar with the terms front-end and back-end, but here's some info on how both relate to your website.
Front-end
When a person visits your website this is what they see. The front-end. Everything you do with your front-end code should focus on usability and responsiveness. Having a good user interface is what will make your website easy to navigate and making sure your site is responsive across different devices will help with that good interface.
The front-end is where you use HTML, CSS, and JavaScript to show a user what they need exactly when they need it. HTML is how you are able to show anything on the screen in the first place. It is the foundation of all websites and is arguably the easiest part of web development to learn. CSS is just for styling the HTML. You can make the user interface 1000% better with the right style sheets.
As for JavaScript, it is the heavy weight of front-end development. This is how you add logic to the HTML and CSS. It's also how you can improve user experience. You can restrict their flow through a form or show them messages to help them give you the data you need in the format you want. JavaScript is the most valuable front-end development language you can learn because it gives you access to more tools like frameworks and libraries.
You can use JavaScript libraries to handle data and layouts for you. There are plenty of JavaScript frameworks that will make is simpler to write your HTML and CSS. Most of your front-end work will be with JavaScript. You can even write HTML and CSS using JavaScript if you're fancy 😉.
No matter what you decide to do with the JavaScript, make sure that your front-end focuses on two things: user interface (UI) and user experience (UX). There are more things that you can and will worry about with the front-end, but these are the big ones. Your UI keeps the page organized regardless of the screen size it's being viewed on. Your UX helps the user navigate through your website and complete any actions you want them to take.
Back-end
Back-end development gets a rep for being more difficult than the front-end because it carries more responsibilities 🤷♀️. The back-end is where your security concerns are handled. It is possible to get information from a user and put it directly into the database, but please don't do that. You NEVER want to handle user input like that.
That's why we have back-end development. This is where you give users different permission levels to access restricted parts of your site. This is where you do a thorough validation of the user data. This is where you handle all communication between your website and your database. That's why the back-end is more complex.
You're communicating with both the front-end and the database and you have to keep those responsibilities separate (link). There are so many best practices and frameworks that you can take your pick of which language you want to learn. There's C#, PHP, Java, Python, and Ruby to name a few. Each of those have their own respective frameworks and ecosystems.
Another language that will help you with the back-end is SQL. It's the language of relational databases which you'll most likely be working with. Being able to write SQL as a back-end developer will let you query the database so you can create, read, update, and delete data, which you'll need to do a lot of. Once you learn SQL and know it well, you can start to do some real back-end magic.
Nobody can see your back-end code from the front-end. The most they can get are the requests and some of the info sent to the back-end and there's a strong maybe attached to that. Back-end code is there to make the website as hack-proof as possible.
Hopefully this sorted out some of the big differences between the front-end and the back-end and where they fit in the grand scheme of your website. The main thing you need to remember is that the code isn't the whole website. At least not if you have it online.
There are a few more parts that go into your overall website and its online availability. This was just part one of the series. In part two, you will learn about the servers that your website is hosted on. That's one of the hidden layers that goes into making your website tick.
This is the first time I'm trying a web series so I would love to hear any feedback. 🙂 Also, I made a new free email class that covers where to get the software you need, HTML, CSS, and JavaScript, and it ends with a small project. If you're interested, you can sign up for it here.