Become a Front End Web Developer

Description

The Front End Web Developer Nanodegree program's goal is to provide learners with the specialised skills required to build and develop a wide range of websites and applications. Graduates of this Nanodegree programme will be able to build responsive websites with CSS, Flexbox, and CSS Grid, interactive websites and UI (User Interface) applications with JavaScript and HTML, and connect a web application to backend server data with JavaScript. Students will also gain proficiency in automating application build and deployment with Webpack and improving website offline performance with Service Worker.

Syllabus:

Course 1: CSS & Website Layout

Introduction to HTML

• Create a programming project with a code editor
• Construct nested websites with HTML tags and elements
• Troubleshoot and debug HTML errors and bugs

Introduction to CSS

• Style website components by ID, class and type
• Connect CSS to a website
• Position and display website elements
• Modify and control website typography
• Troubleshoot and debug issues with stylesheets

Introducing Flexbox

• Control web elements orientation and layout with Flexbox
• Control ordering of web elements with Flexbox
• Align and justify web elements with Flexbox
• Transform and resize web elements with Flexbox

CSS Grid

• Compare and contrast the use cases for CSS Grid and Flexbox
• Structure the layout of a web page using grid columns and rows

Creating Responsive Layouts

• Define custom styles for different screen sizes using media queries.
• Observe and create breakpoints in a website to change layout and styling as a page is resized

Project: Styled Blog Website

In this project, you will code a fixed-wing aircraft before implementing solutions to a much more difficult control problem.

 

Course 2: JavaScript and the DOM

Syntax

• Declare block-scoped variables using let and const
• Format JavaScript strings using template literals
• Manage arrays and objects using JavaScript destructuring syntax
• Iterate over arrays and objects using JavaScript for...of syntax

The Document Object Model

• Describe and explain the Document Object Model for web browsers
• Access page elements by ID, class, and type using JavaScript

Creating Content with JavaScript

• Modify HTML content with JavaScript
• Create HTML content and elements with JavaScript
• Remove HTML content with JavaScript
• Style HTML content with JavaScript and CSS

Working with Browser Events

• Describe and explain the phases of browser events
• Create event listeners that handle browser events by writing code that runs when an event is triggered
• Describe and explain the events that are fired as a web page loads

Performance

• Manage website performance by controlling content creation efficiently.
• Describe what happens when a webpage has to be redrawn
• Describe and explain the JavaScript call stack
• Describe and explain the JavaScript event loop
• Write efficient code by analyzing the call stack and event loop
• Delay code execution with setTimeout

Project: Dynamic Landing Page for Marketing Content

You will create a multi-section landing page for this project. You may not always know how much content will be added to a page via a Content Management System (CSM) or an API. You will handle this issue by dynamically adding content to a web page. You'll be creating a landing page that combines your knowledge of JavaScript, HTML, and CSS to update and control the page, resulting in a dynamic user experience.

 

Course 3: Web APIs and Asynchronous Applications

Node & Express Environment

• Set up a Node and Express environment to develop a web application on your local machine
• Install JavaScript packages using npm (Node Package Manager)
• Setup and run a local development server
• Manage web application file structure and website assets using Express

HTTP Requests & Routes

• Handle requests to an Express with routes
• Describe and explain the differences between GET and POST requests
• Build a web server and use it to serve data and responses to web requests

Asynchronous JavaScript

• Manage asynchronous JavaScript control flow with Promises
• Request data from a server using JavaScript Fetch
• Update and modify website elements dynamically using asynchronously retrieved data

Project: Weather Journal

In this project, you will use your new skills to create a web app that records a weather journal for users by combining data from the OpenWeatherMap API and client side (browser) HTML forms. You must create an asynchronous web app that uses a Web API and user data to dynamically update the UI of a Weather Journal App.

 

Course 4: Build Tools, Webpack, and Service Worker

Intro to Build Tools

• Describe and explain the problems solved by using automated build tools
• Inspect and analyze the activity that occurs when loading a web page in a browser
• Describe and explain what Webpack is and how it can be used

Basics of Webpack

• Install Webpack to a computer
• Configure webpack for automating build tasks
• Define an entry point for a webpack bundle
• Install and configure middleware for building an application
• Extend Webpack functionality by installing plugins

Sass and Webpack

• Describe and explain the benefits and use cases for Sass
• Create CSS variables with Sass
• Extend and nest CSS sheets and classes with Sass
• Configure Webpack to use Sass controlled stylesheets

Final Touches

• Control variable and function scope with JavaScript IIFEs (Immediately Invoked Function Expressions)
• Optimize an application build pipeline with Webpack
• Cache server data and websites functionality using Service Worker

Project: Article Analysis Website

• This project will give you a taste of some common production environments and tools that you will most likely encounter in a front end developer role. You will create a web application that allows users to perform Natural Language Processing (NLP) on articles or blogs found on other websites. You can build a simple web interface to interact with their NLP system using an exciting new API called Aylien. This tool will return relevant information about the article, such as whether the content is subjective (opinion) or objective (fact-based), and whether the tone is positive, neutral, or negative.

You will use the following tools for this project:

• Node
• Express
• Aylien API
• Webpack
• Service Worker

Project: Front End Web Developer Nanodegree Program Capstone

• You'll use all of the skills you've learned throughout the Nanodegree programme to create an online travel app for your final project.
• You'll use data from multiple APIs to build a dynamic travel weather planning app that helps people plan trips by generating weather forecasts for the locations they'll be visiting. 
• You'll use all of your JavaScript, HTML, CSS, and build tool skills and knowledge to create this application. The design is entirely up to you, and you will have the freedom to include and combine other APIs (including your own!) to create this final project.

Show more