Overview

The following details all the projects from the Front End Web Development Techdegree- Tree house

1. A Basic Webpage

   • Github: https://github.com/KennySoh/treehouse_Front_End_Techdegree_Overview
   • Github Page: https://kennysoh.github.io/Treehouse_Front_End_Techdegree_Overview/

2. A Responsive Webdesign

   • Github: https://github.com/KennySoh/treehouseFE_unit2_Responsive_Design
   • Github Page: https://kennysoh.github.io/treehouseFE_unit2_Responsive_Design

3. A Responsive Online Registration Form

   • Github: https://github.com/KennySoh/treehouseFE_unit3_Responsive_Registration_Form
   • Github Page: https://kennysoh.github.io/treehouseFE_unit3_Responsive_Registration_Form

4. A Web Style Guide & The use of Sass.

   • Github: https://github.com/KennySoh/treehouseFE_unit4_SASS
   • Github Page: https://kennysoh.github.io/treehouseFE_unit4_SASS/

5. A Photo Gallery, with jQuery & Javascript

   • Github: https://github.com/KennySoh/treehouseFE_unit5_Photo_Gallery_With_jQuery
   • Github Page: https://kennysoh.github.io/treehouseFE_unit5_Photo_Gallery_With_jQuery

6. A Game Show App, JS

   • Github: https://github.com/KennySoh/treehouseFE_unit6_Word_Guessing_App
   • Github Page: https://kennysoh.github.io/treehouseFE_unit6_Word_Guessing_App

Unit1- A Basic Webpage

This is a basic html & css markup website.

To Explore the projects:

• Github: https://github.com/KennySoh/treehouse_Front_End_Techdegree_Overview
• Github Page: https://kennysoh.github.io/treehouse_Front_End_Techdegree_Overview

A sample of the project

Unit2- A Responsive Webdesign, a mobile first approach

A Mobile First Responsive Layout with 3 Different break points (320px , 768px, 1024px)

Highlights

• css
  • normalize.css (used to ensure cross browser uniformity)
  • a Mobile First approach
    • started the css design with the mobile layout.
    • Uses 2 breakpoints 768px, 1024px| eg: @media (min-width: 768px)
• google font
  • font-family: 'Carter One', cursive;

To Explore the projects:

• Github: https://github.com/KennySoh/treehouseFE_unit2_Responsive_Design
• Github Page: https://kennysoh.github.io/treehouseFE_unit2_Responsive_Design

A sample of the project

Mobile (320px)	Tablet (768px)

Desktop (1024px)

Unit3- A Responsive Online Registration Form

A responsive HTML Form coded from scratch.

Highlights

• Form Structure
  • tag contains all inputs, action and method included
  • Field set and legends added for "Contact information" and "Newsletter"
• Form fields and labels
  • Includes the following form fields:
    • text input
    • email input
    • telephone input
    • select menu
    • checkboxes
    • radio buttons
    • textfield
    • submit button
• Mobile-First
  • breakpoint set at 768px

To Explore the projects:

• Github: https://github.com/KennySoh/treehouseFE_unit3_Responsive_Registration_Form
• Github Page: https://kennysoh.github.io/treehouseFE_unit3_Responsive_Registration_Form

A sample of the project

| |

Unit4- A Web Style Guide & The use of Sass.

A style guide is used defined the look and feel of user interface elements on a site. Sass is used to streamline the css creation.

Highlights

• SASS
  • Introduction of vairables

  /*Variables*/
  $color-primary:#58e1c1;
  $color-secondary:#51ddfc;
  $color-text:#777;
  
  $color-default:#51ddfc;
  $color-success:#63cc82;
  $color-error:#e4757a;
  $color-warning:#fd7856;
  $color-info:#927bc1;
  
  $color-col-1: #927bc1;
  
  $color-img-frame:#ccc;
  
  $breakpoint-med:768px;
  

  • Seperate Your Stylesheet into Partials

  //Utilities
  @import 'utilities/variables',
    'utilities/mixins',
    'utilities/functions',
    'utilities/helpers';
  
  //Base Styles
  @import 'base/reset',
    'base/base';
  
  //Laout Styles
  @import 'layout/containers',
    'layout/header',
    'layout/card',
    'layout/footer';
  

  • The use of mixins to adhere to DRY concepts

To Explore the projects:

• Github: https://github.com/KennySoh/treehouseFE_unit4_SASS
• Github Page: https://kennysoh.github.io/treehouseFE_unit4_SASS/

A sample of the project

| |

A Photo Gallery, with jQuery & Javascript

A responsive Photo Gallery with a filter funcitonality

Highlights

• The use of a jQuery Plugin
  • A responsive photo Gallery implmentation
• Content Filtering
  • Images are filtered in real-time based on user input
• A mobile first reponsive design

To Explore the projects:

• Github: https://github.com/KennySoh/treehouseFE_unit5_Photo_Gallery_With_jQuery
• Github Page: https://kennysoh.github.io/treehouseFE_unit5_Photo_Gallery_With_jQuery

A sample of the project

Photo Gallery

Lightbox jQuery Plugin

Content Filtering JS Script

Unit6- A Game Show App, JS

Multiple Screen Overlay transition and Dynamic word guessing with js.

To Explore the projects:

• Github: https://github.com/KennySoh/treehouseFE_unit6_Word_Guessing_App
• Github Page: https://kennysoh.github.io/treehouseFE_unit6_Word_Guessing_App

A sample of the project

Start Page

Word Guessing

Win	Lose