Have you ever used a cool interface and thought, “How did they do that?” or, “I wish I could do that…”?
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.
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.
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.
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!