{"id":329,"date":"2014-09-19T22:52:08","date_gmt":"2014-09-19T22:52:08","guid":{"rendered":"http:\/\/aurelio.audero.it\/blog\/?p=329"},"modified":"2024-12-24T02:07:41","modified_gmt":"2024-12-24T02:07:41","slug":"resources-beginner-front-end-developers","status":"publish","type":"post","link":"https:\/\/www.audero.it\/blog\/2014\/09\/19\/resources-beginner-front-end-developers\/","title":{"rendered":"Resources for Beginner Front-end Developers"},"content":{"rendered":"<p>Few weeks ago I received an email from a developer asking me for suggestions on how to delve into the front-end world. After having replied to this email, I thought that it&#8217;d have been nice to share the same suggestions on my blog. That&#8217;s exactly what you&#8217;ll find in this post.<br \/>\n<!--more--><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"791\" data-permalink=\"https:\/\/www.audero.it\/blog\/2014\/09\/19\/resources-beginner-front-end-developers\/front-end-stack\/\" data-orig-file=\"https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png\" data-orig-size=\"1200,630\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack-300x158.png\" data-large-file=\"https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack-1024x538.png\" src=\"https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png\" alt=\"html5 css3 javascript logos\" width=\"1200\" height=\"630\" class=\"aligncenter size-full wp-image-791\" srcset=\"https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png 1200w, https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack-300x158.png 300w, https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack-1024x538.png 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h2>HTML<\/h2>\n<p>The first language that a front-end developer have to master is HTML. It&#8217;s the base of everything you can develop for the web and its knowledge is essential for anyone working on the web. Even more, unless you want to be stuck in the past, you must have a good understanding of the new elements and semantic introduced in <a href=\"https:\/\/www.audero.it\/blog\/tag\/html5\/\">HTML5<\/a>. A good book to start with HTML5 is <a href=\"https:\/\/www.amazon.com\/Introducing-HTML5-Edition-Voices-Matter\/dp\/0321784421\"><cite>Introducing HTML5, second edition<\/cite><\/a> by Bruce Lawson and Remy Sharp. It&#8217;s not very new as it was published in <time datetime=\"2011\">2011<\/time>, but most of the information you can find in it are very valuable. Besides, the authors have written it in a very relaxed and informal language, so it&#8217;s easy to read. Honestly, this is one the best book I&#8217;ve ever read.<\/p>\n<h2>CSS<\/h2>\n<p>Writing clean and semantic markup is good, but without the knowledge to apply style to it your career won&#8217;t go a long way. So, a front-end developer you need to learn <a href=\"https:\/\/www.audero.it\/blog\/tag\/css\/\">CSS<\/a> too. A good book to read for those starting with CSS is <a href=\"https:\/\/www.sitepoint.com\/premium\/books\/the-css3-anthology-4th-edition\/\"><cite>The CSS3 Anthology, 4th Edition<\/cite><\/a> by Rachel Andrew. What I like of this book is that instead of merely listing all the CSS properties and their possible values, the author introduces a real problem (even if it&#8217;s as simple as <q>How do I set a background for my page using CSS?<\/q>) and then shows the solution. The latter usually involves the use of a new CSS property that it&#8217;s then discussed in details. So, you&#8217;ll learn CSS in a funny and more practical way.<\/p>\n<h2>JavaScript<\/h2>\n<p>Another crucial language to learn is JavaScript. I think that JavaScript shares with <a href=\"https:\/\/www.audero.it\/blog\/tag\/php\/\">PHP<\/a> a great advance: it&#8217;s very easy to get started. You type something in the console of your web browser of choice and something happens. Unfortunately, this is also the reason why several front-end developers lack a good understanding of some of its main features like closures, scope, how the context (<code>this<\/code>) of a function is set, and so on. If you want a book that starts from the basics I suggest you to read <a href=\"http:\/\/speakingjs.com\/\"><cite>Speaking JavaScript<\/cite><\/a> by Axel Rauschmayer. You can buy a paper or a digital copy of his book but it can also be read online for free. Axel maintains a blog where he posts a lot of good tutorials that range from the basics of <a href=\"https:\/\/www.audero.it\/blog\/tag\/javascript\/\">JavaScript<\/a> to advanced topics. In case you have a good understanding of the language and you want to take your knowledge to the next level, I suggest buying <a href=\"https:\/\/www.manning.com\/books\/secrets-of-the-javascript-ninja\"><cite>The secrets of the JavaScript ninja<\/cite><\/a> by John Resig (the creator of <a href=\"https:\/\/jquery.com\/\" target=\"_blank\" rel=\"noopener\">jQuery<\/a>) and Bear Bibeault.<\/p>\n<h2>jQuery<\/h2>\n<p>While I&#8217;m talking about jQuery, I can&#8217;t help but suggest my upcoming book <a href=\"https:\/\/www.manning.com\/books\/jquery-in-action-third-edition\" target=\"_blank\" rel=\"noopener\"><cite>jQuery in action, third edition<\/cite><\/a>. The book starts from the very basic concepts of jQuery and then covers every aspect of the library. Once you&#8217;ve read it all, you&#8217;ll be able to assert with confidence that you know and can use jQuery as a professional.<\/p>\n<h2>Conclusion<\/h2>\n<p>Being a front-end developer involves the use of technologies, libraries, frameworks, and tools that I haven&#8217;t mentioned in this article. However, for someone who wants to start the career in this field or a beginner, the cited resources should be enough to have a good grasp of these languages. I really hope this article will help you in your path. Keep learning!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Few weeks ago I received an email from a developer asking me for suggestions on how to delve into the front-end world. After having replied to this email, I thought that it&#8217;d have been nice to share the same suggestions on my blog. That&#8217;s exactly what you&#8217;ll find in this post.<\/p>\n","protected":false},"author":1,"featured_media":359,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[48,49,46,11],"class_list":["post-329","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-discussions-opinions","tag-css","tag-html","tag-javascript","tag-web"],"jetpack_featured_media_url":"https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/html-css-javascript.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9Or4e-5j","jetpack-related-posts":[{"id":397,"url":"https:\/\/www.audero.it\/blog\/2015\/06\/16\/trick-of-the-day-the-time-element\/","url_meta":{"origin":329,"position":0},"title":"Trick of the day: The time element","author":"Aurelio De Rosa","date":"June 16, 2015","format":false,"excerpt":"HTML5 introduced several new elements to address many common use cases that developers have faced over the years. As an example you can think to the new audio and video elements that allow you to avoid the use of third-party software like Flash and Silverlight to play audios and videos.\u2026","rel":"","context":"In &quot;Trick of the day&quot;","block_context":{"text":"Trick of the day","link":"https:\/\/www.audero.it\/blog\/category\/trick-of-the-day\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":339,"url":"https:\/\/www.audero.it\/blog\/2014\/10\/18\/state-web-notifications-api\/","url_meta":{"origin":329,"position":1},"title":"The State of the Web Notifications API","author":"Aurelio De Rosa","date":"October 18, 2014","format":false,"excerpt":"Today I was reviewing my HTML5 API demos repository to keep its information updated and relevant. In the last two weeks Google has released\u00a0Chrome 38, Opera has released Opera 25, and Mozilla has released Firefox 33.\u00a0Every time a new version of a browser is available, it may\u00a0introduce support for new\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/"},"img":{"alt_text":"push notifications","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/10\/push-notifications.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/10\/push-notifications.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/10\/push-notifications.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":305,"url":"https:\/\/www.audero.it\/blog\/2014\/07\/15\/my-experience-at-4developers-2014\/","url_meta":{"origin":329,"position":2},"title":"My Experience at 4Developers 2014","author":"Aurelio De Rosa","date":"July 15, 2014","format":false,"excerpt":"In March I announced via Twitter my participation as a speaker at 4Developers 2014. 4Developers\u00a02014 was a single-day, multi-track and multi-language conference held in the lovely Warsaw on the 7th of April\u00a02014\u00a0at the\u00a0Gromada Airport Hotel. The tracks for the edition of this year were: Java, .Net, PHP, Python, Front-end (HTML5,\u2026","rel":"","context":"In &quot;Discussions &amp; Opinions&quot;","block_context":{"text":"Discussions &amp; Opinions","link":"https:\/\/www.audero.it\/blog\/category\/discussions-opinions\/"},"img":{"alt_text":"Logo panel 4developers 2014","src":"https:\/\/i0.wp.com\/aurelio.audero.it\/blog\/wp-content\/uploads\/2014\/07\/logo-panel-4developers-2014-225x300.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":360,"url":"https:\/\/www.audero.it\/blog\/2015\/05\/27\/job-offers-errors-and-how-to-avoid-them\/","url_meta":{"origin":329,"position":3},"title":"Job Offers Errors and How to Avoid Them","author":"Aurelio De Rosa","date":"May 27, 2015","format":false,"excerpt":"As we all know, IT is a growing field and it's easy to find a job (at least compared to other fields). We're overwhelmed by job offers and recruiters emails sent to find the right person for their clients. Unfortunately, many of these offers are written by people without any\u2026","rel":"","context":"In &quot;Discussions &amp; Opinions&quot;","block_context":{"text":"Discussions &amp; Opinions","link":"https:\/\/www.audero.it\/blog\/category\/discussions-opinions\/"},"img":{"alt_text":"job offer","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/05\/job-offer.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/05\/job-offer.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/05\/job-offer.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/05\/job-offer.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/05\/job-offer.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":524,"url":"https:\/\/www.audero.it\/blog\/2018\/05\/16\/event-delegation-in-javascript\/","url_meta":{"origin":329,"position":4},"title":"Event delegation in JavaScript","author":"Aurelio De Rosa","date":"May 16, 2018","format":false,"excerpt":"One of the most common tasks a web developer deals with is to add event listeners to the elements of a page. Event listeners are employed to perform one or more actions when a given event occurs on one or more elements. For example, by using an event listener we\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/08\/event-delegation.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/08\/event-delegation.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/08\/event-delegation.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/08\/event-delegation.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":140,"url":"https:\/\/www.audero.it\/blog\/2013\/09\/03\/instant-jquery-selectors-my-first-book-is-out\/","url_meta":{"origin":329,"position":5},"title":"Instant jQuery Selectors: My first book is out!","author":"Aurelio De Rosa","date":"September 3, 2013","format":false,"excerpt":"Today I'm really pleased to announce that few days ago my first book, titled Instant jQuery Selectors, was published by the Packt Publishing. Publishing a book has always been one of my goals since I started my developer career, and now that I realized it I can't explain how I'm\u2026","rel":"","context":"In &quot;News&quot;","block_context":{"text":"News","link":"https:\/\/www.audero.it\/blog\/category\/news\/"},"img":{"alt_text":"Instant jQuery selectors cover","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/10\/instant-jquery-selectors-cover.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/329","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/comments?post=329"}],"version-history":[{"count":22,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/329\/revisions"}],"predecessor-version":[{"id":972,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/329\/revisions\/972"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/media\/359"}],"wp:attachment":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/media?parent=329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/categories?post=329"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/tags?post=329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}