Front End Techniques for Web Development
One of the things I love about being a front end web developer is that I am constantly learning new technologies. Many times this keeps me challenged and keeps the job from getting stale. However, for large scale projects and implementations, it can create quite the headache.
What can you do to make a project not only go smoothly now but also make it easier to update in the future? One possibility is improving your CSS framework. Over the last few years, tremendous strides have been made in CSS frameworks. To catch you up, here is a definition courtesy of Wikipedia.
“CSS frameworks are pre-prepared libraries that are meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language. Layout-grid-related CSS frameworks include Blueprint, 960 grid, and YUI CSS grids. Like programming and scripting language libraries, CSS frameworks are usually incorporated as external .css sheets referenced in the HTML <head>. They provide a number of ready-made options for designing and laying out the web page.”
Besides the versions listed above, there is also Object Oriented CSS that gives a developer even more options to make the project easier. But just when we were starting to get a handle on these styles, along comes HTML5 to shake things up a bit.
I’ve been following the progress of HTML5 for a couple of years now but it has only been in the last few months that I’ve really started to embrace it. There are so many new useful tools that make project implementation simpler. For example, the new naming conventions stand out to me. Instead of just having the plain <div>, we now have the ability to use named elements to be more specific about an area of code (e.g., <header>, <nav> and <section> ). This combined with not needing self-closing tags (<img />) or ‘type’ attributes makes coding pages a lot simpler.
As for code structure and semantic ideas I had been following the example of Chris Coyer at CSS Tricks:
This was working very well for me while I was learning the ropes. That is, until I read an article by Nicole Sullivan about not styling heading elements using HTML5 sections, and then my ideas of semantic structure were turned on their head.
The article really got me thinking about how you can be both efficient with your code and improve your search marketing efforts by laying out your website in a structured and logical fashion.
In the next part of the article, we’ll look at some new methodologies I’ve been employing to improve my coding efficiencies. Have any thoughts or comments on what I’ve shared? Post them below.
Send by email
PDF version
