{"id":21054,"date":"2016-11-03T13:33:15","date_gmt":"2016-11-03T13:33:15","guid":{"rendered":"https:\/\/fifteen-staging.fifteen.dev\/blog\/learning-front-end-web-development-in-2016\/"},"modified":"2016-11-03T13:33:15","modified_gmt":"2016-11-03T13:33:15","slug":"learning-front-end-web-development-in-2016","status":"publish","type":"post","link":"https:\/\/www.fifteendesign.co.uk\/blog\/learning-front-end-web-development-in-2016\/","title":{"rendered":"Learning Front End Web Development in 2016"},"content":{"rendered":"<div class=\"entry-content\"><p>As a Web Developer in 2016, sometimes it is all we can do to keep up with the current \u2018trends\u2019 and acronyms which will come at us on a daily basis, either from our colleagues in the office or clients.<\/p>\n<p>\u201cHave you heard of BEM\u201d, one of the Developers said around about 5 months ago, and so began my personal journey into learning a whole new methodology. A client wanted to know if we could write in .NET, a different programming language altogether, and again another journey begins!<\/p>\n<p>However, before I get ahead of myself, let\u2019s take a step back in time. Back to 2004 when I started out as a Web Developer.<\/p>\n<p>When I started out in 2004, at the ripe old age of 13, Javascript (now EMCAScript) hadn\u2019t got much penetration into the market, and Netscape Navigator was still a thing. In order to build my very first webpage, the languages I had to learn were <strong>HTML<\/strong>, <strong>CSS<\/strong> and <strong>PHP<\/strong>. HTML for structuring pages, CSS for styling them, and PHP for dynamic elements.<\/p>\n<p>I consider myself (and always have) a bit of a linguist. I took 3 separate languages courses in school, and took 2 of them to college level learning. I do enjoy linguistic constructs and the flow of words, and programming languages are no different. Every single one has patterns and rigidity, as well as their own little quirks. Still, learning 3 different languages at once, to be used in tandem with each other for best results was quite the challenge.<\/p>\n<p>Now, fast forward to 2016, and I\u2019m going to remove PHP from the equation straight away. Though it is still a very popular language, it\u2019s no longer absolutely necessary for what we define as a \u201cFront End\u201d Web Developer to know.<\/p>\n<p>If you\u2019re starting out in 2016, like our very own Charlie, you have to learn a LOT more than three programming languages to get by. Sure, HTML and CSS are still there, but you also have to know Javascript. This is where the fun starts.<\/p>\n<p>JavaScript has had many things built on top of it, some of which you may recognise, and some you may not. Examples are:<\/p>\n<ul>\n<li>jQuery &#8211; a framework which sits on top of JavaScript.<\/li>\n<li>Node.js &#8211; A JavaScript Runtime.<\/li>\n<li>Gulp &#8211; A task runner distributed through the Node Package Manager.<\/li>\n<li>Bower &#8211; A package manager.<\/li>\n<li>Grunt \u00a0&#8211; A task runner distributed through the Node Package Manager.<\/li>\n<li>Webpack &#8211; A module bundler.<\/li>\n<li>Angular &#8211; A structural framework for Dynamic Web Apps.<\/li>\n<li>React &#8211; Built by Facebook, a \u201cView Layer\u201d for sitting on top of JavaScript Web Apps.<\/li>\n<li>CoffeeScript &#8211; A separate language which compiles down into JavaScript.<\/li>\n<\/ul>\n<p>Why is this the case? JavaScript on it\u2019s own is quite a verbose language, and so people have built frameworks and other tools which make things easier to remember.<\/p>\n<p>An example of this is jQuery, where instead of writing<\/p>\n<pre>document.getElementById('top').click()<\/pre>\n<p>You simply write<\/p>\n<pre>$('#top').click();<\/pre>\n<p>So, the list of things you need to know so far is:<\/p>\n<ul>\n<li>HTML<\/li>\n<li>CSS<\/li>\n<li>JavaScript\n<ul>\n<li>A Javascript Framework such as jQuery or Angular<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>But wait, there\u2019s more! We\u2019ve skipped over CSS. CSS has a few quirks, such as the inability to assign variables (dynamic values), but there are things such as <strong>LESS<\/strong>, <strong>SASS<\/strong> and <strong>SCSS<\/strong> which are called \u2018PreProcessors\u2019 that solve this for us.<\/p>\n<p>What a CSS PreProcessor does, is allows you to assign variables to items, and then once run through a compiler such as gulp or grunt, will output your CSS with the variables. This is great because if you want to change red to blue in your code, you don\u2019t have to change every instance of \u201cred\u201d, you just change the one variable. Though this also introduces having to learn how to use a compiler such as gulp or grunt.<\/p>\n<p>So, your list of things you need to know to become a front end web developer is this:<\/p>\n<ul>\n<li>HTML<\/li>\n<li>CSS\n<ul>\n<li>CSS PreProcessor such as LESS or SASS.<\/li>\n<\/ul>\n<\/li>\n<li>JavaScript\n<ul>\n<li>A Javascript Framework such as jQuery or Angular<\/li>\n<li>A Javascript Task Runner such as gulp or grunt<\/li>\n<li>Knowledge of Node Package Manager<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Once you know all of these you can start delving into the various CSS methodologies which exist. These methodologies can provide structure to your code, and implement design patterns which often remove difficulties in naming, or cascading issues and create predictable markup which teams can follow. Examples of these include:<\/p>\n<ul>\n<li><strong>OOCSS<\/strong> &#8211; Object Oriented CSS<\/li>\n<li><strong>BEM<\/strong> &#8211; Block Element Modifier<\/li>\n<li><strong>SMACSS<\/strong> &#8211; Scalable and Modular Architecture for CSS<\/li>\n<\/ul>\n<p>While not necessarily needed to learn, these methodologies work to make it easier for teams of developers to work on the same codebase, as it makes the resulting product more predictable and introduces a ruleset for the entire team to work to.<\/p>\n<p>So, your list of things you need to know to become a front end web developer is this:<\/p>\n<ul>\n<li>HTML<\/li>\n<li>CSS\n<ul>\n<li>CSS PreProcessor such as LESS or SASS.<\/li>\n<li>CSS Methodology such as BEM or OOCSS<\/li>\n<\/ul>\n<\/li>\n<li>JavaScript\n<ul>\n<li>A Javascript Framework such as jQuery or Angular<\/li>\n<li>A Javascript Task Runner such as gulp or grunt<\/li>\n<li>Knowledge of Node Package Manager<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>There are also things which sit on top of HTML, such as <strong>HAML<\/strong> (which is a HTML PreProcessor much like <strong>SCSS<\/strong> or <strong>LESS<\/strong>) or the HTML templating engines such as <strong>Twig<\/strong>, <strong>Smarty<\/strong> or <strong>Blade<\/strong>, but they cross over into Back End Developer territory as well, so I\u2019ll be nice and not add them to your list of things to know.<\/p>\n<p>Seems like a lot, right? Instead of the three languages I had to learn when I first started out, Developers starting out in 2016 have to know a minimum of 8 separate things, and know of around 15-20 others!<\/p>\n<p>It may seem daunting, but it\u2019s also worth noting\u00a0 that this is just for a Front End Developer. I haven\u2019t even touched on <strong>PHP<\/strong> or PHP Frameworks (such as <strong>Laravel<\/strong> or <strong>Symfony<\/strong>), <strong>Composer<\/strong> (the PHP Package Manager), <strong>Model View Controller<\/strong>, <strong>Object Oriented PHP<\/strong>, or Version Control such as <strong>Git<\/strong>, <strong>CVS<\/strong> or <strong>SVN<\/strong> which a Back End or Full Stack Developer would need to know.<\/p>\n<p>I\u2019m happy I started out in 2004, rather than 2016, as I\u2019ve been able to progressively learn all of these things while they\u2019ve developed, rather than having to learn them all at once. Even though it does seem like a lot, all of the above do serve a purpose and there are reasons that they have been widely adopted. They do make development easier once you have mastered them all, I promise!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"As a Web Developer in 2016, sometimes it is all we can do to keep up with the current \u2018trends\u2019 and acronyms which will come at us on a daily basis, either from our colleagues in the office or clients. \u201cHave you heard of BEM\u201d, one of the Developers said around about 5 months ago, [&hellip;]","protected":false},"author":53,"featured_media":21055,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-21054","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Learning Front End Web Development in 2016 - Fifteen<\/title>\n<meta name=\"description\" content=\"As a Web Developer in 2016, sometimes it is all we can do to keep up with the current \u2018trends\u2019 and acronyms which will come at us on a daily basis.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fifteendesign.co.uk\/blog\/learning-front-end-web-development-in-2016\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learning Front End Web Development in 2016\" \/>\n<meta property=\"og:description\" content=\"As a Web Developer in 2016, sometimes it is all we can do to keep up with the current \u2018trends\u2019 and acronyms which will come at us on a daily basis.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fifteendesign.co.uk\/blog\/learning-front-end-web-development-in-2016\/\" \/>\n<meta property=\"og:site_name\" content=\"Fifteen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/FifteenDesign\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-03T13:33:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2022\/12\/becoming-a-web-developer-in-2016.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1524\" \/>\n\t<meta property=\"og:image:height\" content=\"840\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sam Doyle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sam Doyle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Learning Front End Web Development in 2016 - Fifteen","description":"As a Web Developer in 2016, sometimes it is all we can do to keep up with the current \u2018trends\u2019 and acronyms which will come at us on a daily basis.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fifteendesign.co.uk\/blog\/learning-front-end-web-development-in-2016\/","og_locale":"en_GB","og_type":"article","og_title":"Learning Front End Web Development in 2016","og_description":"As a Web Developer in 2016, sometimes it is all we can do to keep up with the current \u2018trends\u2019 and acronyms which will come at us on a daily basis.","og_url":"https:\/\/www.fifteendesign.co.uk\/blog\/learning-front-end-web-development-in-2016\/","og_site_name":"Fifteen","article_publisher":"https:\/\/www.facebook.com\/FifteenDesign","article_published_time":"2016-11-03T13:33:15+00:00","og_image":[{"width":1524,"height":840,"url":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2022\/12\/becoming-a-web-developer-in-2016.jpg","type":"image\/jpeg"}],"author":"Sam Doyle","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Sam Doyle","Estimated reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/learning-front-end-web-development-in-2016\/#article","isPartOf":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/learning-front-end-web-development-in-2016\/"},"author":{"name":"Sam Doyle","@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/225efe9d507c30e4cfedd9db29c618f2"},"headline":"Learning Front End Web Development in 2016","datePublished":"2016-11-03T13:33:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/learning-front-end-web-development-in-2016\/"},"wordCount":1091,"commentCount":0,"image":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/learning-front-end-web-development-in-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2022\/12\/becoming-a-web-developer-in-2016.jpg","inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/learning-front-end-web-development-in-2016\/","url":"https:\/\/www.fifteendesign.co.uk\/blog\/learning-front-end-web-development-in-2016\/","name":"Learning Front End Web Development in 2016 - Fifteen","isPartOf":{"@id":"https:\/\/www.fifteendesign.co.uk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/learning-front-end-web-development-in-2016\/#primaryimage"},"image":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/learning-front-end-web-development-in-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2022\/12\/becoming-a-web-developer-in-2016.jpg","datePublished":"2016-11-03T13:33:15+00:00","author":{"@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/225efe9d507c30e4cfedd9db29c618f2"},"description":"As a Web Developer in 2016, sometimes it is all we can do to keep up with the current \u2018trends\u2019 and acronyms which will come at us on a daily basis.","breadcrumb":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/learning-front-end-web-development-in-2016\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fifteendesign.co.uk\/blog\/learning-front-end-web-development-in-2016\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/learning-front-end-web-development-in-2016\/#primaryimage","url":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2022\/12\/becoming-a-web-developer-in-2016.jpg","contentUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2022\/12\/becoming-a-web-developer-in-2016.jpg","width":1524,"height":840},{"@type":"BreadcrumbList","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/learning-front-end-web-development-in-2016\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fifteendesign.co.uk\/"},{"@type":"ListItem","position":2,"name":"Learning Front End Web Development in 2016"}]},{"@type":"WebSite","@id":"https:\/\/www.fifteendesign.co.uk\/#website","url":"https:\/\/www.fifteendesign.co.uk\/","name":"Fifteen","description":"Creative. Digital. Marketing.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fifteendesign.co.uk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/225efe9d507c30e4cfedd9db29c618f2","name":"Sam Doyle","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/705b2bbe1c8c8f0764afb5a35b0d21a15112491f97414856494078ee8d5faf9f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/705b2bbe1c8c8f0764afb5a35b0d21a15112491f97414856494078ee8d5faf9f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/705b2bbe1c8c8f0764afb5a35b0d21a15112491f97414856494078ee8d5faf9f?s=96&d=mm&r=g","caption":"Sam Doyle"},"url":"https:\/\/www.fifteendesign.co.uk\/blog\/author\/samd\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts\/21054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/comments?post=21054"}],"version-history":[{"count":0,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts\/21054\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/media\/21055"}],"wp:attachment":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/media?parent=21054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/categories?post=21054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/tags?post=21054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}