I was perusing Reddit and found this post, asking about how a person could show off their web prowess a bit for an entry level web dev position. As I was writing my response, I got a little out of hand and decided to make a blog post out of it instead.
1. Avoid table based code unless the content of the page warrants a table.
Use divs, p, and span for your content areas. HTML5 nav, address, etc for other places. This will really impress and show that you are knowledgeable and comfortable working with even new code. HTML5 is pretty easy, just find the tags here: http://www.w3schools.com/html5/html5_reference.asp and use the right ones in the right places. Make sure your HTML headers are HTML5 compliant.
2. Use a reset CSS
Reset CSS puts all the CSS that your browser imposes on its own back to the basics where every element is exactly the same, allowing you to build them they way they should be built. This also will solve huge problems for your cross-browser issues.
There is a famous and awesome reset.css from Yahoo, or you could start with Twitter’s Bootstrap file. I personally LOVE Twitter Bootstrap because it solves so many problems right out of the box, like errors, navigation, etc. Your site will be awesome with this, especially if you can customize it away from the out-of-the-box version.
3. Make sure the page is HTML/CSS is strict compliant through the W3c validators.
Do not have a lame transitional compliant site. This proves you are lazy and only know about 60% of what you should know about HTML. Anyone can make a transitional compliant site. Your HTML header will determine which one the validators check against, but you know that!
4. Learn and use Firebug (or your developer console) to make sure your JS is not throwing any errors.
5. If it’s an entry level job, don’t go crazy with PHP – just show you understand the basics
Make a header file, footer file, and for each page you build include the header and footer. This shows you know how to use PHP includes. Make a globals file that includes your DB connection information and any constants you might need (like site title or base URL), include it through the header file or include it above the header. Be sure you can defend your choice about where you included the globals file.
If you want to show off:
- Make an admin area where you can content manage your front-end pages, by storing the content of each page in the database and pulling it dynamically based on params in the URL
- Make a boostrap file (index.php) that always has the globals, header, footer and parses the URL and includes the right content file based on the URL. This will allow you to have pretty-urls.
6. Add some flair with JS
Get JQuery and include it. Toss some cool transitions or responsive elements on your page, like buttons that add modals and show pictures. Add something, that is smooth and clean and lets people know that you at least know how to use JS, add an event listener to an object and have it do something. Don’t add an alert to a button, that’s just annoying.
7. Show you know how to play well with others
Get some JS/HTML embeds like Twitter or Facebook into the sidebar, you could even make a table that holds the embed code and then randomly show one or the other on each page (this keeps the load time down). Style them and make them look good inside your site’s design.
Sprite any images that you use through CSS, spriteme.org has a GREAT tool for helping with this.
9. Explain yourself
Make a stats page that explains about how you built the site, what decisions you had to make, what tools you used, how compliant it is, and the steps you took to speed it up with Yslow (and which ones your host didn’t allow i.e. the 500 error ones). This shows you not only know what the hell you’re doing, you can communicate it well.
Please consider donating Dogecoin if you like my content.