Team Project - part 2

Time: 1 hour

Requirements

This project will be completed in a team of 2 students. After forming your team you will be responsible to plan and complete a web application as a showcase that demonstrates your mastery of the topics taught during this course. Your web application can take many different forms, but there is a list of requirements that each app must include:

  • At least one detailed, validated form
  • Local storage for persistence
  • Fetching data from an API or json file.
  • Drop-down menu
  • CSS Animation
  • Responsive design
  • Good user experience (UX) and accessibility
  • URL parameters (data that is passed from page to page in an app through the URL, for example https://example.com/page2.html?id=34 Send the id of 34 to the code running at page2.html)
  • Use of modules for organization

Checkpoint

By the end of this unit (Unit 3) it is recommended that you have most of the HTML and CSS written for your application. In order to meet this checkpoint it is recommended that you use static content hard coded into the HTML. You should make note of where you will need to switch that out for dynamically generated markup later.

Keep the requirements list above in mind as you code up the HTML and CSS of your application.

Divide and conquer

As a team you should talk about how you will divide up the work. Should one person do all of the HTML and one all of the CSS? That could work but the CSS person will not be able to do much until the HTML is done.

Should one person work on one page and one another? Again this can work but some of the HTML and CSS should be the same across both pages. Think Header and Footer for example, or fonts and colors.

One other plan would be for one person to work on the parts of the pages that should be the same across the whole site, and the other work on the content areas. In this case we have removed most of the blockers and no one is stuck waiting on someone else.

Before moving forward it is highly recommended that each team take a few minutes and write down all of the tasks that need to be done in order to complete the project. Try and make each task about 5-30 minutes in scope. Any task that takes longer than 30 min should be broken into smaller tasks.

You could use a tool like Trello to help organize your tasks. Create three columns to start: Backlog, Doing, and Done.

One last thought. Remember that you can have more than one CSS file as part of your project…you can either link them all in, or check out @import

What might this look like? Let’s say that you decided to break your CSS up into the following parts:

  • variables
  • global styles
  • header/navigation styles
  • footer styles
  • page specific styles

You might then create a base.css file and the contents would be the following:

@import 'variables.css';
@import 'global.css';
@import 'header.css';
@import 'footer.css';

Then in your index.html file you could add two link elements. One would bring in the base.css and the other a file that contained all the styles for the main content area of the home page called home.css

This breaks up the work across multiple files to make it easier to collaborate on with your team. For more details on this…check out Organizing your CSS

Meet with the instructor

Each unit your team should meet with the instructor to review progress and discuss potential problems. Your instructor will give you more details about how this is to happen. It is your responsibility to make sure this meeting does occur!