The week is coming to an end and that means it is time for us to look back on the week that passed, the best design news, resources and other goodies. This week we look at different ways to improve your Google ranking, how SEO differs between mobile and desktop devices, what can you do to improve the load speed of your site, as well as why wire-framing is so important.

How to speed up your website load times

Do you want your website to load blazing fast? This article will teach you how to make your website load faster than you ever thought possible. In order to understand why having a fast website is important, check out these statistics: the average smartphone user will leave a website if it does not load within 3 seconds; Google now considers page speed a major consideration for search engine rankings; 75% of internet users agreed that they would not return to a website if it did not load within 4 seconds.

15 Great Twitter Bootstrap Resources

Twitter Bootstrap is a great front-end framework that lets you quickly prototype new web projects. Here is a list of great resources that gives even more power to the Bootstrap framework.

Three Ways a Mobile Responsive Website Beats Using a Separate Mobile Site

Mashable has called 2013 “The Year of Responsive Web Design.” Yet, for all its accolades — and despite the backing of industry heavyweights — there are some who remain unconvinced that mobile responsive design is the way to go. These folks argue that your website should have a completely separate mobile presence. I think differently. I want you to believe in mobile responsive design. I want you to embrace it like the internet has embraced funny cats. I want to give to you three reasons why you should choose a mobile responsive website design over a separate mobile site.

Google Makes Its Own High-End Laptop, the Chromebook Pixel

Google today unveiled a laptop it designed and built itself, the Chromebook Pixel. Unlike prior Chromebooks, whose main dreaw their value, this one is built to compete with the top end of the market. The three biggest appeals of the Pixel will likely be its touchscreen and high density display, its elegant design, and the fact that it’s a web-based device.

Wireframing and Sketching for Web Designers: Tools, Utilities and Reasons

A website wireframe is a visual guide, or a skeletal framework that will help you define your future website’s characteristics. By wireframing you are basically defining the primary steps and the shape your website or product is going to have. One of the main purposes of wireframing is to set the main priorities and describe the functionality of your future creation.

Improving and Refining Your WordPress Theme Development Process

There is so much to learn about WordPress theme development. The Internet is home to hundreds of articles about building WordPress themes, to countless theme frameworks that will help you get started, and to endless WordPress themes, some of which are beautiful and professional but not a few of which are (to be honest) a bit crappy.

Magazine design principles applied to web design

Here I’ve covered some of my favorite lessons from magazine design, and how they can apply to web design. But the most important thing I hope you can take away from this article is that you can take design ideas and conventions from one form of media and apply it to others.

Helpful Code Paradigms for Frontend Web Developers

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.

Top tips for designing a business website

How important are design trends when it comes to websites?There are two sides to web design: functionality and impact.With functionality, it’s key that people know how to use your site. On a desktop site people are used to seeing navigation at the top, or on the left. Putting it somewhere else would be like putting the contents page of the book randomly in the middle. With these sorts of things it’s important to adhere to what people are used to seeing.

8 Strategies to Get Multiple First Page Rankings on Google

While some users may lament the more cluttered search pages, the “new normal” does offer more opportunities to achieve multiple first page rankings. Controlling multiple first page rankings allows marketers to exert greater control over their brand, reach more searchers, and present a stronger brand to searchers.

How do mobile and desktop SEO differ, and how can you improve rankings?

The proportion of search traffic from mobile devices grew ever larger during 2012, peaking at 46% on Christmas Day for some retailers. And Google probably isn’t alone in predicting that mobile search queries will soon surpass those made on desktop.

The post Weekly News Roundup – 22 February 2013 appeared first on Design Reviver - Web Design Blog.

In part ONE we presented the first 10 in a collection of 20 great HTML5 and CSS3 tutorials.  Everyone agrees that tutorials are the best way to learn something new and stay up to date with the latest changes in the industry, so we have compiled a list of can’t miss tutorials. Let us know if you think we forgot a cool tutorial!

How to Create an Upload Form using jQuery, CSS3 and HTML5

An HTML5 Slideshow w/ Canvas & jQuery

Learn CreateJS by Building an HTML5 Pong Game

How To Create a Pure CSS Dropdown Menu

What You Need To Know About The HTML5 Slider Element

HTML5 Tutorial: How to Build a Single Product Page

Create HTML5 audio visualizations

Full CSS3 HTML5 Contact Form with No Images

Create Your Portfolio Gallery Using HTML5 Canvas

Create an HTML5 Canvas Tile Swapping Puzzle

The post 10 Can’t Miss HTML5 and CSS3 Tutorials – Part 2 appeared first on Design Reviver - Web Design Blog.

The week is coming to an end and that means it is time for us to look back on the week that passed, the best design news, resources and other goodies. This week we look at great examples of Flat Web design, the 10 commandments of Modern web design, and introduction to creating sliders, as well as an interview with the guys behind the Pixel Perfect Precision Handbook.

Flat Design: 17 Examples Of Flat Web & App UI Designs

Early 2013 has seen a rise in some pretty interesting discussions on the use of ‘flat web design’. Flat design seems to be causing a slight stir amongst the design community right now, arguments for and against the flat design trend are often lively and heated. Flat Web Design? Firstly, flat design in the case of this article is referring to either app or UI web design – NOT housing or apartment decoration. Flat design rather simply means your web or app design contains minimal use of heavy gradients, bevels, drop shadows or any form of element that would provide considerable depth to the user interface.

10 Tools for Creating Infographics and Visualizations

asel.ly is another free web-based tool for creating infographics. You cannot create graphs using real data with this tool, but its really good for conceptual visualizations and storytelling. It has a beautiful user interface and the themes you can start with are gorgeous.

10 Commandments of Modern Web Design

Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius — and a lot of courage — to move in the opposite direction. Albert Einstein I would argue that a huge part of that genius Einstein refers to can be found in clarity of purpose and principles.

7 Rules for Creating Effective Slides

The key to a great presentation design is to create visually stunning yet simple slides that your audience can quickly comprehend. Most people can’t effectively read and listen at the same time. The presentations that really stand out allow viewers to avoid reading lots of text by communicating information visually. The following presentation by Alex Rister takes a look 7 fundamental rules in creating slides: Introduction to Slide Design.

5 innovative examples of user interface design

In these days of intuitive touchscreens and intelligent apps, your audience is not going to put any work into using your product, app or operating system – they’ll expect it to be obvious. No one is going to read a lengthy, detailed instruction manual; instead, the user interface should guide your customer through to achieving their goals – doing all the hard work so the user doesn’t have to.

Tools and Tips on how to Optimize Images for the Web

The time a page takes to load is something every designer worries about, or at least is something that every designer should worry about. It doesn’t matter if the layout is nice and beautiful if it doesn’t function properly. Since images can be pretty heavy, this is certainly an issue to keep an eye on. And this is why today we gathered a few links here to show you some tools and articles that will help you with this issue.

10 PowerPoint Alternatives That Make Meetings Fun

This article presents 10 ways to make your meetings go by a little faster, everyone is tired of seeing the same boring PowerPoint template and it is time for something new.

50+ Clean, Simple and Minimalistic Website Design Examples

One of the fastest ways to set up minimalistic websites is to build it on top of WordPress and one of the many great simple templates available for this popular publishing platform. In this article, I have collected more than 50 Minimalistic website design examples you can use as inspiration.

MIHTool, the iOS web debugger

If you are a web developer, the strangely named MIHTool (MIH for “make it happen”) will make you happy. If you mostly work on mobile web applications, this will change your life. It’s the missing developer tool you wanted for so long, and Apple didn’t give you.

Sketch VS Fireworks

In response to many who have suggested in my blog Sketch VS Photoshop that Fireworks is a great alternative to Sketch, I decided to download it again after many years.

Pixel Perfection Precision handbook interview

Last week we had a chance to interview the guys from ustwo, to discuss their latest book “Pixel Perfect Precision Handbook”  You can download it here, And of course be sure to follow @pppustwo on Twitter for all the latest pixel news and advice!

The post Weekly News Roundup – 8 February 2013 appeared first on Design Reviver - Web Design Blog.

Today and next Wednesday we will be presenting a collection of 20 great HTML5 and CSS3 tutorials, 10 each week. Everyone agrees that tutorials are the best way to learn something new and stay up to date with the latest changes in the industry, so we have compiled a list of can’t miss tutorials. Let us know if you think we forgot a cool tutorial!

Design & Code a Cool iPhone App Website in HTML5

Orman Clark’s Vertical Navigation Menu: The CSS3 Version

How To Build a Handwritten Letter Style Contact Form

An HTML5 Slideshow w/ Canvas & jQuery

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

Apple-like Login Form with CSS 3D Transforms

How to Create an Image Slider using jQuery and CSS3

HTML5 Clocks Tutorial

Circle Hover Effects with CSS Transitions

Creative Web Typography Styles

The post 10 Can’t Miss HTML5 and CSS3 Tutorials – Part 1 appeared first on Design Reviver - Web Design Blog.

You might have created the best website ever, however if no one can find you online then chances are your site will never really become too popular. In order to make your website more search engine friendly there are a few tricks you need to remember when designing your content.

1. Update Pages regularly

Even if the content of your website doesn’t really change that often it might be a good idea to change things around once in a while. For instance if you have a blog you might want to add your latest posts somewhere on the site. The reason for this is that the more changes you make the more often search engines will crawl through your sites.

2. Watch out with too much Flash contents

So you are using Flash for navigation on your site, while this might look really cool search engine wise it can be really bad news since search engines have difficulties crawling through sites that use too much Flash.  The good thing is that there are different ways to to make Flash objects accessible and web-crawler-friendly.

3. Don’t use generic links

One area that search engines place a great emphasis on is links. Therefore it is vital that you make sure to word your links as best as possible. For instance a web crawler won’t really understand if you have several links saying “click here” instead you should be using something more specific to describe the content, something like “click here to learn more about …”

4. Use unique page titles

Similar to the tip above it is important to use unique page titles, in other words make sure each page on your web site has a unique title attribute. The problem is that if you always use the same title for every page on your website then the search engines will acknowledge this as if every site is about the same topic, and therefore ignore it.

5. Block Pages You Don’t Want Search Engines Index

Sometimes there are pages on a site that you want to see on the front page of Google. Whatever the content of such a page is make sure not to expose it to the web crawlers. One of the best ways to avoid something being crawled and indexed is through a robots.txt file.

6. Use Content That Search Engine Spiders Can Read

One reason why many websites struggle in the Google pond is because they forget that if your site contains little content then there is little for the search engine crawler to crawl through. If for example 99% of your site consists of images then don’t expect your site to rank very high. Make sure you make the life of a search engine as easy as possible.

7. Don’t forget about images

One thing that I often see people forget about is the  alt attribute of images, often these are left blank because people don’t understand just how important they are. Remember the alt attribute should be used to explain what an image is. Don’t forget that while search engine crawlers are getting smarter and smarter they still can tell that the image on your website resembles Aunt Edna.

Furthermore remember that sometimes images don’t load for some reason and therefore it is a great idea to use the alt attributes to help tell the users whats in the picture.

8. Use Unique Meta Data

This is a very important one, often designers create a template that they use for the whole website, however they forget to change the meta data and as a result they end up with several sites that all have the same meta data. In order to help search engines you should really make sure that each page has its own set of meta data.

9. Be smart about keywords

Keywords, keywords keywords….I cannot even begin to stress the importance of keywords. If you want your website to show up on google then you will really want to think long and hard about your keywords. Let’s say your website is about the best canon L lenses  for the Canon 60D well if your keyword is “Canon” then be ready to fight with about 1,590,000,000 websites, whereas if you use something like “best canon L lens for 60d” then there are only 2,320,000 results, while this might still seem like a big number it sure beats the first number.

10. Remember the importance of your headings

Remember that Headline tags (h1, h2, h3, etc.) are great places  to use your keywords. The biggest thing to remember is that search engines know that there is a reason behind your headline tags and therefore they will automatically add a greater importance to the words found in your headings.

The post 10 SEO Tips That Web Designers Should Remember appeared first on Design Reviver - Web Design Blog.

When it comes to online marketing one of the most used forms is Email marketing. The purpose behind email marketing is often to get a message across, whether this be to promote an offer, serve targeted advertisements or initiate deals. Email marketing is a great way to improve your brand image as well as knowledge of your services.

Often many designers make simple mistakes when creating an email, provided here are 10 tips to create better email designs.

Plain Text Version

This is without a doubt one of the most important things to remember when designing an email, always create a TEXT version of the email. Not all email clients handle HTML too well, some may not render email messages crafted in HTML. Furthermore including a plain text version makes your email more readable on mobile devices.

Keep everything within 500-700px wide

The width of the email should be 500-700px and centered. This is just as important as the tip above, if not even more important. There is nothing worse than receiving an email where you need to scroll from side to side in order to read the whole message. Why? Simply we are creatures of habit, we don’t take the time to read every word in a text we scan it. Since our eyes tend to focus on whats straight ahead of us, the stuff on the sides will get blacked out and ignored by our brains.

Allow Easy Unsubscribing

There is no if/but/maybe about this, it is absolutely essential that your readers can unsubscribe from your email, don’t try to be smart about this by hiding the unsubscribe mail in some obscure place within the email. Unsubscribing should be a painless process that virtually anyone viewing the email should be able to figure out. Remember if the recipient doesn’t want your email they are not going to read it anyways. You might be sending 1,000 emails, but if only 50 are being read then your system is not very effective.

Plan for no images

While you might have just downloaded the perfect image from Shutterstock, please remember that many email clients block images in messages unless the user decides to see them, pretty much that means that often your beautiful images will never get seen. Another problem is if your message is embedded in an image, then the same rule applies most readers will never see your message because your images are blocked.

Test it on-the-go

Just like you would test a website before launching it you should really test an email before sending it out to your final audience, remember that not only should you test these on the most popular clients such as Yahoo, Gmail, Outlook and others but also test to see how it looks on a smartphone or mobile device, If you don’t own a device then grab a friend who has one ask them if you can test your mail on their device!

View in Browser

There should be no reason why you would not allow people to view your email as a Web page. Face it, there are just some people who prefer to look at things in a browser, furthermore not all email clients render HTML as you expected and therefore making it possible for your readers to view your mail in a browser makes everyone happy.

Relevant Subject line

I cannot even begin to state the importance of this, if your subject line screams “I am spam from spam company don’t bother reading” well then guess what your reader isn’t going to read it, furthermore if your subject line is “READ ME I AM FULL OF BS” all in capital letters then they will also move on, or how about the “Make $1,000 in a jiffy!!!!!!!!!!” if nothing else then all the exclamation marks will deter anyone from reading this email, and besides spam filters will most likely mean your readers will never even see these emails.

Call To Action

So you have the best/newest/fastest something and you want to add a CTA, or Call To Action in your email, then make sure it is clear exactly what this action is, if you want your reader to do something then don’t just add a ‘click here’ button instead add something like “click here to…” tell them what will happen when they click here.

Don’t use video

Yes over the past few years there seems to be a video for everything, with sites such as YouTube getting more and more popular there should be no reason why you would include an actual video in your email. If your reader is using a slow internet connection then it will take them forever to load your email. Furthermore more and more email clients are filtering out emails with large file sizes, in other words if you add a video you run the risk of ending up in the Spam folder.

Make it clear who’s sending the message

Lets face it, if you don’t know the sender of an email you are more likely to just hit the delete button. Just like in real life people are suspicious of strangers and the same goes for email. In other words make sure your sender ID states exactly who you are, furthermore make sure your logo is visible at the top of your email.

The post 10 Tips to Remember When Designing For Email appeared first on Design Reviver.

The week is coming to an end and that means it is time for us to look back on the week that passed, the best design news, resources and other goodies. This week we look at how you can implement Responsive Web Design, four things media companies must do in 2013, different design elements to optimize your blog, as well as how you can make sure your animations are triggering at the right time.

The Next Step in the Evolution of Responsive Web Design: Responsivity Analysis

Beyond any question, responsive web design has become the standard for anybody who wants to make a strong presence on the internet. With the passage of time, rules, best practices, layout standards and guidelines have been commonly created, implemented and accepted by most web designers and developers.

50 JavaScript Libraries for Charts and Graphs

How are you visualizing data in JavaScript? What is your favorite library for creating charts and graphs with JavaScript?

I have been a long time fan of jqPlot for its open source approach, simplicity, examples, and great features. It performs well, it is used by many corporations, and it is built on top of jQuery

4 Things Media Companies Must Do … or Die

Adaptive design. It’s one of the big buzzwords in digital media right now, but what does it mean? Nick Davison, director of web development for ad firm Digitaria, has come up with the quickest explanation we’ve ever seen, not only for adaptive design, but for static, liquid and responsive designs as well. Best of all, it’s almost completely visual.

Use These 5 Design Elements to Create the Optimum Blog User Experience

One of the main unacknowledged problems with today’s websites is that many just follow the favorite design of the month. When Flash was born, we got bombarded by Flash-based sites that took forever to load. When sliding banners came along, almost everybody wanted to have one too.

21 Fresh Examples of Websites Using HTML5

After all the buzz involving the HTML5 CSS3 duo, it is nice to check how websites are using all the good practices you can get from HTML5. When the buzz around the subject started, we could see a lot of websites totally animated. Now, after all the benefits of HTML5 settled, we can see websites taking advantage of it to create smooth transitions, nice image sliders and subtle animations. It is interesting to see the evolution of practices in this matter and that is why today we gathered some examples of websites using HTML5. Enjoy!

25 Neat CSS3/Javascript Plugins and Coding Techniques That Will Boost Your Productivity

Using CSS3 and Javascript, you not only are able to do some awesome stuff but also to do it more efficient and faster. If you don’t know how to work with cascading style sheets or with JavaScript, then the best way to learning it is by looking at some examples, tutorials and coding techniques.

12 Extremely Useful And Powerful Free CSS Tools

Don’t Forget to participate in a contest where you can win the world’s biggest UI elements pack “Impressionist User Interface Elements Pack” for 3 winners (1 developer license and 2 personal license) to design your project more creatively.

11 Useful CSS Code Snippets for Responsive Web Design

Mobile responsive web designs have become extremely popular in the last 2 years, and with a very good reason. As such it’s common to see more code snippets published on the blogosphere, Github repositories, Codepen docs and more.

Getting animations to trigger at the right time

When we redeveloped our new website, we decided to use CSS3 animations to provide an impressive and interactive site experience. However, we struggled to time the animations to trigger at the right time.

50 Useful Tutorials To Learn PSD To HTML Conversion

Once again we have gathered a very useful and helpful collection of detailed tutorial for PSD to HTML conversion. Today, every designers, web developers or blogger should know how to convert PSD files to HTML code. This technique is very important for them because with this technique they can easily convert their designs into active blogs or websites. And also this technique makes their work easy and save their valuable time too.

The post Weekly News Roundup – 18 January 2013 appeared first on Design Reviver.

If you are thinking about pursuing web design as either a career or a hobby, you must be able to do more than simply design a pretty page. Professional web designers are experts in programming and coding as well. The most talented web designers are those that can adequately balance both their creative and artistic sides with their love of technical coding.

As a web designer, there are plenty of different web design standards one must master. The two most important in the industry today are HTML and CSS. What are these methods all about and how much time and money will you need to invest in order to learn them?

What is HTML?

Since the early days of web design, HTML has been the standard for professional websites. It stands for Hypertext Markup Language and can be quite confusing to someone who has no experience using it. HTML is the language, or code, used to edit and position the text, images, frames and other web page elements. If you go to your web browser and select View and then Source – the code used to design that website is available for anyone to see.

Those who have used HTML will tell you that it is not difficult to learn. There are a few basic tags (codes) a designer has to learn and a simple webpage is at their fingertips. The more complex the HTML, the more you can do with a site.

Efforts have been made to dumb down the process even further so that anyone, even those who have no knowledge of HTML, can create their own website. These are typically called WYSIWYG (What you see if what you get) editors. They allow you to create a webpage without using code and the editor assumes what HTML you need and does the work for you. Some software programs now include an option to convert your document to HTML. These are great tools for newbies. Unfortunately, the processes of guessing what code you need breed mistakes and errors in design that can lead to further frustration.

What is CSS

CSS is a newer animal and is not as familiar to beginning web designers as HTML. CSS was created to allow designers to have even more creativity and control over their designs. Today there is more than just one type of Internet browser to design for and this can be tricky and time consuming for HTML designers. These saves users time, effort and most likely money when they are creating sites. Also, CSS encourages less effort by allowing designers to create style sheets. This means when an edit is made to one page, all other affected changes are automatically made. This keeps designers from having to make multiple edits for large, detailed websites.

HTML vs CSS

CSS is not really taking the place of HTML. It is generally used as an enhancement, not a substitute. HTML is still the perfect type of coding for the main structure of a site.

CSS excels when it comes to how a webpage will look. The outward appearance including backgrounds, colors, content and image placement can all be handled by CSS. Anyone who is familiar with the Microsoft Office version of style sheets has a good handle on the purpose of CSS.

While a webpage can certainly be accomplished still only using HTML, CSS allows designers to do things like set different page margins for all sides of a page, overlap words, better position page elements, and set a font for a whole table instead of just pieces. These make all seem like minor adjustments but these CSS tricks free up time for designers to worry more about overall layout, design and navigation.

Training

There are plenty of places where new designers can go to learn both HTML and CSS. If you are a manual type of student, the library has an abundance of tutorial manuals for these techniques. Any establishment that teaches computers classes will more than likely include these basic web approaches as well for the visual learners.

Of course, many a web designer learned their craft by simply jumping in and messing around. If you have the discipline, this hands-on method of learning is not only effective, but free.

With the popularity of today’s world wide web, it seems like everyone is designing a webpage these days. From the free online editors to full blown ecommerce Internet giants, there is a market and need for web design that is not going away any time soon. Whether you decide to take it slow and target small businesses or get serious and starts designing for large corporations, design fundamentals are the place to start your journey.

As a starter or a seasoned web developer, we usually tend to skip out on some great practices that we should be using merely because we have never heard about them. To reduce this gap of missing goodies, we cover several practices no developer should live without.

Doctype Declaration

Many do it, others choose to not. However, it is in your best interest to declare the doctype in your HTML files for better standards compliance. Browsers usually have their own ways to fix errors you accidentally or unknowingly left in to get the HTML better interpreted. However, as with most browsers, they all have different ways to interpret things and thus, when it comes to individual browsers trying to fix or “patch” your errors on the fly, things start to get messy and your website will appear different across these different browsers and platforms.

Therefore, by declaring the doctype, you force these browsers to enter standards compliance mode, which cancels out their correction systems. With this, you can easily locate the errors you have made and be able to fix them to get your website to look and work the same across many browsers and platforms. Think of the doctype as a keycard to open all the doors in a building versus a key that may or may not open a few. You would definitely choose the keycard that opens all the doors rather than a key that may or may not work, the same applies to declaring the doctype so definitely use it, you will be glad you did.

Meta Description Attribute

Many search engine optimization radicals always seem to deter us from using the meta description attribute with the argument that search engines do not use them anymore. Actually, they do, but if they are not available, they will use other means to formulate a description about your website. Therefore, as a good practice, always include a meta description attribute with a great description of the website as this is what search engines use to formulate that description right below your title when you search for your website.

To get back to the search engine optimization radicals, they do have a point, especially for those who misuse the meta description attribute. Search engine bots are getting smarter by the day and can detect whether you deliberately misused the attribute or not. Therefore, use it as intended, as this is a gold mind for HTML as well as the key to improved search engine optimization.

Footer Content

This HTML practice is a bit subjective however very useful and vital to keeping your website running smoothly. We all have landed on a website that takes a good several seconds to a minute to load anything that is viewable due to the cause of external scripts bogging down on the load time. The way HTML is loaded is in sequential form, from top to bottom, line after line. What this means is, it will halt on a line of code until it is fully interpreted or executed, and in this case, it will wait until the external JavaScript file is fully loaded before proceeding on to the next line.

Therefore, stick this JavaScript code in the footer to have the content that is important to load first. For example, if you have your analytics code such as Google analytics, stick it in the footer right before the end of your body tag so that your website can load the content quicker and not bog down until it reaches the end of your content where users do not have to actually wait for it to load.

The reason this idea is subjective is that some may disagree with the idea of taking JavaScript code outside of the head tags, however, in such situations, it is a better practice to take upon as it is what keeps your website running more efficiently in such a case.

Using Unordered Lists for Navigation Bits

Many developers whip up all sorts of concoctions to create a navigation bit. So instead of using the accepted and preferred markup they decide to use a set of divs and all sorts to achieve similar results. This technique is not only inefficient, but it is also very tedious and redundant. Therefore, use unordered lists as a basis for your navigations as the code is simple, the functionality is pretty much completed for you already, and all you need to do is give it some style. Remember, reinventing the wheel is not something you want to do, let alone reinventing it and losing efficiency.

Leaving Your Front Door Open

Whenever you are in your home, out of your home, or on your way home, you always have your doors closed and locked. I mean, who would want to leave their home doors unlocked and open when they are not around? Other than the neighbor I once had who left their front door wide open at night, we all know it is a good practice to keep our windows and doors closed when we are not home. Similarly, always close the tags you open for clean and validated markup.

I have seen countless tutorials out there that are available to teach new developers how to code HTML and they almost always leave their tags open such as image tags or break tags. This not only affects the new generation of developers, but it is a terrible practice. Browsers will always attempt to close them for you causing errors and unwanted results, so save yourself from bad practices, and make closing the HTML tags a habit as you do with closing your doors when you leave your home.

Validate Your Code

Validating your code helps you keep your code clean from nasty errors you may have missed or unintentionally thrown in. While having valid code does not indicate you are a great developer or not, it does help eliminate possible errors you may find in the future within many different browsers and platforms. It additionally throws a good image about your practices for your portfolio for future hires.