Website connections often require a large kick off point to get going. You will need to spend some time preparing out a style or simple model in enhance. But how do you go about beginning the HTML5/CSS3 growth cycle?
In this article I would like to discuss a few guidelines for programming a amazing frontend. Web growth has never been quicker to learn, but there are also a lot of concepts to adhere to along with. Knowledgeable designers know what to look for and how to create their webpages for easy legibility. These designs are great to use not just for your own personal tasks, but also on partnerships and with free value produces.
For example, most of my core div IDs are composed of the fewest letters possible. I’ll use #w for my wrapper div since it’s a quick reference and easy to identify. I would suggest carrying this method further into your CSS classes, because those are often used repeatedly in a webpage.
As another example I will often use .c for my container classes. These are often set to a maximum width and contain internal elements within a layout. Utilize this naming scheme to the point where you can still quickly recognize the conventions without becoming overly confusing. Obviously the class .tag is still shorter and easier than .linktag or .linkTag.
Data markup should also be fairly straightforward and easy to scroll through. Use HTML elements where they are appropriate – list items for lists, code/pre tags for source code, and tables for displaying tabular data.
But it’s important that you do take the time for browser-specific updates and bug fixes. You would be surprised how many valid HTML5 layouts will still break when ported over into Safari, Opera, or IE9. A good strategy is to build your layout to fit perfectly into whatever you normally use for a web browser. Then after you feel the job is complete enough go back and run some tests in all the other various rendering engines.
My default list includes Google Chrome, Mozilla Firefox, Internet Explorer 7-9, Opera, and Safari. If you are building a responsive layout it’s not a bad idea to check on mobile browsers, too. Both iOS and any Android smartphones will have different screen resolutions. These come into play if your responsive media queries aren’t implemented correctly.
For some clients these validation services may be mandatory. Not everybody will care about these labels since they are exactly that – just a label. But for those interested here is a nice HTML5 validator put out by the W3C(World Wide Web Consortium).
The W3C is full of people who debate the rules for new specs such as HTML5 and CSS3, so their website is certainly an authority on development techniques. They also have a CSS Validator if you want to give that a shot, too. There are many properties which will return an error such as -webkit-text-size-adjust. This is completely valid for mobile webkit browsers, and although it’s just an example you should try to ignore these egregious blacklistings of vendor-specific prefixes.
It can be rough to accept there are parts of a website layout that you’ve completely overlooked. It can be helpful to have a couple web developers who you trust look over any skeptical source code. There are times when you’re staring at a project for hours and just cannot find the problem. It has happened to me a number of times and the quickest solution is often through a third party.
If you are not familiar with Stack Overflow then I definitely recommend setting up an account. You can register with an e-mail/password or through another service like Twitter or Google. OAuth is a very secure method since it’s one-click login without memorizing another password. The community is extremely helpful and very intelligent on a number of languages.
But my final point is to never get discouraged and never give up! Other developers are usually very friendly and happy to offer support where possible. Just be sure you can learn from other devs and take their lessons to heart. In a big world there will always be people with more knowledge on these topics. Advancing your education is all about what you do with this knowledge and how you apply any new found skills into your future projects.
In this article I would like to discuss a few guidelines for programming a amazing frontend. Web growth has never been quicker to learn, but there are also a lot of concepts to adhere to along with. Knowledgeable designers know what to look for and how to create their webpages for easy legibility. These designs are great to use not just for your own personal tasks, but also on partnerships and with free value produces.
Make your Documents Simple
This is my golden rule which I cannot pass onto enough developers. There is a tendency to overuse HTML elements and implement a lot of different classes within your markup. However I feel that any amount of space saved will improve the final result.For example, most of my core div IDs are composed of the fewest letters possible. I’ll use #w for my wrapper div since it’s a quick reference and easy to identify. I would suggest carrying this method further into your CSS classes, because those are often used repeatedly in a webpage.
As another example I will often use .c for my container classes. These are often set to a maximum width and contain internal elements within a layout. Utilize this naming scheme to the point where you can still quickly recognize the conventions without becoming overly confusing. Obviously the class .tag is still shorter and easier than .linktag or .linkTag.
Data markup should also be fairly straightforward and easy to scroll through. Use HTML elements where they are appropriate – list items for lists, code/pre tags for source code, and tables for displaying tabular data.
Perform Browser Checks
This rule should be relative to your layout but still pertains onto all web developers. When you’re coding a website layout it’s commonplace to initially test your changes in a single browser. This is just easier since you don’t want to open 3 or 4 browsers after every little change.But it’s important that you do take the time for browser-specific updates and bug fixes. You would be surprised how many valid HTML5 layouts will still break when ported over into Safari, Opera, or IE9. A good strategy is to build your layout to fit perfectly into whatever you normally use for a web browser. Then after you feel the job is complete enough go back and run some tests in all the other various rendering engines.
My default list includes Google Chrome, Mozilla Firefox, Internet Explorer 7-9, Opera, and Safari. If you are building a responsive layout it’s not a bad idea to check on mobile browsers, too. Both iOS and any Android smartphones will have different screen resolutions. These come into play if your responsive media queries aren’t implemented correctly.
Frontend Code Validation
This isn’t a requirement in the coding process but it’s nice to get into the habit of validating your webpages. The newest models do not cater to every meta tag and older XHTML specifications, so it’s common to find errors in your validation. But keep in mind this doesn’t mean your website is improperly coded. And it definitely doesn’t mean you must go back and “fix” your code.For some clients these validation services may be mandatory. Not everybody will care about these labels since they are exactly that – just a label. But for those interested here is a nice HTML5 validator put out by the W3C(World Wide Web Consortium).
The W3C is full of people who debate the rules for new specs such as HTML5 and CSS3, so their website is certainly an authority on development techniques. They also have a CSS Validator if you want to give that a shot, too. There are many properties which will return an error such as -webkit-text-size-adjust. This is completely valid for mobile webkit browsers, and although it’s just an example you should try to ignore these egregious blacklistings of vendor-specific prefixes.
Learning from Past Mistakes
I think we all make mistakes at times because we’re only human. But mistakes come with the responsibility of admitting you were wrong and changing your techniques in the future. Not everybody will do this last step, and so they’ll continue making the same mistakes repeatedly.It can be rough to accept there are parts of a website layout that you’ve completely overlooked. It can be helpful to have a couple web developers who you trust look over any skeptical source code. There are times when you’re staring at a project for hours and just cannot find the problem. It has happened to me a number of times and the quickest solution is often through a third party.
If you are not familiar with Stack Overflow then I definitely recommend setting up an account. You can register with an e-mail/password or through another service like Twitter or Google. OAuth is a very secure method since it’s one-click login without memorizing another password. The community is extremely helpful and very intelligent on a number of languages.
But my final point is to never get discouraged and never give up! Other developers are usually very friendly and happy to offer support where possible. Just be sure you can learn from other devs and take their lessons to heart. In a big world there will always be people with more knowledge on these topics. Advancing your education is all about what you do with this knowledge and how you apply any new found skills into your future projects.
