a look at front-end development
DESCRIPTION
TRANSCRIPT
![Page 1: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/1.jpg)
A LOOK ATFRONT-END
DEVELOPMENT
Erin Kirk: Shared Knowledge and Principles
![Page 2: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/2.jpg)
The Basics
Re-evaluate, for a second, everything you know about front-end development and let’s think about the pros and cons of this field of study / job market.
A front-end developer’s job is to shape the experience on the website of each individual’s choice, based on the audience of the particular website, whether it be a business, or a blog.
![Page 3: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/3.jpg)
The Pros of Front-End Dev The ability to be creative and logical at
the same time Tons of opportunity for growth and you
will never stop learning Hot job market in 2014
Now moving onto the cons…
![Page 4: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/4.jpg)
The Cons of Front-End Dev Not enough women in the field as it
stands, to date. Ladies love design, too! Work can be stressful when adhering to
several deadlines at once It is frustrating to have to (still) support
old, outdated browsers. (cough I.E. cough)
![Page 5: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/5.jpg)
Getting All Your Ducks In a Row
HTML CSS Javascript jQuery
![Page 6: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/6.jpg)
Building Blocks
HTMLThe structure of the web page.
Defines elements that make the building block of the web.
![Page 7: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/7.jpg)
Style
CSSThe style of a web pages relies on CSS (cascading style sheets). It, or “they” control how HTML elements are displayed, including color and font.
![Page 8: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/8.jpg)
Java…It Gives You Wings! JavaScript
A programming language that is used in all modern browsers. It is used to make websites dynamic, including animations.
![Page 9: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/9.jpg)
The New Guy…I actually like him. jQuery
A JavaScript library that makes common JavaScript tasks much easier.
![Page 10: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/10.jpg)
Front-End: A breakdown Performance Usability Accessibility Security Internationalization Localization Scalability Mobile platforms Maintainability Browser bugs Debugging Testing Build processes
![Page 11: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/11.jpg)
Conclusion: Not So Simple But, with a change of attitude comes…
- Recognition
- Professionalism
![Page 12: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/12.jpg)
Developers Adjusting All the Time Availability Openness Richness Stability
![Page 13: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/13.jpg)
Understanding the Medium Respect user choice Web layers: semantic, presentation,
behavior Progressive enhancement and energy
![Page 14: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/14.jpg)
Semantic HTML
It must have meaning! For users, machines, and developers
alike Layer richness is important.
![Page 15: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/15.jpg)
Object-oriented CSS
Focus on the left Encapsulate your objects Cascade the look Layer richness also important here.
![Page 16: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/16.jpg)
Unobstructive JavaScript
Separate layer Provide enhanced behavior Mind your manners! Be paranoid. Layer richness, again!
![Page 17: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/17.jpg)
Do the right thing.
Follow standards If impossible, then follow conventions If impossible, then Do what it takes
![Page 18: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/18.jpg)
Important Resources
Sublime Text 2Text editor for cross-platform
coding, mainly used for creating basic .html files.
Adobe DreamweaverWebsite editor (cross-platform) to write and edit code with a split view interface making it extremely
simple to test the waters as you’re coding.
![Page 19: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/19.jpg)
Important Resources, contd. Adobe Photoshop
The grandaddy of all photo editing, file conversion, art, and design
software. Knowing Photoshop just as well as the languages and markup will make your life a lot easier as you will begin to understand design principles, thus not having to pay a UI
designer.
![Page 20: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/20.jpg)
Important Resources, contd. Download the Java SDK from Oracle’s
website Download jQuery from its website (
www.jquery.com) Consult the Google machine and your
loyal colleagues for any other questions, advice, and words of wisdom on Front-End Development.
![Page 21: A Look at Front-End Development](https://reader033.vdocuments.site/reader033/viewer/2022061222/54c18b494a795914188b4580/html5/thumbnails/21.jpg)
In retrospect…
This field / job market is extremely rewarding, having started my own business through software development and sales, and having been lucky enough to not only have experience in this field, but patience with myself, I can say that experiencing something mind-blowing, and all other aspects of it, every day is what I love about this wonderful career.