WIXLIB

Ultimate Skills Checklistfor Your First Front-EndDeveloper Jobwww.udacity.comUltimate Skills Checklist for Your First Front-End Developer Job 1

WelcomeWelcome to your ultimate skills checklist for getting your first job asa front-end web developer! You’re embarking on a road to an excitingcareer, filled with opportunities to improve the lives of others andexpand your own creative capabilities.Having choices is always a good thing. But sometimes it’s helpful tohave a guide, so we’re here to help you cut the noise.We recently launched our Front-End Web Developer Nanodegree,which guides students along a project-based curriculum to learn theskills they need to get their first job in web development. We learneda TON from talking to employers to make sure our skills list is cuttingedge, and we can’t wait to pass this skills list on to you.In this guide, you’ll find the ultimate skills checklist for getting a jobas a front-end web developer, as well as resources where you canget started.Congratulations on taking a step towards advancing your webdevelopment career! Read on for the ultimate front-end webdevelopment skills checklist and recommended resources.www.udacity.comUltimate Skills Checklist for Your First Front-End Developer Job 2

Front-End Web Developer SkillsChecklist: What We’ll CoverHere’s a breakdown of the skills you need to learn to be a data analyst. Take sometime to review this list - how many boxes can you check off?For more detail on these skills and for learning resources, navigate to thecorresponding pages listed.HTML04CSS05JavaScript06Responsive Web Design07CSS Frameworks08JavaScript Frameworks09Version Control 10Web Performance 11Browser Development ToolsBuilding and Automation Tools 13Testing14Soft Skills1512Learning Resources 16Front End Web Developer NanodegreeIndividual CoursesWeb development resources and communitieswww.udacity.comUltimate Skills Checklist for Your First Front-End Developer Job 3

HTMLHTML is the first of the big three languages you need to learn to make websites—HTML, CSS and JavaScript. HTML isn’t a programming language per se. It describeshow elements on a website should be laid out and provides browsers with a list ofall the other files, like CSS and JavaScript, that websites need. You can think of HTMLlike the blueprint of a house. It tells you how big the rooms are and what should beinside them. But it doesn’t tell you how they should look.Semantic elements: A semantic element clearly describes its meaning to thebrowser and the developer; elements like article and section, rather than usingdiv everywhereBlock-level elements: A block-level element occupies the entire space of itsparent elementInline elements: An inline element occupies only the space bounded by thetags that define the inline elementForms: A form represents a document section that contains interactive controlsto submit information to a web serverInput Types: An input element is used to create interactive controls for webbased forms in order to accept data from the userwww.udacity.comUltimate Skills Checklist for Your First Front-End Developer Job 4

CSSIf HTML describes the layout of a house, CSS describes the look of a house. CSS, orCascading Style Sheets, is responsible for the way a website looks. Colors, fonts, andeven some animations are all controlled by CSS. Like HTML, CSS isn’t a programminglanguage. It’s a text document that reads like an interior designer’s instructions formaking a website look great.Display Value Types: The display attribute lets you control the rendering ofgraphical or container elementsThe Box Model: The box model defines the size of the rectangular boxrepresenting an element in a documentBasic Positioning: The position property chooses alternative rules forpositioning elementsStatic: Static positioning lets the element use the normal behaviorAbsolute: Does not leave space for the element, instead position is at aspecific position relative to its closest ancestor or the containing blockFixed: Does not leave space for the element, instead position is specifiedrelative to the screen’s viewportFlexbox: A layout mode providing for the arrangement of elements on apage so that the elements behave predictably when the page layout mustaccommodate different screen sizes and different display devicesFloat: Specifies that an element should be taken from the normal flow andplaced along the left or right of its containerFont Styling and Web Fonts: Font styling allows the ability to change theappearance of text; web fonts allow for loading web-based font files that areusable by all clientsBackgrounds: Backgrounds allow you to define a color or image to be used asa container’s backgroundPseudo-selectors: Pseudo-selectors allow you to select hypothetical elementsthat exist around elements you have defined within your HTMLAnimations and transitions: Animations and transitions allow you to animateelements or define the transition between two states of an elementwww.udacity.comUltimate Skills Checklist for Your First Front-End Developer Job 5

JavaScriptOf the big three web languages, JavaScript is the only one that’s an actualprogramming language. JavaScript controls interactions on a website. It’s like ahandyman that can tear down walls, build new rooms and redecorate your house.For a simple, static website, you won’t need to use much JavaScript. But for adynamic web app you’ll need an in-depth understanding of the language.Syntax: The general rules defining how a language is typedData types: The different types of variables the language supports (forexample, strings and integers)Functions: A block of code designed to perform a particular taskObject Literals: Everything in JavaScript is an object but writing your ownobject literals can simplify your codeObject-Oriented Programming: JavaScript provides a number of ways toimplement object-oriented programming including functional, prototypal andpseudoclassicalDesign Patterns: A design pattern is a reusable solution to a commonlyoccurring problemAJAX: AJAX provides the ability to asynchronously request data from a webserver without requiring a page reloadjQuery: jQuery is an extremely popular library that makes cross-browser DOMtraversal and manipulation, event handling and AJAX much simplerwww.udacity.comUltimate Skills Checklist for Your First Front-End Developer Job 6

Responsive Web DesignOpen a website and make your browser smaller. Did the page content change itslayout to fit the new screen? That’s responsive design. People expect modernwebsites to look great on their phones, tablets and laptops. By diving intoresponsive design principles, you’ll learn how to make websites that scale andadjust themselves to offer amazing experiences regardless of the device.@media queries: Media queries let the presentation of content be tailored toa specific range of output devices without having to change the content itselfRelative sizing units: CSS provides many other units of measurement thanjust pixels (px), such as em, rem, vw, vh and vminwww.udacity.comUltimate Skills Checklist for Your First Front-End Developer Job 7

CSS FrameworksBootstrap is a good example of a CSS framework. Frameworks make it easy to structureand build websites. They provide custom CSS classes that simplify laying out contentand ensure that your content looks great no matter the device. Frameworks can helpyou follow industry best practices and modern design principles.Bootstrap: Bootstrap is a CSS framework, originally developed at Twitter, thatmakes creating responsive designs much simplerFoundation: Foundation is another CSS framework, developed by Zurb, thatalso makes creating responsive designs easierwww.udacity.comUltimate Skills Checklist for Your First Front-End Developer Job 8

JavaScript Libraries andFrameworksJavaScript libraries and frameworks make it easier to write your web applicationby enforcing various best practices and, often, an organizational pattern for thevarious files you’ll be working with. They also address the majority of cross-browser compatibility issues you may experience and include variousperformance optimizations. Examples are AngularJS, EmberJS and KnockoutJS.AngularJS: features two-way data binding and allows you to extend HTMLvocabulary to create front-end web applicationsEmberJS: removes the need for boilerplate code through the use of strict fileand object naming conventionsKnockoutJS: makes creating data-driven applications easier through itsdeclarative binding systemwww.udacity.comUltimate Skills Checklist for Your First Front-End Developer Job 9

Version ControlWith complex projects, how do you maintain your code? Version control software likeGit helps software developers around the world save and maintain their code, evenas projects grow to hundreds of developers and dozens of subprojects.Git: Git is a distributed version control systemcloneaddcommitpushpullbranchlogGitHub: GitHub is a web-based hosting service for Git repositories that offers anumber of other features to support collaboration between developersforkingpull requestswww.udacity.comUltimate Skills Checklist for Your First Front-End Developer Job 10

Web PerformanceOnce you’ve made your website, how will you ensure it’s fast? By understanding a fewsimple principles of browser rendering, you’ll be able to make sure that you deliver fast,efficient websites to your users.Critical rendering path: The critical rendering path is the process that browsersuse to transform your HTML, CSS and JavaScript into actual pixels that are sentto the user’s screenImage optimization: Image optimization is the process of using proper imagetypes for the content of the image as well as removing the extra metadatawithin an image fileJavaScript minification: JavaScript minification is the process of removingunnecessary characters from your JavaScript files to reduce their filesizewww.udacity.comUltimate Skills Checklist for Your First Front-End Developer Job 11

Browser Developer ToolsIn building your web applications you are destined to experience bugs in your code,performance issues, or quirks in how your pages are rendered by the browser. Theonly way to fix these issues is to understand how the browser is actually interpretingyour code. Browser developer tools provide all the nitty-gritty details and are yourwindow “under the hood” to test, measure and iterate on your code.Element inspecting: The elements panel lets you see everything in one DOMtree and allows inspection and on-the-fly editing of DOM elementsNetwork: The network panel records information about each networkoperation in your applicationTimeline: The timeline panel lets you record and analyze all the activity inyour application as it runsApplication profiling: The profiling panel lets you observe the memory usageof your application as it runsResources: The resources panel lets you inspect resources that are loadedinto your applicationwww.udacity.comUltimate Skills Checklist for Your First Front-End Developer Job 12