Have you ever used a cool interface and thought, “How did they do that?” or, “I wish I could do that…”?
A lot of us have. It’s why at some point in our lives we headed straight over to a new tab and started researching how to get started in frontend development. Usually it starts with: learn HTML, CSS and JavaScript. Then moves onto: next learn this framework, then that preprocessor, then this library – but do it quickly because tomorrow there will be a whole batch of new ones.
Learning frontend can be overwhelming and sometimes even discouraging. But there’s always a starting point, and this is it. From websites to voice apps, there are common languages you can learn to handle them all. Here’s what you need to know to get your frontend mastery started:
HTML and CSS
Let’s start with the basics. No matter how far interfaces have come over the years, you still need friendly-neighborhood-markup-language HTML and its loyal sidekick CSS to create a basic front side.
The gist of it is that HTML provides the page structure (headers, paragraphs, images) and CSS adds the visuals (colors, fonts). Check out CodeAcademy or FreeCodeCamp when you’re ready to dive in.
The cool thing about HTML is it’s one of those “learn it once, use it forever” kind of languages. You can even use it to define chatbot scripts!
As for CSS, some bot interfaces aren’t exactly works of art, so it’s always handy to know how to tweak them yourself. Services like Bottr offer all the chatty functionality while allowing you to modify the UI.
JavaScript
This other core scripting language is what brings the fun, interactive aspect to websites and even voice activated interfaces. From sliders and animations to real-time maps and voice-driven web apps -- JavaScript (JS for short) is where the magic happens.
The best part is that there are plenty of libraries and frameworks under JavaScript’s umbrella that can ease your frontend struggling. Frameworks help you architect your code so that it’s modular (and reusable), while libraries save you from creating a lot of code from scratch. There’s a JS library for everyone, here are a few good ones:
Angular
This one is better for those looking to build websites. While HTML is great at building static webpages, they’re not so great at dynamic, interactive web apps. This is where Angular comes in. It’s a JS framework which extends HTML’s syntax to build fun things like single page websites (the ones where you scroll forever and things load as you go) and even animated menus.
JQuery
This is the JS library which every frontend dev will gush about. For web, JQuery makes your website compatible with every browser without additional lines of code. It also makes building user interfaces, web applications, and mobile sites much faster and easier -- even for non-coders.
For voice interface enthusiasts, you can find JQuery plugins when you’re ready to start developing chatbots. Although if you’re big into Natural Language Processing (NLP) then maybe take a look at what JS can do for machine learning.
Artyom.js
This is more of a bonus for anyone dreaming of creating the next Siri. Artyom.js is a JS library made to create virtual assistants. You’ll find that HTML plays a major role when using this library to add voice commands. If you’re leaning towards VUI then this is not a bad place to start getting familiar with it.
Once you’ve gotten a good grasp over these, you can start to dig deeper and move onto backend languages like Java, Python, and C# -- which are all ideal for anyone interested in developing Natural Language User Interfaces (NLUI).
Frontend development certainly takes time and a lot of mistakes, but everyone starts somewhere. So, get ready. Set. Code!
