Select Page

Udacity Front-End Nanodegree Projects

Udacity Front-End Nanodegree Projects

In November 2017, I entered a competition to earn a scholarship to Udacity’s Front-End Developer Nanodegree programme.

The scholarships were funded by Google, and there were more than 100,000 applicants. Of the 30,000 selected to take part in the Scholarship Challenge, only 2,000 were selected for the full Nanodegree. I was one of the 2,000 selected for the full Nanodegree, which I completed in August 2018.

This page details some of the projects I completed during the Nanodegree, while the projects I completed as part of the React.JS module of the course are detailed here.

Project 1 – Animal trading card

The first project in the Nanodegree was to build an animal trading card using HTML and CSS.

As I already had plenty of experience with HTML and CSS, this wasn’t particularly difficult for me at this stage of my web education.

Here is a link to the project on Codepen

In November 2017, I entered a competition to earn a scholarship to Udacity’s Front-End Developer Nanodegree programme.

The scholarships were funded by Google, and there were more than 100,000 applicants. Of the 30,000 selected to take part in the Scholarship Challenge, only 2,000 were selected for the full Nanodegree. I was one of the 2,000 selected for the full Nanodegree, which I completed in August 2018.

This page details some of the projects I completed during the Nanodegree, while the projects I completed as part of the React.JS module of the course are detailed here.

Project 1 – Animal trading card

The first project in the Nanodegree was to build an animal trading card using HTML and CSS.

As I already had plenty of experience with HTML and CSS, this wasn’t particularly difficult for me at this stage of my web education.

Here is a link to the project on Codepen

Project 2 – Build a portfolio site

Project two pushed our HTML and CSS skills a little further, with the objective of the second project to build a portfolio site.

Please forgive the lack of inspiration and the similarity in design to this portfolio site you are reading this on right now. The objective was to demonstrate CSS and HTML knowledge, not design skills. I wanted to progress to the Javascript section as quickly as possible.

You can find a link to the full site here with the code available in the Github repo here.

Project 2 – Build a portfolio site

Project two pushed our HTML and CSS skills a little further, with the objective of the second project to build a portfolio site.

Please forgive the lack of inspiration and the similarity in design to this portfolio site you are reading this on right now. The objective was to demonstrate CSS and HTML knowledge, not design skills. I wanted to progress to the Javascript section as quickly as possible.

You can find a link to the full site here with the code available in the Github repo here.

Project 2.5 – Pixel Art Maker

This wasn’t actually an assessed project in the full Nanodegree. It was the final project in the Challenge Scholarship, with the challenge to complete the project using jQuery and Javascript.

In the full Nanodegree, this project was suggested as way to refine DOM Manipulation skills using vanilla Javascript. So I actually completed this project twice, once with jQuery and once without JQuery.

Project 2.5 – Pixel Art Maker

This wasn’t actually an assessed project in the full Nanodegree. It was the final project in the Challenge Scholarship, with the challenge to complete the project using jQuery and Javascript.

In the full Nanodegree, this project was suggested as way to refine DOM Manipulation skills using vanilla Javascript. So I actually completed this project twice, once with jQuery and once without JQuery.

Project 3 – Matching Game

Many students, and student leaders, suggested that this was the most difficult project in the Nanodegree.

This was our first Javascript challenge. The styles and HTML were provided for us. We had to make this game work. It was mostly a test of our DOM Manipulation skills, but there were also plenty of functions needed to make the core game logic work, along with additional tasks like creating the clock and implementing the star rating.

My implementation works by listening to clicks on the cards and then updating the class of the clicked card, based on whether it matches another open card, which is stored in an array. There can only ever be one card open, so the array will only ever be empty, or contain one item. If the cards match, they are moved to an array of matching cards and the classes of both cards are updated to stay open. If they don’t match, the open card in the array is removed from the array, and the classes of both cards change to hide the cards again.

You can see a live version of this game on Codepen.

Project 3 – Matching Game

Many students, and student leaders, suggested that this was the most difficult project in the Nanodegree.

This was our first Javascript challenge. The styles and HTML were provided for us. We had to make this game work. It was mostly a test of our DOM Manipulation skills, but there were also plenty of functions needed to make the core game logic work, along with additional tasks like creating the clock and implementing the star rating.

My implementation works by listening to clicks on the cards and then updating the class of the clicked card, based on whether it matches another open card, which is stored in an array. There can only ever be one card open, so the array will only ever be empty, or contain one item. If the cards match, they are moved to an array of matching cards and the classes of both cards are updated to stay open. If they don’t match, the open card in the array is removed from the array, and the classes of both cards change to hide the cards again.

You can see a live version of this game on Codepen.

Project 4 – Classic Arcade Game

This project was designed to test our Object Orientated Javascript skills. Each of the sprites generated on the screen had to be created as objects. The game engine and visual assets were provided for us: our task was to make the sprites appear, and move at varying speeds across the screen. We also had to generate the player, allow the user to control him, implement collision logic and indicate success when the player made it to the water.

You can see the finished game here, with the code available at the GitHub repo.

Project 4 – Classic Arcade Game

This project was designed to test our Object Orientated Javascript skills. Each of the sprites generated on the screen had to be created as objects. The game engine and visual assets were provided for us: our task was to make the sprites appear, and move at varying speeds across the screen. We also had to generate the player, allow the user to control him, implement collision logic and indicate success when the player made it to the water.

You can see the finished game here, with the code available at the GitHub repo.

Project 5 – Jasmine testing

The objective of this project was to take an application built by Udacity and run tests on the application using the Jasmine testing framework. The application generated a feed of articles, and we were asked to write tests that ensured that the articles were being generated, the menu functionality worked and that the content was updating as expected.

The Github repo for this project can be found here.

Project 5 – Jasmine testing

The objective of this project was to take an application built by Udacity and run tests on the application using the Jasmine testing framework. The application generated a feed of articles, and we were asked to write tests that ensured that the articles were being generated, the menu functionality worked and that the content was updating as expected.

The Github repo for this project can be found here.

Project 6 – Restaurant Reviews

This project was designed to test many things we had covered in the Nanodegree. The primary focus of the task was to take a completed web application and make it responsive. We also had to make the project accessible to visitors with impaired vision, and implement a service worker.

The image on the right is my finished responsive design. You can find details of the changes I made to make it responsive in the GitHub repo, along with the accessibility elements and service worker.

 

 

For the newest participants in the Nanodegree programme, this would be the final project in the course.

Fortunately, Udacity included a module on React.js for the Scholarship Nanodegree participants. You can see my projects completed with React, here.

Project 6 – Restaurant Reviews

This project was designed to test many things we had covered in the Nanodegree. The primary focus of the task was to take a completed web application and make it responsive. We also had to make the project accessible to visitors with impaired vision, and implement a service worker.

The image on the right is my finished responsive design. You can find details of the changes I made to make it responsive in the GitHub repo, along with the accessibility elements and service worker.

For the newest participants in the Nanodegree programme, this would be the final project in the course.

Fortunately, Udacity included a module on React.js for the Scholarship Nanodegree participants. You can see my projects completed with React, here.