Front end web development: How to be great

54 %
46 %
Information about Front end web development: How to be great
Technology

Published on February 26, 2014

Author: frankjwest

Source: slideshare.net

Description

No tech, no code, just plain old simple English as I talk you through the entire journey of front end web development. Whether you're new to the industry or have been in it for years, this talk will help you become a great front end developer.

Frank West Front end web developer Lover of cats @frankjwest Front end web development – How to be great! by Frank West, 1 June 2013

Distractions Front end web development – How to be great! by Frank West, 1 June 2013

Front end web development – How to be great! by Frank West, 1 June 2013

Introducing Ella Front end web development – How to be great! by Frank West, 1 June 2013

Where is the website? Global (SC) Global (NM) US (SC) Global (CS) April 2013 April 2013 March 2013 March 2012 March 2013 90.17 83.22 78.49 66.4 67.1 Bing 3.61 5.4 10.73 16.7 16.9 Yahoo! 3.08 8.01 9.12 11.6 11.8 Google Key SC NM Net Market CS Front end web development – How to be great! Stat Counter ComScore by Frank West, 1 June 2013

The basics • Header tags, h1 – h6 • Page titles and meta tags • HTML 5 – Header, footer, article, section, aside – Address – Time Front end web development – How to be great! by Frank West, 1 June 2013

Adding more • Open graph – Meta tags for social • Microdata (Schema.org) – Supported by Google, Yahoo! and Bing – Define books, movies, people, products, reviews, organisations, events and much more Front end web development – How to be great! by Frank West, 1 June 2013

Another step • Google Analytics – Events • Videos being played • Ajax events being triggers • Tabs be switched – Filters • Logged in vs Logged out Front end web development – How to be great! by Frank West, 1 June 2013

3 seconds

Understand it • • • • • • Sprites Minified files Code ordering Compressed images Do we need external libraries Even setting heights and widths on images Front end web development – How to be great! by Frank West, 1 June 2013

Test it • • • • Google Chrome developer tools Google page speed Gtmetrix YSlow Front end web development – How to be great! by Frank West, 1 June 2013

Front end web development – How to be great! by Frank West, 1 June 2013

Front end web development – How to be great! by Frank West, 1 June 2013

Front end web development – How to be great! by Frank West, 1 June 2013

Front end web development – How to be great! by Frank West, 1 June 2013

Front end web development – How to be great! by Frank West, 1 June 2013

Front end web development – How to be great! by Frank West, 1 June 2013

Front end web development – How to be great! by Frank West, 1 June 2013

A gentle hand • • • • • Understand the design Talk with the designer Pay attention to detail Question inconsistencies Master typography Front end web development – How to be great! by Frank West, 1 June 2013

They’re all dead Dave Front end web development – How to be great! by Frank West, 1 June 2013

Is it alive • Hover, focus, active states – Links – Buttons – Forms – Table rows • It doesn’t need to be fast Front end web development – How to be great! by Frank West, 1 June 2013

Where is it? • Icons – Are they obvious? • Search – Where is it? • Terminology – What does that mean? • Errors – The button doesn’t work? Front end web development – How to be great! by Frank West, 1 June 2013

Front end web development – How to be great! by Frank West, 1 June 2013

Front end web development – How to be great! by Frank West, 1 June 2013

Take the challenge • • • • No mouse Screen readers Black and white 200% text Front end web development – How to be great! by Frank West, 1 June 2013

We have arrived • Functionality Front end web development – How to be great! by Frank West, 1 June 2013

How to be great! • • • • • • • HTML, CSS, JavaScript SEO Performance Design Interaction User experience Accessibility Front end web development – How to be great! by Frank West, 1 June 2013

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Learn Front End Web Development & JavaScript + jQuery

Front End Web Development. In this track, ... AJAX is an important front-end web technology that lets JavaScript communicate with a web server.
Read more

How to be a great front-end web developer | Zing Design

... be a great front-end developer with a checklist of new year's resolutions for 2014. How to be a great front-end web ... of front-end development, ...
Read more

The 5 Best Front-End Developer Tools - The Mention Blog

Continue reading The 5 Best Front-End Developer ... in an entirely new generation of web ... tools when it comes to Front-end development?
Read more

Front-End vs Back-End vs Full Stack Web Developers - Udacity

... and EmberJS, which ensure great-looking ... end and back-end development. “Front-end developers ... Udacity’s web development courses to take ...
Read more

I Don't Speak Your Language: Frontend vs. Backend ...

... Do you want to learn more about back end and front end web development? ... In order for everyone to carry on great discussions and to collaborate ...
Read more

5 Great Books for Front End Developers - Development | Ph ...

Learning the key skills to front end development can ... part of web development. ... to any front end developer as it can be a great book to ...
Read more

Front End Web Developer Tools - DebugMe Blog

The DebugMe team has put together a list of front end web developer tools ... Great tool for every front end web ... Front end web development is a ...
Read more

10 Great Websites To Help You Learn Web Development Online ...

Elegant Themes Blog ... 10 Great Websites To Help You Learn Web ... Or maybe you want to learn some front-end development before moving to advanced ...
Read more