Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
75 lines (37 sloc) 4.65 KB

Front-End Systems Architecture

This work is licensed under a Creative Commons Attribution 4.0 International License.

Challenge introduction

Front End Architecture is a collection of processes to plan, develop and manage the front end code of a website or application.

A front-end developer's primary audience is the website or application's user, and the developer needs to ensure that their code is written for optimal performance, maintainability and accessibility.

A front-end architect's main audience is instead other developers, and the system that a front-end architect creates needs to be easily understood and adaptable to the needs of the developers that will be working within it.

Background research

Challenge outline

You will be building a mini starter kit (based off from the FTS Starter Kit Sketch file and utilizing normalize.css as your base).

The key takeaways of building this starter kit yourself is to familiarize you with setting up a front-end architecture and to expose you to decisions you wouldn’t otherwise be faced with, if you jumped into an existing project, or started with a framework like Bootstrap.

Recommended process

  1. Read through the recommended background research above to gain additional insight into the different aspects of constructing a front-end systems architecture.

  2. Build out your project file structure. Utilize best practices garnered from your research, but be able to identify, diverge and explain why in instances where those practices may not apply.

  3. Create two HTML documents. An index.html to display the marked-up version of the Starter Kit, and a __stub.html file to be used as a quick HTML starter file that should contain only the essentials for creating new HTML pages. (e.g. html, head meta data, empty, or very minimal markup in the )

  4. Build your mark-up before you touch your CSS. Be sure to consult sites like MDN: HTML Element Reference for help with any element you may be unfamiliar with.

  5. Style your mark-up in CSS utilizing the mark-up elements and classes you create. (e.g. h1, .my-class { … })

  6. Make future friendly decisions on when to style an element directly, or when a class should be used to style an element. (e.g. Should h1’s always be blue? Or should the be blue only in certain instances?)

  7. Browser & Device test your UI Kits to ensure elements look appropriately (not necessarily the same). (IE 10+, Firefox, Chrome, Safari Latest, Safari iOS 9)


  1. A CSS file that accounts for all the elements part of the FTS Starter Kit

  2. A HTML file that contains all the Starter Kit elements in it

  3. A second stub HTML file containing the bare essentials for quickly creating new HTML pages.

  4. Include a file to outline your file structure and any special notes pertaining to the HTML/CSS/dependencies (normalize.css) included in your starter-kit.

  5. Not required: JavaScript file(s) that may be useful to your starter kit.


You’ll have just under two weeks to develop your system. The challenge starts on a Monday and is due for evaluation by Tim Wright or Scott O’Hara the following Thursday. We highly recommend checking in several times with members of the front-end team along the way. There will not be any project extensions, you are responsible for delivering on time. Part of delivering on time is making sure you’re on the correct path at several intervals along the way.

Your brief talk will be due for presentation the day after the challenge is due.