Coding a website takes a lot more time than just a simple design. You have to consider how each HTML element will be placed in the document and how you need to style them using CSS. Not to mention there are at least 4 browsers you should test plus the possibility for mobile users.
There is such a demand for web development that coding takes on a life of its own. In this guide I want to share a few tips and ideas I’ve come across when working on the frontend. There are many ways you can save time writing HTML5/CSS3 and even working with jQuery. But truly the best remedy to understand frontend development is lots of practice and patience.
Work with Document Templates
Most developers do not start with a plain blank document. It’s not difficult to store a local copy of your typical setup when coding a website from scratch. There are even lots of HTML5 templates you could work with instead of crafting your own.
I personally choose to setup a custom dev environment because I can have more control over where the files are located. This also means I can work with other CSS and JS files to get me started. The only significant inclusions may be jQuery and some CSS resets.
But try to keep the HTML template as slim as possible. You don’t need any elements inside the body since you’ll likely code each website layout differently. Focus mostly on the meta content and other tags found inside your document header.
Break Up your Stylesheets
When first coding your styles it’s common to work within a single file. This makes everything much easier to manage, up until a certain point.
When you begin to include media queries and IE-specific code it’s worthwhile to build out a few different files. I usually split into ie.css, responsive.css, and forms.css. If needed you may break up entire pages into their own file – such as profile.css or user.css.
It doesn’t seem like much of a priority to begin with. But remember that after you launch your website live it will still require maintenance. Going back to edit a single stylesheet will require lots of find & replace functionality. Organization is the key to any frontend developer’s lifestyle.
Writing CSS3 Properties
Back before CSS3 standards were released the major specification was CSS2. Many of these properties could be written together in block-line formatting. Even if you chose to break up styles onto a single line there was still plenty of space to quickly scan through.
I’ve found a comfortable medium in writing CSS syntax where I use both types of inline and block-level selectors. On minimal elements with only a few properties it’s easier to keep them inline since you’re saving space. But using these more complex CSS3 properties almost requires block-level syntax as the code appears jumbled together.
This may also occur using smaller CSS3 styles such as border-radius. You’ll need to support the -moz and -webkit prefixes, so you’re really writing 3 properties targeting different browsers. It’s not such a huge problem since the border radius properties are much easier to use than background images. But to keep your code clean and readable I recommend breaking up lines and keeping those selectors segmented.
Another newcomer into the field is Retina.js for dynamic mobile graphics. This is a perfect example of “drop it and leave it” where you can include the script into your website with no customizations required. If you create images based on Apple’s @2x retina display this script will detect retina devices and replace your image URLs automatically.
Any typical website may find value in simple jQuery animations. They are easy to create and work by manipulating different CSS properties over a given time. Many animations will even work in Mobile Safari and Android-based web browsers.
Simple examples may include fading the opacity or hiding a content element. You can also replace HTML inside a container by sliding it over left or right. There are so many great techniques with animate() I must recommend looking into the docs. Test out an application idea and see if you can spruce up any typical layout styles.
Never take the frontend for granted in your design work. The process has become more streamlined over the past decade but it is still not so simple for beginners. Web developers in the field 4-5 years have grasped all the difficult concepts and forget the process of learning. Be sure to share your ideas on coding frontend web layouts within the post discussion area below.
- 25 Tutorials For Getting More Out of Adobe Indesign
- My Approach to On-Page SEO in 2019
- Use BugHerd to Visually Manage Feedback and Track Bugs Sponsored
- A Chat with Chris Coyier, Web Design Influencer & Entrepreneur
- The Biggest Designer Debates
- The Grumpy Designer’s Advice for Avoiding Painful Tasks
- Top 15 Tools and Resources for Web Designers and Agencies Sponsored
- Getting Answers to Your Web Development Questions