Lately, I find myself thinking back to my very first coding class in college, called “What is HTML?”. As rudimentary as it was, it was new to us all the same. We learned about tags and some simple styling techniques to build a page for your website, which as a front-end developer, it is typically my responsibility to handle the User Interface design and implementation as I collaborate with a team of several back-end developers.
I have only encountered pair-programming for HTML and CSS a handful of times, but I appreciated those opportunities to exchange knowledge, teach the basics of UI and help build the general skill sets of other developers in need of some front-end information.
For those looking for some basics, here are some essentials and key notes used every day in front-end work.
HTML defines the structure of a document (page). You can outline where your header, content, footer and any other sections will go on the page. Below is a skeleton of how your code could look for a general page.
There are many wonderful tutorials out there to walk you through how to write in HTML. One of my favorites is Codecademy: http://www.codecademy.com/tracks/web.
Once you understand and can use HTML well, the next step is learning how to style your webpages to look the way you want.
CSS defines the look and feel of the HTML elements. CSS properties use a cascading, waterfall effect to layer style rules and control the page layout and any visual characteristics it may have. CSS is powerful. Using it well is the base of being a front-end developer.
Many applications today use LESS or other variations of SASS (Syntactically Awesome Stylesheets), a dynamic stylesheet language that is compiled into a CSS file by your application. Using SASS allows developers to define variables inside their stylesheets. This is extremely helpful if you plan on using the same style (such as font color) throughout your website. SASS also gives developers the ability to nest their selectors inside other selectors, making the stylesheet shorter and clearer to follow by other developers.
Overall, using these other stylesheet languages gives the developer many opportunities that CSS does not support and allows for efficiency and minimal code repetition.
Now that you have created the outline for your content and made the page look the way you want, the next step in your front-end adventure is to understand all the uses of JavaScript and build some functionality into your site.
Generally, most developers have touched some JS at one point or another in the developer careers, but most have not had the chance to really learn what JS is and why we need it. JS is a dynamic programming language; basically, JS code executes at runtime instead of during compilation, as is done in other programming languages.
Using JS properly should enhance the UX (User Experience) of your site. You will be in full control of the behavior of the page with JS. Changing HTML as well as CSS dynamically is possible with JS and is useful in many occasions.
You can see the combination of HTML, CSS and JS in full use in open source frameworks available today. Two of my favorites are Bootstrap and ZURB Foundation. Building a site from scratch often comes easy by using one of these two frameworks to get you started.
You site is now beautiful! It looks great, functions well, now you need to be sure you are following standard guidelines and making your site accessible by anyone who could want to see it.
Having a site be “accessible” means that it does not contain obstacles that prevent interaction with or access to webpages by those with disabilities. All users on your site should have access to information and functionality on all web pages in equal capacity. Using the guidelines spelled out by W3C, you can understand the accessibility of your website.
These guidelines cover:
Once you have reviewed and implemented any changes needed to follow W3C accessibility guidelines and you are ready to continue, the next best thing to focus on is performance.
When a user goes to a site have to wait while the homepage loads, there is very little time before they move on to the next site. Users do not want to spend more than a few seconds looking at a loading screen. They want their information now! Optimization is key to keeping your users.
Optimizing your website should become something you do throughout the process of building out your site and its content. Within the content of your site there are two big pieces that causes problems for performance: images and CSS/JS files.
There are a lot of resources out there for minifying (“the process of removing all unnecessary characters from source code without changing functionality”) both your JS and CSS files. Just this one change will decrease your website page load times and allow for quicker, easier use overall.
Check these links out and see what you think:
Minification typically occurs during the build process, for deployment of your code to the development/production site. You can do this by using tools such as Ant or Maven or Grunt.
Image sizes, file type and resolution are the other issue to focus your efforts. Making images smaller, while trying to affect the resolution as little as possible, is the main need. Different image file formats are needed for different reasons throughout a site; choosing the best one for optimal use is another positive use of your time!
There are three universally supported image types: GIF, PNG, and JPEG. Each types is used for a specific reason on the web:
There are many, many other ways you can optimize your site for better performance, but these are the two I suggest to focus on first.
In order to test the performance of your site you can take a look at any of the following sites. Some may be more helpful than others, but all are good sources of information:
Making your site perform well is only the first step of optimization. Next you need to focus on your users. Are they able to find your site easily? Yes? No? Making sure you are up-to-date on the SEO of your site will help everyone all-around.
An essential part of good web development is SEO. Structuring your code well ensures that your site gets properly indexed by search engines and is accessible to those with limited web capabilities.
The only place I go for SEO help is Google Analytics. Setting up a GA account for your site is highly suggested. This allows you to not only follow how your users got to your site, but also where they go once they are on it! Click the link below to get started:
Your site is ready!! Just kidding ☺ Before you can show the world your beautiful site, you must do cross-browser testing. Even though you may use Chrome 100% of the time, there are many other browsers used. Some styles or elements that look great in Chrome may look awful or not work at all in other browsers.
Cross browser testing does not just involve the desktop browsers. Now, you need to also consider mobile functionality. Making your site responsive to smart phones is a big part of styling now.
There are a lot of sites out there for testing across browsers, but the best resource is the browser itself. The only problem this causes is if you have a mac – you will not be able to download IE. Not having IE is a BIG mistake in the front-end world. Most UI problems come from the widely-used, terribly-buggy Internet Explorer. Then the online resources for testing browsers come into play.
Testing for mobile look can be done in most browsers with the respective developer tools or add-ons. Mobile functionality, however, is a little more different to correctly see in the developer tools provided. Once you get the look just right it is best to test the site on the mobile devices for proper functionality results.
Some of the tools I use:
With those key points in mind, you are now ready to begin developing your own web application! For more advice, feel free to check out our other blog posts.
Lastly, here are some resources I use on a regular basis that may come in handy while developing for the front-end: