Front-End Development

Being a front-end developer can be tedious at times. You not only have to be meticulous with your code but have to keep up with the many new frameworks.

Coding Best Practices

The only part of your code you can rely on is the HTML. It is the foundation of the web. Without it, you don't have a webpage. When building your site, tackle it in layers. Just like in design, you must understand the context and content before you figure out how it will lay on the page. If you start building websites thinking that CSS and Javascript are optional, you will make better websites.

Start by building the HTML content without CSS or Javascript. This acts as the foundation and you can begin building on the layers from there. From here you can add images and start to make the page come to life using CSS. Once you place everything and are happy with the style, you can make it interactive and start to link it to the backend. A solid foundation is only the first step. Having the right tools is the next.

Here are a few tools and resources to keep track of:

Developer Tools

HMTL, CSS and Javascript Support - An optimized tool for learning and referencing code.

Codecademy - A simple and consise tool to kickstart your understanding of several core coding frameworks.

Can I Use - Compatibility tables for support of HTML5, CSS3, SVG and other technologies in various browsers.

JSLint - A javascript code quality tool.

OverAPI - A reference tool/cheatsheet for pretty much all frameworks.

Sublime Text - A very sophisticated text editor for code.

Atom - An open source text editor that is simple and very user friendly.

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online.

Chrome Browser - Are a set of web authoring and debugging tools built into the Google Chrome browser.

GitHub - GitHub is collaborative and open source tool where people build and share code.

Frameworks:

Bootstrap (UI) - Bootstrap is a mobile first front-end framework for faster and easier web development.

Material Design Lite (UI) - A google supported front-end template that helps you build fast, modern mobile web material design apps.

Foundation (UI) - Foundation is a family of responsive front-end frameworks that make it easy to design responsive websites, apps and emails on any device.

JQuery (Javascript) - A fast, small, and simple JavaScript library.

To see more grammar best practices refer to the University of Uregina