If you're brand new to Front-end Web Development its easy to get overwhelmed by everything you're told to learn. You may feel like you need to learn everything before you can build even a simple website.
The truth is you can get a surprising amount of work done with a few core skills. And if all you need to do is build a simple website you don't need to learn more than the basics.
What Is Front-end Development Anyway?
Front-end development covers the functionality that happens in the browser. As opposed to back-end development which is pretty much everything that happens outside of the browser.
A professional front-end developer will usually know HTML, CSS and JavaScript. And in most cases will be well versed in Angular, React or Vue.
HTML
If you are brand new to web development the first skill you should learn is basic HTML. HTML is the skeleton of everything you can view on the web. Even the most cutting edge JavaScript frameworks output basic HTML.
Also keep in mind that HTML is NOT a programming language. It does not contain any logic. All it does is tell the browser how to format a document. If you're familiar with word processors like Word or Pages learning HTML will be a breeze.
HTML consists of quite a few tags. Often these "tags" are referred to as "elements". You don't need to memorize everything though. Surprisingly, you can get a lot done with just a handful of elements. You can even build a fully functioning website with HTML only. It may not be pretty but it will work.
Some key concepts to learn:
- What is HTML5?
- Block vs Inline Elements
- Semantic Meaning Behind Elements
Basic Image Editing
Its useful to know how to do some basic image editing. Most of the time stock images are going to be too large to include without some editing. Some CMS platforms like WordPress won't even allow you to upload an image that is too large. You may also run into situations where you need to crop some content out of an image. Knowing how to do this yourself will save you some time and money.
Some key concepts to learn:
Crop, Resize, Compress Images
CSS
CSS (Cascading Style Sheets) let the browser know how to style your HTML. This is where you add fonts, colors and create more complex layouts. In short CSS makes your site pretty.
Some key concepts to learn:
- What is CSS3?
- What with all of these CSS frameworks?
- UX Best Practices
Accessibility
What Is Accessibility?
Accessibility is the practice of making your website usable for all audiences regardless of any disabilities or barriers. This includes readers on slow or unreliable networks, readers who experience color blindness, are visually impaired, and users who may have difficulty moving. For more information here is the W3C Web Accessibility Initiative website (https://www.w3.org/WAI/fundamentals/accessibility-intro/)
Ways to improve accessibility
Always include alt tags on your images.
Make sure your content is easy to read. Don't use small font sizes (14px and below) for blog posts. You spent a lot of time creating content. Don't make it hard for your audience to read it.
Don't use bright backgrounds on text blocks. If it looks like something from a MySpace page circa 2007 its probably not a good idea.
JavaScript
JavaScript is used to add interactivity to websites. Its what allows for fancy modals, form validation, slide shows, API consumption and tons of other features that power the modern web. In the past 5 years or so JavaScript has become a serious skill. Its now essential for all Front-End Developers to master JavaScript.
Now if you're freaking out because you just wanted to build a basic website and now you have to learn a full programming language you can calm down. If you only plan to build a simple static website you don't really need to learn much JavaScript. Most of what you'll use JavaScript for is adding tracking codes and form code snippets to your site. If you do want to add more interactivity you'll need to move on to the extra credit section.
Some key concepts to learn:
- How to include JavaScript on a website