Here is a link to the video
#What is Front-End Web Development? Front-End Web Development is the creation of everything you see on the web. Every website you go to, all the suff you see is made with Front-End Web Development.
The main technologies being used are HTML (Hyper-Text Markup Language), which creates the content and basic structure of web pages, CSS (cascading style sheets), which creates the styles, animations and transitions of webpages, and Javascript, which is the actual programming language used by the web. Javascript is used fo running scripts, animations, or basically to do anything you really want to do in a browser. Front-End web development is the combination of these three things to make content that is presentable to a user or a client.
#What is the Front-End Web Developer Nanodegree about? The Front-End Web Developer Nanodegree will take students from a basic understanding of the web to an ability to be a Front-End Web Developer. It will introduce those web technologies (HTML, CSS, and Javascript), which, if you've gone through the Intro to Programming Nanodegree, you will already have some understanding and comfort level with before you start. On top of getting comfortable with those technologies, the Front-End Web Developer Nanodegree will also go over how browsers work and how to optimize a webpage for performance, so that it runs quickly for users. The Front-End Web Developer Nanodegree will also dive into common design patterns used on the web to make your work more organized and make it easier to work with larger teams and on larger web projects. Aside from that, it's all about getting started and getting up and running on the web, and getting the ability to make amazing web apps with the tools that are out there.
#Expected Prerequisite Knowledge
###What gaps may need to be filled in from the Intro to Programming Nanodegree?
First, it's probably useful to go over what you will learn in the Intro to Programming Nanodegree:
#####What you learn in the Intro to Programming Nanodegree
#####From Stage 1: In Stage 1 of the Intro to Programming Nanodegree, you will learn the basics of HTML and CSS, as well as how they fit together. You'll get practice with developing your own static web pages, building the foundations with HTML and formatting them with CSS. You'll learn a variety of HTML tags and attributes, as well as how to use them.
You will also learn how to use various tools common in programming, like a text editor (we use Sublime Text).
#####From Stage 2: In stage 2 you will learn the basics of Python, including:
- Strings
- Loops (for and while)
- Variables
- If statements
- Types (like int, str, and bool)
- Lists
- Tuples
- Mutability
- Functions
- Return statements
- Print statements
- Debugging Python code
- Problem Solving
This will set you up to be able to build your own programs!
#####From Stage 3: In stage 3, you will continue learning Python, this time getting into its object oriented side. Here you will learn about:
- Classes
- Objects
- Methods
- Instances
- Instance variables
- Inheritance
- Method Overriding
- Import Statements
- The Python Standard Library
- Importing External Libraries
- Using documentation
#####From Stage 4: In stage 4 of the Intro to Programming Nanodegree, you will build the backend of a website using Python and Google App Engine. You'll learn:
- How to install, run, and deploy with Google App Engine
- How to use the .yaml file with GAE (Google App Engine)
- How to navigate folders appropriately when referencing different files with GAE
- Google Datastore
- How to use the webapp2 framework
- How to use jinja2 templates
- How to use Python dictionaries
- How to use the modulus operator in Python
#####From Stage 5: Stage 5 in the Intro to Programming Nanodegree will provide awareness of a variety of things instead of providing a higher level of competency. Some of the concepts in computing you will develop awareness about will be:
- Using JavaScript to bring web pages to life.
- Using APIs to easily access powerful data.
- Recursion
- Parallel computing
- How to solve large and long problems.
- Responsive Web Design: How to make web pages look good.
Now we can move into what a student will need to know before taking the Front-End Web Developer Nanodegree.
####What a student needs to know before taking the Front-End Web Developer Nanodegree:
- You'll need a good basic idea of how to use a computer
- How to create files
- How to use a text editor (not like Microsoft Office, but rather like Text-Edit on Mac or Notepad on Windows, or preferably Sublime Text or Atom)
- A basic understanding of how to code
- Knowledge of web terminology; what is a url, a browser, etc.
####Going into the Front-End Web Developer Nanodegree from the Intro to Programming Nanodegree Since you already learn some HTML and CSS, as well as a touch on a little bit of Javascript and Responsive Web design, you will be well set up to join the Front-End Web Developer Nanodegree without any further preparation. Because of the afore mentioned experience in the Intro to Programming Nanodegree, you'll be set up for success with the Front-End Web Developer Nanodegree with the skill set you already have coming out of the Intro to Programming Nanodegree. You'll probably even think the first one or two projects are easy, since some of it will be review; after that, it will ramp up to become more difficult. Beyond what you've learned, there isn't much you need to brush up on; you'll be prepared to enter the Nanodegree right out of the gate.
####What to learn after IPND but before taking the Front-End Web Developer Nanodegree Nothing! You should be ready to jump right into FEND after you finish IPND.
#What students will learn in the Front-End Web Developer Nanodegree
##The Front-End Web Developer Nanodegree Structure In the Nanodegree program, you’ll build six portfolio-worthy projects. (7 total projects; the first is very basic). Each project has one or more supporting classes.
###The Front-End Web Developer Nanodegree Projects and Courses:
####How to Use Git and GitHub This course isn't required for the Nanodegree, but it will help you significantly in submitting your projects (and generally is a very useful skill to learn). You’ll host all your projects on GitHub and make regular commits for the Front-End Web Developer Nanodegree. Assuming you haven’t learned version control yet, use our latest course on the topic: How to Use Git and GitHub
####Intro to HTML and CSS You will already have taken most of the first two lessons of this course in Stage 1 of the Intro to Programming Nanodegree! This course will show you some of the tools not only to create a website with HTML and CSS, but also tools to organize and make laying out your website easier. An example here would be Bootstrap, which is a CSS framework.
####Responsive Web Design Fundamentals This course will go very in-depth (far beyond what you touch in stage 5); you'll learn the ins and outs of things like Flexbox and Media Queries.
####Responsive Images This course will help students to get ready to provide images that are optimized and adjusted in size. One thing that is really important on a web page is making sure that you send as little data across a network as possible, so its very important to make sure you are giving users images that are properly sized so that they load quickly.
####Project: Build a Portfolio Site
This is your first real project; you'll build a portfolio site. You can use this to show off your projects, identity, and your work.
You will replicate a design mockup in HTML and CSS. You will develop a responsive website that will display images, descriptions and links to each of the portfolio projects you will complete throughout the course of the Front-End Web Developer Nanodegree.
Prepare for this project with: Intro to HTML and CSS, Responsive Web Design Fundamentals, and Responsive Images
####JavaScript Basics You will already have taken the first lesson of this course in stage 5 of the Intro to Programming Nanodegree!
####Intro to jQuery Here you will learn all about jQuery, a very powerful extension of Javascript.
####Project: Interactive Resume
Your second project; you will be able to present yourself to a prospective employer. You'll learn Javascript and JQuery to prepare for this. It should be a smooth transition for someone in the Intro to Programming Nanodegree, as you will have seen Javascript and will have experience with another programming language already in Python. JQuery is something new; it's a very powerful extension of Javascript. Some programmers use it for everything for web development without even ever learning basic Javascript, and get along just fine without knowing the nitty gritty details about Javascript.
You will develop an interactive resume application that reads your resume content from a JSON file and dynamically displays that content within a provided template. You will use objects, functions, conditionals, and control structures to compose the content that will display on the resume.
Prepare for this project with: JavaScript Basics and Intro to jQuery
####Object Oriented Javascript Object Oriented Javascript is quite a bit different than most object oriented languages, since technically Javascript is a prototype language and not necessarily an object based language. You'll learn the differences between those here, as well as how to use Javascript in this manner.
####HTML5 Canvas This is a new tag in the world of web development. A lot of people use the canvas to draw patterns or designs on webpages; here, we'll use it to make a game on a webpage.
####Project: Classic Arcade Game Clone
You will be provided with visual assets and a game loop engine; using these tools you must add a number of entities to the game including the player characters and enemies to recreate the classic arcade game Frogger.
If you've never played Frogger, it is a game where you, as a frog, try to cross a space (usually a busy street) without being hit by a passing enemy / car.
Prepare for this project with: Object-Oriented JavaScript and HTML5 Canvas
####Website Performance Optimization In this course, we teach you how to improve your website, how to optimize your code in such a way that the browser renders very quickly, hopefully hitting 60 frames per second.
####Browser Performance Optimization
####Project: Website Optimization
This is something most programs ignore, but is crucial for web development. You'll be handed a completed website that is very slow. Most of you have gone to a website where you are sitting there, scrolling through the page and waiting for something to load as the website chugs along.
This is one of the most important projects you'll do. Especially considering how large and bloated webpages are getting, it's important to make sure you render webpages as fast as possible.
You learn about development tools and how to measure your webpages.
You will optimize a provided website with a number of optimization- and performance-related issues so that it achieves a target PageSpeed score and runs at 60 frames per second.
Prepare for this project with: Website Performance Optimization
####Intro to AJAX Go in-depth with AJAX calls and making calls to APIs.
####JavaScript Design Patterns
####Project: Neighborhood Map
This is a project where you'll get a chance to get creative. You develop a map of your neighborhood using the Google Maps API and using a Javascript framework and following a Model View Controller Pattern.
You will develop a single-page application featuring a map of your neighborhood or a neighborhood you would like to visit. You will then add additional functionality to this application, including: map markers to identify popular locations or places you’d like to visit, a search function to easily discover these locations, and a list view to support simple browsing of all locations. You will then research and implement third-party APIs that provide additional information about each of these locations (such as StreetView images, Wikipedia articles, Yelp reviews, etc).
Prepare for this project with: Intro to AJAX and JavaScript Design Patterns
####JavaScript Testing You'll learn Javascript testing; how to write unit tests, how to add code without breaking previous functionality, etc.
If an application has some part has some basic functionality, like a login form, a unit test would be a test written to make sure that small bit of functionality always works.
####Project: Feed Reader Testing
In this project you are given a web-based application that reads RSS feeds. The original developer of this application clearly saw the value in testing, they've already included Jasmine and even started writing their first test suite! Unfortunately, they decided to move on to start their own company and we're now left with an application with an incomplete test suite. That's where you come in.
Prepare for this project with: JavaScript Testing
####Curriculum Length Someone who really dives into it (and doesn't do much else) could probably normally finish in about 4 months; we recommend 6 to 9 months of 10 to 20 hours a week.
#What kind of career does the Front-End Web Developer Nanodegree prepare you for?
It will prepare you for quite a few different fields, depending on what you have previous experience in. If you are someone that is design oriented, and can make your own art, and you have a creative mind, you can be a designer for a web-development team or be a free lancer who creates designs for clients, whether local businesses, or for blogs, etc.
Another avenue would be industry, where you step into a role as a web-designer on a web development team. You work with a handful of people, working on the layout of a website. You work on the content presented to a user. If you think of companies that have websites, every one of those has some sort of front-end web developer or web engineer working on those websites.
A third direction you can go is working with the tooling side of things, where you work on Open Source projects, like JQuery or Codepen, working on things by web developers for web developers. It's a harder track to get into, since you are working with really strong people in that field, but it's a fun one to get into, as you'll be on the bleeding edge of front-end web development.
Those are the three main ways to go, but with that said, it's the web; anything is possible, opportunities can be endless.
###Front-End Web Developer Nanodegree as preparation for the Full-Stack Web Developer Nanodegree Most Front-End engineers know at least a little back-end, and the reverse would hold true as well, as you need to work together to accomplish your goals. The Front-End Web Developer Nanodegree will prepare you well in learning the Front-End half of Full-Stack development, so you'll be very well prepared to jump in to the Full-Stack Web Developer Nanodegree. Our Full-Stack offering is also much heavier on the back end of a being a full stack engineer than it is on the front end, so you will really be prepared to get into the field as a full-stack web developer after you complete both. You will go much deeper into the front-end in the Front-End Web Developer Nanodegree than the Full-Stack Web Developer Nanodegree assumes your knowledge base will be before entering it, as you will going into things like performance optimization and Object Oriented Javascript, which won't be touched on or assumed as pre-requisite knowledge at all in the Full-Stack Web Developer Nanodegree.
###Technical vs. Creative It is sometimes assumed that back-end web development is the technical side of things, while front-end web development is instead creative. While front-end web development does have a place for visual designers and artists, it also has a technical side. JavaScript programming and any website optimization is quite technical, and lends itself well to those who are technically competent, even if they aren't very visually creative.
###Front End as preparation for the Data Analysts Nanodegree While Front-End Web Development and Data Analysis are quite different fields, some things you learn in the Front-End Web Development Nanodegree will be useful for taking the Data Analysts Nanodegree. Much of what a Data Analysts does is wrangle data (i.e. data munging), as you first have to collect and clean data before you can analyze it. Data wrangling often times requires knowledge of HTML structure and how to usefully apply APIs. More proficiency with those things will make learning data wrangling easier.
###Using user-readiness assessments from other Nanodegrees to check to see if you are ready jump in Most Nanodegrees have a readiness assessment that you can take to see if you know what is expected of you for prerequisite knowledge. If you are interested in a Nanodegree, but don't know if you are ready for it, it is usually a good idea to take the readiness assessment to see not only if you are ready, but, if you aren't, what gaps you need to fill in before starting.
#How to apply coding skills from IPND into FEND HTML and CSS will apply directly; you will use both extensively in FEND. While you won't be using Python, there are a large number of commonalities between any programming languages, so although you'll need to learn a new syntax, you'll still be able to transfer most of the skills you learned to Javascript. The first language you learn is always the hardest!
Javascript, like Python, will demand comfort with abstraction, procedural thinking, and being able to develop an algorithm. Loops, lists / arrays, variables, if statements, etc. are all common between programming languages, and although syntax may differ, concepts will be similar. Learning Python will help with learning any other language, whether it's Javascript, Ruby, Java, or C++.