Books.Modern-Developer

The project will be available under

http://Books.Modern-Developer.github.io

Please note that the project is progress! More coming soon.

Project Workflow

The workflow for our project is as follows:

1. Project created https://github.com/snagy22000/Books.Modern-Developer
2. Project forked to https://github.com/deduced/Books.Modern-Developer by 2nd teammmate.
3. Periodic meetings via GChat in order to coordinate tasks.
4. Project task completion, async discussion, handled at Trello
5. Github pull requests created by 2nd teammate for incorporation into final project.

Project Description

Team Project 1: Build the UI for Books.Modern Developer

In this project assignment, you will build the UI, using HTML and CSS, for Books.Modern Developer. The Books.Modern Developer project is a real site, and thus a real-world project that will give you a sense of building a real UI with varying complexity, even in this introductory course.

The UI Your Are Building

Look at the UI design below; you will notice it is moderate project, not trivial and not too complex. We don’t expect you to build the interactivity (a functional tabs interface, for example) yet. You don’t have to add any JavaScript to the UI. Do build the entire UI, however, including the footer.

Do not include this project with your web components repository.

The UI design for Books.Modern Developer follows: --> sorry the mockup is only for LMD mebers project screenshot

Books.MD UI Assets (The Images You Will Need) Download the Books.MD_UI_Assets.zip file (it includes the header background image and the logo icon for the Books UI design) at the link below.

Books.MD_UI_Assets

Any icon not found in the zip file can be downloaded from http://fontawesome.io/ or from https://design.google.com/icons/. And images such as the buy buttons, which include the Amazon logo and the Gumroad logo, can be downloaded online.

As a team, divide up the tasks needed to build the app shown in the UI above. Use the UI design as a reference and work to emulate its precise structure, layout, colors, and typography using the HTML and CSS you learned in the Intro to HTML and CSS chapters.

Using the Correct Fonts

The design uses the Roboto and Roboto Slab font families.

To use the fonts, include the below code inside the of your document; put it just above the CSS link for your own stylesheet:1

<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,300italic|Roboto+Slab:400,300,700,100' rel='stylesheet' type='text/css'>

This Is a Real-World Project

As we note above, you are creating a real-world project, a real app that you, your colleagues, and many others around the world will use. This sort of project counts as experience because you are creating a real-world project for use on the web. You may get to refactor this same project in the next web programming course. At that point, you would use style-guide-driven development (including responsive design) to rebuild the UI. And you might even reuse some of the code you write for the project now.

The Best Project Will Be Recognized

Your project will be judged in two parts: Part 1 is the HTML/CSS part of the project outlined in this project assignment, and Part 2 is the JavaScript you will add to this same project when you complete the Intro JavaScript chapters. Perform well in both rounds and your team could win and be recognized for your outstanding efforts.

We will consider these criteria for the winning project:

1. Clean code that follows best practices
2. Design-to-UI Fidelity: How closely the final UI matches the design, including content alignment, spacing, padding, font sizes, colors, and so on
3. User Experience: The way the data loads into the content and how the UI expands and accommodates the content
4. Data Structure (done in the JavaScript chapter): We will choose the most efficient and most scalable implementation of the data structure, regardless of whether or not the data structure belongs to the group with the best UI implementation.

How to Begin

1. Discuss the tasks at hand with your teammate and decide how you would like to split up the work. Also, decide on a practical workflow for your team to use. You must use Git and GitHub, but you and your teammate can determine how you use them.

2. One of you must create a repository for the project. You will work together by contributing to the same repository. To keep your team on the same page, edit the README.md and document the workflow you decided on in step 1.

3. Create an index.html and a main.css and add your code following the workflow your team decides on.

4. Create a GitHub pages site for your repository.

5. When you are finished, merge all branches of your completed project into the master branch. Each of you should link to the repository in your own coursework repository and add a status: complete heading. Look through your files and remove any extraneous comments and