Front - end Developer

in this course, you’ll get a taste of some common production environments and tools that you will likely come across in a front end developer role.

You will be building a web tool that allows users to run Natural Language Processing (NLP) on articles or blogs found on other websites.

 Apply now

Overview

The goal of the Front End Web Developer Nanodegree program is to equip learners with the unique skills they need to build and develop a variety of websites and applications. A graduate of this Nanodegree program will be able to:

  • Design and create responsive and user-friendly web interfaces using HTML, CSS, and JavaScript.
  • Implement best practices for web development, including accessibility and performance optimization.
  • Utilize popular front-end frameworks and libraries, such as React and Angular, to build dynamic and interactive web applications.
  • Collaborate with back-end developers and designers to integrate front-end components into a cohesive and functional web application.

Course 1: CSS & Website Layout

For your first project, you’ll create a multi-page blog website, using best practices for content and page styling with HTML and CSS. You’ll practice using responsive layouts, Flexbox, and CSS Grid to create the structure and design for your own blog.

Course Project: Styled Blog Website

In this project you will code a fixed-wing aircraft, and then implement solutions to a significantly more challenging control problem.

LESSON ONE

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

LESSON TWO

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

LESSON THREE

Introducing Flexbox:

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

LESSON FOUR

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

Course 2: JavaScript and the DOM

Use JavaScript to control a webpage. Learn what the Document Object Model (DOM) is, and use JavaScript and the DOM to dictate page content and interactions. Gain experience working with Browser Events and managing website performance by controlling content creation efficiently.

Course Project: Dynamic Landing Page for Marketing Content

  • In this project, you will build a multi-section landing page.
  • Often times, you won’t know how much content will be added to a page through a Content Management System (CSM) or an API.
  • To handle this problem, you will dynamically add content to a web page.
  • You’ll be building a landing page that combines your skills with JavaScript, HTML, and CSS to update and control the page and create a dynamic user experience.

LESSON ONE

Syntax:

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

LESSON TWO

The Document Object Model:

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

LESSON THREE

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

LESSON FOUR

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

Course 3: Web APIs and Asynchronous Applications

Course Project: Weather Journal

  • In this project, you will build a multi-section landing page.
  • Often times, you won’t know how much content will be added to a page through a Content Management System (CSM) or an API.
  • To handle this problem, you will dynamically add content to a web page.
  • You’ll be building a landing page that combines your skills with JavaScript, HTML, and CSS to update and control the page and create a dynamic user experience.

LESSON ONE

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

LESSON TWO

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

LESSON THREE

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

Course 4: Build Tools, Webpack, and Service Worker

Develop an understanding of how to use build tools, such as Webpack, for automating build tasks. Create CSS variables with Sass and configure Webpack to use Sass controlled stylesheets. Learn how to cache server data and website functionality using Service Worker.

Course Project: Front End Web Developer Nanodegree Program Capstone

  • In the final project, you’ll combine all of the skills you’ve developed throughout the Nanodegree program to build an online travel app.
  • You’ll work with data sources from multiple APIs to create a dynamic travel weather planning application that helps people plan trips by generating weather forecasts for the places they’re visiting.
  • You’ll pull together all of the JavaScript, HTML, CSS, and build tool skills and knowledge you’ve gained to create this application.
  • The design is up to you, and you’ll have the flexibility to include and combine other APIs (even your own!) to build this final project.

LESSON ONE

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

LESSON TWO

Basics of Webpack:

  • Install Webpack to a computer
  • Configure webpack for automating build tasks
  • Define an entry point for a webpack bundle

LESSON THREE

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

LESSON FOUR

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

Contact Us

Get all your remaining questions answered             

12pm - 7pm

Phone

+13094397936

email

info@magiccrss.com

Address

100 Valley Hill Rd Apt C8, Riverdale, 30274

Do you have any questions?

Name
Email*
Message
0 of 405
Submit