eunicode / tech-doc

A technical documentation page for ES6 features

ES6 Technical Documentation

Description

This website is a reference for some of ES6's new features. It is a project required by freeCodeCamp's Responsive Web Design curriculum. It fulfills the user stories listed here.

Demo

Check out the live site here: https://eunicode.github.io/tech-doc/

Tech stack

• HTML, CSS, JavaScript

Features

• Responsive, mobile-first layout with progressive enhancement

Lessons learned

• How to position items with grid lines
• How to position items with grid-areas and grid-template-areas
• How to make a sticky footer with Grid
• How to use AJAX (XHR API) to load JSON from local files
• AJAX requests only work through a web server
• You can't get JavaScript or JavaScript files with XHR/Fetch; use JSON
• How to use AJAX with promises
• How to make HTTP requests with Fetch API
• How to chain promises (then()), handle errors(reject/reject(), onRejected, ), and catch errors (catch())
• How to extract JSON from Response object (HTTP response) -Body.json()
• How to export/import promises with ES6 modules
• How to generate DOM elements from data
• How to use relative paths with HTTP requests and ES6 modules

Set Up

Download/clone repo

Move to project folder

cd portfolio-js

Install dependencies

npm install

Run the default gulp command to start the live server

gulp

When finished developing, stop the server

Ctrl + C

To deploy to GitHub Pages, run npm script

npm run deploy

To audit/update npm packages

npm audit
npm audit fix

npm update
npm outdated