Server Side JS Project
Languages
Frameworks
Server
Database
Primary Goals
- Work on real projects using code you have built as your primary resources for reference.
HTML & CSS
- Write semantic markup using
<html> <head> <title> <body> <h1-6> <p> <ul>/<ol>/<li> <code>
.
- Add structure to a site using
<div> <span> <nav>
and use CSS selectors to style different sections differently
- Write CSS selectors that target a specific tag.
- Change the color, background-color, font, font-size, text-align, cursor.
- Select HTML elements using the type, .class, and #id CSS selectors.
Bootstrap
- Incorporate Bootstrap by linking to it from a CDN.
- Incorporate Bootstrap by downloading it to your project directory.
- Create a responsive layout that looks appropriate in both desktop and mobile browsers.
- Design a website using the 12-column grid system.
- Use Chrome’s developer tools to inspect an HTML’s box model.
Node
- Download and install Node.js.
- Run commands in the Node.js REPL.
- Explain non-blocking I/O.
- Explain (a)synchronous calls.
- Explain event-driven programming.
Express
- Explain the MVC framework.
- Create a basic web app using Node.js for the server and Express.js as the MVC framework.
PostgreSQL
- Set up a Postgres database.
- Create databases and tables in Postgres.
- Add, query, and remove documents.
- Remove databases and tables.
Overview
In this project, you will work through three phases in pairs. For the first phase, you will set up your project using GitHub, then you will create a wireframe for Step I.
For phase II you will create a Database connection, and, lastly you can polish of your portfolio piece and work and add extensions.
Context
- You already know how to use CSS, HTML, Bootstrap, jQuery, Express, and Node.
- You are building your first app in pairs as one of your major portfolio pieces.
- The value of this exercise will come by working in pairs, collaborating using GitHub, creating wire-frames, and setting up a database while using Node and Express.
Basic Requirements
- Apprentices will submit projectby its due date in the Roadmap.
Setup Instructions
Use the Terminal for navigating around the file system and creating new folders and files. Refer to the lesson on Shell Commands if you need guidance on using the Terminal.
When you get to the steps below that ask you to initialize a git repo and track files using git, refer to the lesson on Git and Version Control if you need guidance.
Navigate to the techtonica-labs
folder located on your Desktop. Create a new folder called give-it-the-name-that-you-wish
within the techtonica-labs
folder. Navigate to give-it-the-name-that-you-wish
. Initialize give-it-the-name-that-you-wish
as a git repository.
If you have questions, try not to ask others until you have spent 15-20 minutes troubleshooting within your own pair. Post a message on the #tech-help channel in Slack if you and your pair partner are still stuck after 15-20 minutes. Be sure to format your question using the template we practiced in the Asking Good Questions lesson.
Project Instructions
Starter Code
Code you have built during weeks 1 - 5 of the program.
Project
Part 1 - Thing they will do (should match Basic Requirement 1 from above)
First step
Gettting Setup
- Build a new folder .
- Use Git and GitHub for version control.
- Update the readme with your pair—include both of your names in the readme, and, give your project a license and a Hello World.
- Integrate with EJS and build a simple home page.
Second step
Wireframe Time
- Create a wire frame for your project.
- Include some buttons, a logo, a topic or theme, and a form including a text or author.
- Outline your use of HTML, CSS, Git & GitHub, your server, and database.
Third step
Database Connecting
- Connect to the DB.
- Set up a model.
- Set up a form.
- Store items in the database.
- List the items.
Part 2 -
Optional - Add Extensions
First step
- Add Google Fonts.
- Add images.
- Add an animation.
- Add images of your wire frame to the readme.
- Document your process and use wire frame images to explain how you built your app in the readme.
- Add documentation that explains how to contribute to your project, and or how to clone and submit pull requests.
- Connect your app to Heroku or Digital Ocean to make it live.
Questions to Consider
- Ask questions here that connect what is being done in the project to what was covered in the given week’s Topic Outlines.
- Ask questions that connect this project to prior Topic Outlines or Independent Practice.
- Also ask questions that require compiling multiple pieces of knowledge to arrive at an answer or opinion.
Extensions
- What deliverables can you work on once you have fulfilled the basic requirements for this project?
- What do these deliverables add to their understanding of the topic?
- Extensions are designed for apprentice pairs who are moving through the material faster than other apprentices. They should reinforce or build on the concepts from this project. Apprentices should not work ahead in the curriculum by starting on the next Topic Outline.