Skip to content

Week 6: Web Apps, Libraries and Frameworks

Sept 27

This week we will be looking at web apps, libraries and frameworks. We will be revisiting the client/server relationship, looking at some libraries and frameworks commonly used in web development, choosing a front-end library to build a static web page with, and will be introduced to node.js, with the purpose of building a simple web server app that sends a static html page to a client.

Assignment 4: Student Directory

Objective: Use a front-end library or framework to build a prototype for a CMCI STUDIO Student Directory.

Design

  • The directory should contain the names of every student that has been part of the program starting with BDW cohort 1 to present day, cohort 13. For simplicity, you are provided data of the past 5 cohorts. You can find a list of names here.
  • The directory may contain additional data: personal/portfolio website, cohort # / class years, geo location, professional title/role, expertise, socials, and profile image.
  • The directory contains search and filter functionality for locating a person by name, location, or any additional data.
  • The directory contents may be organized as list and/or grid layouts.
  • The directory should be responsive and mobile ready.

Development

  • Pick a front-end library or framework to get familiar with and work with. You are welcome to utilize any additional helper libraries in combination for functionality that may not be included in the primary library or framework. For example, animate.css.
  • Sketch by hand and/or utilize any UX / wireframing tools (such as Figma, Adobe XD, Sketch) to think visually as needed. Look for front-end toolkits that match your tool of choice to help in your workflow. For example, Bootstrap Design (UI Kit) ($12).
  • Utilize a well organized project folder with html, css, and js files. Commit this project to a Github repo.

Resources

  • Use the student-list example as a starting point. Refer to other week 6 examples demonstrating how to use front-end libraries such as bootstrap, materialize, and bulma. You are not restricted to these tools. You are free to choose any front-end library or framework that you like.

Deliverable:

  1. A 2-4 min video demonstrating your project running in the browser. Be sure to briefly introduce yourself and your project, provide an overview of what you made and how it works. Embed the video into your blog post.

  2. Any screenshots or photos of your design workflow.

  3. Include a link to your Github repo for the code written. For example, https://github.com/rjduran/student-directory.

Submit a link to your blog post on Slack #cmstudio.

Due: Oct 4

Back to top