Giter Site home page Giter Site logo

company-website-part-deux-lopsided-pelicans's Introduction

Company Website Sprint

As a team, build the web site for a fictitious product company. The team gets to decide what the name of the company is, and what types of products it manufactures. Be creative and have fun.

Setup

Every teammate copy and run the following commands in the host machine terminal.

mkdir -p ~/workspace/group-projects && cd $_

Requirements

Theme

Pick a theme that the team likes. A good place for inspiration is the Wordpress themes site. Do not purchase, or copy the theme code, just browse them for inspiration. Everyone should agree on a theme and ensure that each page is consistent with the colors, fonts, and/or images chosen. Your team will build all of the CSS for each page.

Pages

Each team member is going to be responsible for the content of a different page, so decide on the name and content for each of those pages. Some possible options are...

  1. Home page
  2. Products we sell
  3. Employee listing
  4. Company history
  5. Company culture/mission
  6. Job listings
  7. Company awards
  8. Office locations

Page Functionality

The team member's page will be driven from JavaScript code. You will create a database structure that suits the data that you will be building for your page. It could be an array of objects, or an object of objects. Discuss with your teammates.

Once you have built your Database object, and populated it with the raw data, serialize it into a string and store it into local storage. Then use your DOM query & manipulation skills to build semantic HTML element strings, and then insert them into the DOM.

Modular JavaScript

Remember to split your JavaScript into two files.

Factory

The factory deals with data. The factory should read from local storage and see if the database is there. If it is, use that object, otherwise, build it and store it.

Controller

The job of the controller is to use the data to query and manipulate the DOM.

Design First

Use your whiteboard and communication skills to design each page before you build it.

  1. What information will be on it?
  2. How should the information be presented?
  3. What is the layout? Just a list, or a grid?

Git / Github Workflow

Your team is going to learn how to use git, and Github, to enable good teamwork when building a software product.

  1. Now that everyone has joined the same team, everyone clone the Github Classroom project into your current directory - which should be group-projects if you ran the setup commands.
  2. cd into the directory that got created.
  3. Before anyone on the team writes a single line of code, the team will decide on a branch naming strategy. Branches should be descriptive of the work that is going to be done on that branch. Some teams also decide to add the developer's information to the branch name, such as initials. For example, a developer named Jasmine Sheboygen is going to work on the job listings page for the web site. A good name for the branch would be js-job-listing-page.
  4. Again, before you write any code, one team member volunteer to create the ignore file on the master branch. This is the ONLY COMMIT YOU WILL MAKE ON MASTER.
    1. touch .gitignore
    2. git add .
    3. git commit -m "Initial commit with .gitignore file"
    4. git push origin master
  5. Now everyone should git pull origin master.
  6. At this point, each teammate will create their feature branch with git checkout -b feature_branch_name and start work on their page.

Only when teammates feel that the work is complete, the teammate will push up their branch to Github and create a pull request. One of the other teammates must review the pull request and give a thumbs up (Just type :+1 in the comment box).

Once the PR gets a thumbs up, the teammates can merge the branch by following this process.

git checkout master
git merge [your approved branch name] 
# Fix any merge conflicts, if you have them
git push origin master

company-website-part-deux-lopsided-pelicans's People

Contributors

jpage4 avatar lissagoforth avatar maxcwolf avatar rmbw74 avatar stevebrownlee avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

Forkers

rmbw74

company-website-part-deux-lopsided-pelicans's Issues

Paginate products

Given a user visits the product page
When the page initially renders
Then only 4 of the products should appear
And pagination links should appear at the bottom for each set of 4 products

Example

Product 1 Title

Product 1 description

Product 2 Title

Product 2 description

Product 3 Title

Product 3 description

Product 4 Title

Product 4 description

<  1  2  3  4  5  >

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.