FrontEnd Web Development The Big Nerd Ranch Guide 无水印pdf 0分

Front-End Web Development The Big Nerd Ranch Guide 英文无水印pdf pdf使用FoxitReader和PDF-XChangeViewer测试可以打开Front-End Web development: the big nerd ranch guideby chris aquino and Todd gandeeCopyright o 2016 Big Nerd Ranch, LLCAll rights reserved. Printed in the United States of America. This publication is protected by copyright, andpermission must be obtained from the publisher prior to any prohibited reproduction, storage in a retrieval system,or transmission in any form or by any means, electronic, mechanical, photocopying, recording, or likewise Forinformation regarding permissions, contactBig nerd ranch. LLC200 Arizona ave neAtlanta GA 30307(770817-6373http://www.bignerdranch.com/book-comments@bignerdranch.comThe 10-gallon hat with propeller logo is a trademark of Big Nerd Ranch, LLCExclusive worldwide distribution of the english edition of this book bPearson Technology Group800 East 96th StreetIndianapolis, IN 46240 USAhttp://www.informit.comThe authors and publisher have taken care in writing and printing this book but make no expressed or impliedwarranty of any kind and assume no responsibility for errors or omissions. No liability is assumed for incidentalor consequential damages in connection with or arising out of the use of the information or programs containedhereinMany of the designations used by manufacturers and sellers to distinguish their products are claimed astrademarks. Where those designations appear in this book, and the publisher was aware of a trademark claim, thedesignations have been printed with initial capital letters or in all capitalsISBN-100134432576ISBN-13978-0134432571First edition, first printing, July 2016Release d.1.1.1DedicationTo Mom and Dad, for buying us that computer: To Dave and Glenn, forletting your little brother completely hog it. And to angela, for givingme a life away from the screenCATo my mom and dad, thank you for giving me room to find my ownway. To my wife, thank you for loving a nerdTGAcknowledgmentsAs authors, we can take full credit for typing the words and creating the diagrams. (Yay, us! Butthe whole truth is that we would still be staring at a blank page if not for the efforts of an army ofcontributors collaborators and mentorsAaron hillegass, for believing that the two of us could produce a work worthy of the big nerdRanch name. Thank you for your immeasurable faith and supportMatt Mathias, for guiding us through the development of this book, especially during the cruciallast mile. You made sure that time that would have been spent watching cat videos or DowntonAbbey reruns was instead dedicated to writingBrandy porter, for the care and (literal) feeding of the authors on numerous occasions. Youworked your magic behind the curtain, orchestrating a sequence of events that made finishing thiswork possible. Thank youJonathan Martin, our constructor and language maven. Thank you for enthusiastically teachingthe in-progress course materials on which this book is based and offering thoughtful criticismthroughout the many revisionsOur proofreaders, technical reviewers, and guinea pigs: Mike Zornek, Jeremy Sherman, JoshJustice, Jason reece, Garry Smith, Andrew Jones, Stephen Christopher, and Bill Phillips. Thankyou for volunteering as tributeElizabeth Holaday, our infinitely patient and reassuring editor. Thank you for breaking us out ofthe echo chamber, being the voice of reason, and reminding us always of our readersEllie volckhausen who designed our cover.Simone Payment, our proofreader, who kept things consistentChris Loper at Intelligent English. com, who designed and produced the print and ebook versionsof the book his doc book toolchain made life much easier. tooastly, thank you to the countless students who have taken the week-long training. without yourcuriosity and your questions, none of this matters. This work is a reflection of the insight andinspiration you have given us over the span of those many weeks. We hope the otters made the traininga little lighterTable of contentsIntroductionLearning Front-End Web DevelopmentXVPrerequisitesXVHow This book is organizedXVIHow to use this bookChallenges,XV11For the more curiousI Core Browser Programming1. Setting Up Your Development EnvironmentInstalling google chrorInstalling and Configuring AtomAtom plug-ins4Documentation and Reference sourcesCrash Course in the command line··+·····Finding out what directory you are inCdirecteChanging directoriesListing files in a directory13Getting administrator privileges………,13Quitting a program.…………,15Installing Node. js and browser-syncFor the more Curious: Alternatives to atom ..................... 162. Setting Up Your First Project.......17Setting Up OttergramInitial htmL20Linking a stylesheet…22Adding content ..23Adding images…24iewing the Web Page in the Browser26The Chrome Developer ToolsFor the more Curious: css Versions ................................. 31For the more Curious The favicon. icoSilver Challenge: Adding a favicon.ico3. Style33Creating a Styling Baseli34Preparing the html for Styling.36Anatof a style37Your First Styling rule·“··“···38The box model40Style Inheritance.42Making Images Fit the WindowColorAdjustingace betweeRelationship selectors……………55adding a Font5Front-End Web developmentBronze challenge: Color ChangeFor the More Curious: Specificity! When Selectors Collide...................634. Responsive layouts with Flexbox65Expanding the interface66Adding the detail image.67Horizontal layout for thumbnails69Flex box7Creatflex container72Changing the flex-direction.74Grouping elements within a flex item75le flex shorthand propertOrdering, justifying, and aligning flex items78Centering the detail image83Absolute and Relative Positioning865. Adaptive Layouts with Media Queries93Resetting the viewport94Adding a Media Query96Bronze challenge: Portrait100For the More Curious: Common Solutions(and Bugs)with Flexbox Layouts..... 100Gold Challenge: Holy Grail layout…….1006. Handling Events with JavaScript..10lPreparing the anchor Tags for Duty102Your First Script105Overview of the JavaScript for ottergram106Declaring String Variables107Working in the console108Accessing DOM Elementsl10Writing the setDetails Function115Accepting arguments by declaring parametersReturning Values from Functions……120Adding an event listener.123Accessing All the Thumbnails127Iterating Through the Array of Thumbnails.129Silver Challenge: Link hijack132Gold Challenge: Random Otters.....132For the more curious Strict Mode.132For the more curious: closures133For the more curious nodelist and htmlcollections ......................................134For the More Curious: JavaScript Types1367. Visual effects with css137Hiding and Showing the Detail Image138Creating styles to hide the detail140Writing the javascript to hide the detail image142stening for the keypi143g the detaage ag146State Changes with CSS Transitions147Working with the transform property148Adding a css transition··150Front-End Web DevelopmentUSing a timing function153Transition on class change154Triggering transitions with JavaScript155Custom Timing Functions157For the more curious: Rules for Type coercion…………159∏. Modules, Objects, and forms∴…1618 Modules. Objects, and methods.163Modules164The module pattern…165Modifying an object with an IIFE167Setting Up CoffeeRun168Creating the Data Store Module169Adding modules to a namespace170Constructors∴172A constructors prototype173Adding methods to the constructor175Creating the Truck module177Adding orders∴178Reg orders180ugging183lg bugs with the dev tools185Setting the value of this with bind189Initializing coffeeRun on Page load190Creating the Truck instance∴.191Bronze challenge: Truck id for Non- Trekkies..194For the more Curious: Private Module data.194Silver Challenge: Making data Private195For the more Curious: Setting this in forEach's Callback1959. Introduction to Bootstrap………∴.197Adding bootstrap…∴198How Bootstrap works199Creating the Order Form…….…….,200Adding text input fields201Offering choices with radio buttons205Adding a dropdown menu..206Adding a range slider207Adding submit and reset buttons.20810. Processing Forms with JavaScript211Creating the Form Handler Module……212Introduction to jQuery ....213Importing jQr214Configuring instances of formhandler with a selector214Adding the submit handle216Extracting the data217Accepting and callin219Using formhandler220Registering create Order as a submit handler…………22lUI Enh222X