SlideShare une entreprise Scribd logo
1  sur  17
Télécharger pour lire hors ligne
Life as a Front-End Developer - Kerri-Anne Ellis
– My background
– The Course
– The Industry



– What is a Front End Developer?
– What does my working day look like?
– What is the Industry talking about and what are they interested in?
    •   Facebook
    •   Mobile – Development for devices
    •   Responsive Web Design
    •   HTML5 and CSS3
    •   Jquery


– Ask me anything!
My Background
The Course
The Industry




               www.kerrianneellis.co.uk
Life as a Front-End Developer - Kerri-Anne Ellis
What is a front-end developer?
    Important to note:

    Not cut and dry – a lot of cross over

    Still being defined by the industry

    But generally Speaking:

    Use HTML and CSS along with Javascript to create semantically sound and
    accessible web pages.

    The parts of the website you see including animations, content , imagery -
    Front-end developers make living applications from Photoshop images.

    Is the bridge between design and code.

    Back-End is more to do with databases and information storing using
    technologies such as PHP and they also create content and maintain CMS’.
    .
    Not many women in the industry – this is changing!
What does my working day look like?   Client Meetings and Feedback


   My Tools




                                        Keeping up to date
What is the industry talking about?




          http://www.digitalbuzzblog.com/facebook-statistics-stats-facts-2011/
What is the industry talking about?




                                Yeo Valley Facebook Tab
What is the industry talking about?
What is the industry talking about?




    Mobile sites to note:

    Specsavers
    TFL
    IMDB




                                      http://www.bbc.co.uk/news/technology-14731757
What is the industry talking about?

                                            http://cdn1.1stwebdesigner.com/wp-
                                            content/uploads/2011/07/responsive-web-
                                            design-4.jpg




          Media queries!




           http://www.thismanslife.co.uk/projects/lab/responsiveillustration/
What is the industry talking about?




      http://www.zdnet.com/blog/networking/flash-is-dead-long-live-html5/1633




                            http://www.html5tutorial.info/
What is the industry talking about?




                              http://www.modernizr.com/
What is the industry talking about?




                              http://www.jquery.com

                      Recommended read  Eloquent Javascript
Ask me anything!

Contenu connexe

Dernier

FAHAD HASSAN NOOR || UCP Business School Data Analytics Head Recommended | MB...
FAHAD HASSAN NOOR || UCP Business School Data Analytics Head Recommended | MB...FAHAD HASSAN NOOR || UCP Business School Data Analytics Head Recommended | MB...
FAHAD HASSAN NOOR || UCP Business School Data Analytics Head Recommended | MB...FaHaD .H. NooR
 
kids gpaddfghtggvgghhhuuuuuhhhgggggy.pptx
kids gpaddfghtggvgghhhuuuuuhhhgggggy.pptxkids gpaddfghtggvgghhhuuuuuhhhgggggy.pptx
kids gpaddfghtggvgghhhuuuuuhhhgggggy.pptxJagrutiSononee
 
Nashon Holloway - Media/Press Kit - Priv
Nashon Holloway - Media/Press Kit - PrivNashon Holloway - Media/Press Kit - Priv
Nashon Holloway - Media/Press Kit - PrivNashonHolloway
 
Chapter-4 Introduction to Global Distributions System and Computerized Reserv...
Chapter-4 Introduction to Global Distributions System and Computerized Reserv...Chapter-4 Introduction to Global Distributions System and Computerized Reserv...
Chapter-4 Introduction to Global Distributions System and Computerized Reserv...Md Shaifullar Rabbi
 
Fireman Resume Strikuingly Text............................
Fireman Resume Strikuingly Text............................Fireman Resume Strikuingly Text............................
Fireman Resume Strikuingly Text............................calvinjamesmappala
 
Chapter-1 IATA, UFTAA, ICAO, FAA, CAA, ATAB, Conventions
Chapter-1 IATA, UFTAA, ICAO, FAA, CAA, ATAB, ConventionsChapter-1 IATA, UFTAA, ICAO, FAA, CAA, ATAB, Conventions
Chapter-1 IATA, UFTAA, ICAO, FAA, CAA, ATAB, ConventionsMd Shaifullar Rabbi
 
How to Host a Successful Webinar for Success?
How to Host a Successful Webinar for Success?How to Host a Successful Webinar for Success?
How to Host a Successful Webinar for Success?StrengthsTheatre
 
Moaaz Hassan El-Shayeb - Projects Portfolio
Moaaz Hassan El-Shayeb - Projects PortfolioMoaaz Hassan El-Shayeb - Projects Portfolio
Moaaz Hassan El-Shayeb - Projects Portfoliomoaaz el-shayeb
 
asdfasdiofujasloidfoia nslkflsdkaf jljffs
asdfasdiofujasloidfoia nslkflsdkaf jljffsasdfasdiofujasloidfoia nslkflsdkaf jljffs
asdfasdiofujasloidfoia nslkflsdkaf jljffsJulia Kaye
 
reStartEvents March 28th TS/SCI & Above Employer Directory.pdf
reStartEvents March 28th TS/SCI & Above Employer Directory.pdfreStartEvents March 28th TS/SCI & Above Employer Directory.pdf
reStartEvents March 28th TS/SCI & Above Employer Directory.pdfKen Fuller
 
Blockchain_TezosDeveloperCommunitySNSCE.pdf
Blockchain_TezosDeveloperCommunitySNSCE.pdfBlockchain_TezosDeveloperCommunitySNSCE.pdf
Blockchain_TezosDeveloperCommunitySNSCE.pdfVISHNURAJSSNSCEAD
 
127. Reviewer Certificate in BP International
127. Reviewer Certificate in BP International127. Reviewer Certificate in BP International
127. Reviewer Certificate in BP InternationalManu Mitra
 
STORY OF SUSAN & JUDY - CEREBRAL PALSY.pptx
STORY OF SUSAN & JUDY - CEREBRAL PALSY.pptxSTORY OF SUSAN & JUDY - CEREBRAL PALSY.pptx
STORY OF SUSAN & JUDY - CEREBRAL PALSY.pptxsheenam bansal
 
10 Things That Will Shape the Future of Education.pdf
10 Things That Will Shape the Future of Education.pdf10 Things That Will Shape the Future of Education.pdf
10 Things That Will Shape the Future of Education.pdfEducationView
 
Audhina Nur Afifah Resume & Portofolio_2024.pdf
Audhina Nur Afifah Resume & Portofolio_2024.pdfAudhina Nur Afifah Resume & Portofolio_2024.pdf
Audhina Nur Afifah Resume & Portofolio_2024.pdfaudhinafh1
 
wealth_spend_bharatpeVerse_Analysis .pptx
wealth_spend_bharatpeVerse_Analysis .pptxwealth_spend_bharatpeVerse_Analysis .pptx
wealth_spend_bharatpeVerse_Analysis .pptxAnuragBhakuni4
 
ASDFSDFASDFASDFASDFOUIASHDFOIASUD FOIJSADO;IFJOISADJF
ASDFSDFASDFASDFASDFOUIASHDFOIASUD FOIJSADO;IFJOISADJFASDFSDFASDFASDFASDFOUIASHDFOIASUD FOIJSADO;IFJOISADJF
ASDFSDFASDFASDFASDFOUIASHDFOIASUD FOIJSADO;IFJOISADJFJulia Kaye
 

Dernier (17)

FAHAD HASSAN NOOR || UCP Business School Data Analytics Head Recommended | MB...
FAHAD HASSAN NOOR || UCP Business School Data Analytics Head Recommended | MB...FAHAD HASSAN NOOR || UCP Business School Data Analytics Head Recommended | MB...
FAHAD HASSAN NOOR || UCP Business School Data Analytics Head Recommended | MB...
 
kids gpaddfghtggvgghhhuuuuuhhhgggggy.pptx
kids gpaddfghtggvgghhhuuuuuhhhgggggy.pptxkids gpaddfghtggvgghhhuuuuuhhhgggggy.pptx
kids gpaddfghtggvgghhhuuuuuhhhgggggy.pptx
 
Nashon Holloway - Media/Press Kit - Priv
Nashon Holloway - Media/Press Kit - PrivNashon Holloway - Media/Press Kit - Priv
Nashon Holloway - Media/Press Kit - Priv
 
Chapter-4 Introduction to Global Distributions System and Computerized Reserv...
Chapter-4 Introduction to Global Distributions System and Computerized Reserv...Chapter-4 Introduction to Global Distributions System and Computerized Reserv...
Chapter-4 Introduction to Global Distributions System and Computerized Reserv...
 
Fireman Resume Strikuingly Text............................
Fireman Resume Strikuingly Text............................Fireman Resume Strikuingly Text............................
Fireman Resume Strikuingly Text............................
 
Chapter-1 IATA, UFTAA, ICAO, FAA, CAA, ATAB, Conventions
Chapter-1 IATA, UFTAA, ICAO, FAA, CAA, ATAB, ConventionsChapter-1 IATA, UFTAA, ICAO, FAA, CAA, ATAB, Conventions
Chapter-1 IATA, UFTAA, ICAO, FAA, CAA, ATAB, Conventions
 
How to Host a Successful Webinar for Success?
How to Host a Successful Webinar for Success?How to Host a Successful Webinar for Success?
How to Host a Successful Webinar for Success?
 
Moaaz Hassan El-Shayeb - Projects Portfolio
Moaaz Hassan El-Shayeb - Projects PortfolioMoaaz Hassan El-Shayeb - Projects Portfolio
Moaaz Hassan El-Shayeb - Projects Portfolio
 
asdfasdiofujasloidfoia nslkflsdkaf jljffs
asdfasdiofujasloidfoia nslkflsdkaf jljffsasdfasdiofujasloidfoia nslkflsdkaf jljffs
asdfasdiofujasloidfoia nslkflsdkaf jljffs
 
reStartEvents March 28th TS/SCI & Above Employer Directory.pdf
reStartEvents March 28th TS/SCI & Above Employer Directory.pdfreStartEvents March 28th TS/SCI & Above Employer Directory.pdf
reStartEvents March 28th TS/SCI & Above Employer Directory.pdf
 
Blockchain_TezosDeveloperCommunitySNSCE.pdf
Blockchain_TezosDeveloperCommunitySNSCE.pdfBlockchain_TezosDeveloperCommunitySNSCE.pdf
Blockchain_TezosDeveloperCommunitySNSCE.pdf
 
127. Reviewer Certificate in BP International
127. Reviewer Certificate in BP International127. Reviewer Certificate in BP International
127. Reviewer Certificate in BP International
 
STORY OF SUSAN & JUDY - CEREBRAL PALSY.pptx
STORY OF SUSAN & JUDY - CEREBRAL PALSY.pptxSTORY OF SUSAN & JUDY - CEREBRAL PALSY.pptx
STORY OF SUSAN & JUDY - CEREBRAL PALSY.pptx
 
10 Things That Will Shape the Future of Education.pdf
10 Things That Will Shape the Future of Education.pdf10 Things That Will Shape the Future of Education.pdf
10 Things That Will Shape the Future of Education.pdf
 
Audhina Nur Afifah Resume & Portofolio_2024.pdf
Audhina Nur Afifah Resume & Portofolio_2024.pdfAudhina Nur Afifah Resume & Portofolio_2024.pdf
Audhina Nur Afifah Resume & Portofolio_2024.pdf
 
wealth_spend_bharatpeVerse_Analysis .pptx
wealth_spend_bharatpeVerse_Analysis .pptxwealth_spend_bharatpeVerse_Analysis .pptx
wealth_spend_bharatpeVerse_Analysis .pptx
 
ASDFSDFASDFASDFASDFOUIASHDFOIASUD FOIJSADO;IFJOISADJF
ASDFSDFASDFASDFASDFOUIASHDFOIASUD FOIJSADO;IFJOISADJFASDFSDFASDFASDFASDFOUIASHDFOIASUD FOIJSADO;IFJOISADJF
ASDFSDFASDFASDFASDFOUIASHDFOIASUD FOIJSADO;IFJOISADJF
 

Life as a Front-End Developer - Kerri-Anne Ellis

  • 2. – My background – The Course – The Industry – What is a Front End Developer? – What does my working day look like? – What is the Industry talking about and what are they interested in? • Facebook • Mobile – Development for devices • Responsive Web Design • HTML5 and CSS3 • Jquery – Ask me anything!
  • 5. The Industry www.kerrianneellis.co.uk
  • 7. What is a front-end developer? Important to note: Not cut and dry – a lot of cross over Still being defined by the industry But generally Speaking: Use HTML and CSS along with Javascript to create semantically sound and accessible web pages. The parts of the website you see including animations, content , imagery - Front-end developers make living applications from Photoshop images. Is the bridge between design and code. Back-End is more to do with databases and information storing using technologies such as PHP and they also create content and maintain CMS’. . Not many women in the industry – this is changing!
  • 8. What does my working day look like? Client Meetings and Feedback My Tools Keeping up to date
  • 9. What is the industry talking about? http://www.digitalbuzzblog.com/facebook-statistics-stats-facts-2011/
  • 10. What is the industry talking about? Yeo Valley Facebook Tab
  • 11. What is the industry talking about?
  • 12. What is the industry talking about? Mobile sites to note: Specsavers TFL IMDB http://www.bbc.co.uk/news/technology-14731757
  • 13. What is the industry talking about? http://cdn1.1stwebdesigner.com/wp- content/uploads/2011/07/responsive-web- design-4.jpg Media queries! http://www.thismanslife.co.uk/projects/lab/responsiveillustration/
  • 14. What is the industry talking about? http://www.zdnet.com/blog/networking/flash-is-dead-long-live-html5/1633 http://www.html5tutorial.info/
  • 15. What is the industry talking about? http://www.modernizr.com/
  • 16. What is the industry talking about? http://www.jquery.com Recommended read  Eloquent Javascript

Notes de l'éditeur

  1. So here is my talk. I’ve split it in to two topics. Firstly there are my brief beginnings. This, will hopefully, be helpful to those of you unfamiliar with the digital industry but who want to know how to break in to it. However I also hope there are things in there for everyone whatever your reason for doing this course as hopefully it allows you to see what value the skills you gain from it can help you achieve. The second part focuses on my life as a Front End Developer. Not only what I do but also what the industry is getting excited about and how that effects my working day. And as a brucey bonus we have a Q&A where you can ask me anything you like and hopefully I can answer otherwise its just question session.
  2. So from the beginning. Just like the when I did this Masters class I can imagine you’ve found the people on this course and the reasons for them being here are incredibly varied. In my class some where already working within the digital arena but felt they needed to gain a more technical and indepth understanding in order to progress or improve their career prospects. Some wanted to gain the skills to begin their own online business. But for me my reasons were all about a career change. Since I left University and moved to London I have actually been a PA. A job thats perfectly wonderful but not the job for me. I’ve got the blonde hair and I can type like a dream but I knew in my mind it wasn’t the right fit and I needed to find a calling and a subject that I was passionate about and to make it my career. Unfortunately after 4 years still hadn’t quite found it. Until one day my friend and I bet each other to make a blog – with the inevitable goal of being the next online superstar. After a week my friend ditched his blog having grown bored whereas although I hadn’t make my millions from Google Ads I had found that my Weebly blog had the means of completely editing the code like Myspace. And so, I pulled it apart like people do with car engines or washing machines. I broke everything until I could work out how I fix it and I spent my spare moments doing this. And thats when I knew that the internet was my passion. I wanted to develop skills that gave me a wealth of understanding not just about code but about web design and information architecture. And so I signed up for this MA.
  3. I don't need to sell you the course because you're already on it but I want to tie it in to your next steps in to the industry – in whatever you want to do. As you know the course teaches you core understandings of everything from design principles, to online business models but the real gold is when you get to show off – and that’s in your project work.  (Show project work)For whatever you decide to use the course for this project work is about putting everything you learnt in to practice and you will get out exactly what you put in to it. If you're flair is for e-commerce then concentrate your efforts here let your dissertation scream marketing genius, if its for design and architecture make sure they shine through in these examples and if its for coding – like me – then get excited about semantics and accessibility. All this is because when you walk up to the metaphorical door of the digital industry and you ask to be let in because you can do all this cool stuff the industry will ask one thing of you. 'Show me'.
  4. They want you to showoff, scream it out loud what you can do because you have no excuse not to - you can put it all online – in whatever way is best appropriate – blog discussions whether it be your own or someone elses, forum contributions, essays and articles and most importantly – whatever area of expertise – make a portfolio of your work. When applying for jobs I was told time and again by recruiters that it was a very positive thing to be able to prove everything i’d been saying I could do. I’d basically completed half the interview before I opened my mouth. - Make sure your personality shines through its part of what they are looking for. Digital companies like to feel like families so would you fit in?Now I did all this – I built a personality and a portfolio online – and despite having no idea what to expect from this universe I interviewed at one place and I got the job I got it because I arrived and I was bursting with love and knowledge for the work, and I didn’t even need to tell them – they could see it.So now I get to work here...
  5. This is Pirata London. We are a digital production agency which means we don’t necessarily make traditional websites we make one off campaigns and special digital projects such as Facebook app competitions, online games, interactive infographics to name but a few.
  6. Git Client – Branches out all those who are working on the project in to separate working environments tracking all their changes and keeping a history of their work. It then allows all the branches to merge.This allowes several people to work on a project without clashes but also allows for the collaborative effort to merge before its put live.So when keeping up with all the chatter - what is the industry talking about?
  7. When you want to capture the attention of millions of people there isn’t one tvchannel, one magazine or even another website that has the attention of as many people as this. (Read some stats). For anyone wanting to be online whether its a huge marketing campaign – or a small business – go here because there is no other communal meeting place on earth than this one.
  8. Go beyond the page – tabs, facebook connect, something as simple as a ‘like’ button
  9. APIs or Application programming interface – is a developers bread and butter. In order to use your favourite web application, such as Facebook, You Tube or Google Maps for example you need to read their own API. Its essentially the user manual or the codes and methods needed to connect them to your web project. But Facebook isnt the only thing worth discussing in the digital world – there is also...
  10. This isn’t just about making your website smaller – its about a difference user experience dictated by screen size, operating system, browser choice and even payment plan. For designers and coders alike mobile has opened up a new wealth of possibilities but also a can of worms when it comes to making web pages. Here are some ones I have found on my own journeys that I liked for how they have considered how best to harness their sites focus and redeliver it for mobile. Simply delivering a desktop site for users on mobile is not enough – a whole new experience needs to be considered from a reassessment of information to the idea of a touch screen and the idea of gesturing to navigate through a page. This changes how the page comes to life and how information is navigated – requiring a whole new set of considerations. Mobile isn’t just becoming a big deal – it is a big deal. And this is evident for how much change in the industry has stemmed from it.
  11. Looking at web pages on desktops is sooooo last year...
  12. Mobile – influence is changing the way we write code for the web as we look for more inclusive coding methods. Flash is dead but that doesn’t mean we no longer want video capability, sharp graphics and the experience we could get from it. And that’s where HTML5 and CSS3 come in. Not just a code tidy up but a big revolution. They offer an interaction with the back end code we haven’t seen before but also an animation and graphic experience like never before. One to particularly watch out for is html5 canvas – which coupled with Javascript can bring your code to life without ever having to address what flash left behind and even available on your mobile.Won’t go mad on what it can do - Useful website.But as you may be well aware the power of these are only available in ‘modern browsers’ such as Chrome or the uber recent Firefox so be aware when using these. By all means go mad testing out, put it in the labs section of your portfolio see what it can do and get excited by its future possibilities. But just like you wouldn’t want to make a site that those with disabilities couldn’t access – dont make a site that some poor person who isn’t allowed to update from internet explorer 7 because their office are mean can’t use at all. Luckily help is at hand...
  13. There are tools available to make certain aspects of these codes possible now. Tools like Modernizr have been made to detect the browser shortfall and provide a suitable alternative. Its really allowing designers and coders to push websites but without ignoring those poor soles trapped by Bill Gates in a web of despair. But that doesn’t mean you shouldn’t treat it with care and consideration. Its a means of pushing the web forward, but not forgetting the reality of users now. And to work right alongside this idea of the death of flash but the quest for enriching and fullfilling websites we have something that has been around a while but is really gathering pace and respect within the web community.
  14. Javascript. Because flash will leave behind an animation deficit it seems javascript is ready and waiting to pick up the shortfall. I have included here a screen shot of jqueries UI section which offers