Full Stack Web Development: The Big

Picture: Objectives and Outcomes

This lesson gives you a big picture view of the Full Stack Web Development. The lecture gives you
an overview of full stack web development. At the end of this lesson, you will be able to:

 Understand what is meant by full stack in the context of web development

 Distinguish between front-end, back-end and full stack web development
 Understand the position of this course in the context of this specialisation

Full Stack Web Development: Additional

Resources
PDFs of Presentations
FSWD-BigPicture.pdfPDF File

Useful Links

 What is a Full Stack developer?

 Wait, Wait… What is a Full-stack Web Developer After All?
 The Myth of the Full-stack Developer
 Multi-tier Architecture
 What is the 3-Tier Architecture?

Setting up Your Development Environment:

Git and Node: Objectives and Outcomes
At the end of this lesson you should have set up Git and Node.js on your computer. At the end of this
lesson, you will be able to:

 Set up a Git repository and perform basic Git operations

 Set up and use online Git repositories
 Use Node-based modules to perform basic operations.

Setting up your Development Environment

Software Requirements

1. Text editor of your choice: Any text editor that you are already familiar with can be used for
editing the project files. I will be using Visual Studio Code (https://code.visualstudio.com/) as the
editor of choice in this specialization. You may also consider other editors such as Brackets
(http://brackets.io/), Sublime Text (http://www.sublimetext.com/), or Atom (https://atom.io/).
2. Browser of your choice: You may use your preferred browser. I will be using Chrome as
the browser in all the exercises. All the exercises and assignments in this course have been
tested using Chrome v. 46. Please note that not all browsers may support all the HTML5
features to the same extent. You might encounter problems when using other browsers. I
strongly urge you to use the latest Chrome browser for the exercises and assignments in this
course so that any problems are minimized.
3. Command line shell: Familiarity with the command-line shell will be essential for the
exercises. In Windows a cmd window or power shell with admin privileges would be needed. On
a Mac or in Linux, a terminal window can be used. Please get familiar with the "sudo" command
in OS X and Linux.
4. Files required for the exercises: We will provide additional starter files for the exercises
wherever needed. Links to download the files will be provided inline in the exercise
instructions that follow each exercise video. Please download the files provided there, if any,
before beginning the exercise. The links are also available through the Additional
Resources of the specific lesson.

Note: Please remember to retain the folders and all the files that you create in the
exercises. Further exercises will build upon the files that you create in the preceding
exercises. DO NOT DELETE the files at the end of the exercises, unless otherwise
instructed. You may wish to set up your exercise folder as a Git repository and commit
the files to the repository at the end of each exercise.

Exercise (Instructions): Setting up Git

Objectives and Outcomes

In this exercise you will learn to install Git on your computer. Git is required for using all the
remaining Node.js and Node based tools that we encounter in the rest of the course. At the end of
this exercise, you would be able to:

 Install Git on your computer

 Ensure that Git can be used from the command-line or command-prompt on your computer
 Set up some of the basic global configuration for Git

Downloading and Installing Git

 To install Git on your computer, go to https://git-scm.com/downloads to download the Git

installer for your specific computing platform.
 Then, follow the installation steps as you install Git using the installer.
 You can find more details about installing Git at https://git-scm.com/book/en/v2/Getting-
Started-Installing-Git. This document lists several ways of installing Git on various platforms.
 Installing some of the GUI tools like GitHub Desktop will also install Git on your computer.
 On a Mac, setting up XCode command-line tools also will set up Git on your computer.
 You can choose any of the methods that is most convenient for you.

Some Global Configuration for Git

 Open a cmd window or terminal on your computer.

 Check to make sure that Git is installed and available on the command line, by typing the
following at the command prompt:

git --version

 To configure your user name to be used by Git, type the following at the prompt:
 1

git config --global user.name "Your Name"

 To configure your email to be used by Git, type the following at the prompt:

git config --global user.email <your email address>

 You can check your default Git global configuration, you can type the following at the prompt:

git config --list

Conclusions

At the end of this exercise you should have Git available on the command-line of your computer.

5
Exercise (Instructions): Basic Git
Commands
Objectives and Outcomes

In this exercise you will get familiar with some basic Git commands. At the end of this exercise you
will be able to:

 Set up a folder as a Git repository

 Perform basic Git operations on your Git repository

Basic Git Commands

 At a convenient location on your computer, create a folder named git-test.
 Open this git-test folder in your favorite editor.
 Add a file named index.html to this folder, and add the following HTML code to this file:

2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>This is a Header</h1>
</body>
</html>
Initializing the folder as a Git repository
  Go to the git-test folder in your cmd window/terminal and type the following at the prompt to
initialize the folder as a Git repository:

git init

Checking your Git repository status

 Type the following at the prompt to check your Git repository's status:

git status

Adding files to the staging area

 To add files to the staging area of your Git repository, type:

git add .

Commiting to the Git repository

 To commit the current staging area to your Git repository, type:

 1

git commit -m "first commit"

Checking the log of Git commits

 To check the log of the commits to your Git repository, type

git log --oneline

 Now, modify the index.html file as follows:

2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>This is a Header</h1>
 <p>This is a paragraph</p>
</body>
</html>

 Add a sub-folder named templates to your git-test folder, and then add a file

named test.html to the templates folder. Then set the contents of this file to be the same as
the index.html file above.
 Then check the status and add all the files to the staging area.
 Then do the second commit to your repository
 Now, modify the index.html file as follows:

2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>This is a Header</h1>
<p>This is a paragraph</p>
<p>This is a second paragraph</p>
</body>
</html>

 Now add the modified index.html file to the staging area and then do a third commit.

Checking out a file from an earlier commit

 To check out the index.html from the second commit, find the number of the second commit
using the git log, and then type the following at the prompt:
 1

git checkout <second commit's number> index.html

Resetting the Git repository

 To discard the effect of the previous operation and restore index.html to its state at the end
of the third commit, type:

git reset HEAD index.html

 Then type the following at the prompt:

git checkout -- index.html

 You can also use git reset to reset the staging area to the last commit without disturbing the
working directory.

Conclusions

At the end of this exercise you should have learnt some basic Git commands. Experiment with these
commands until you fully understand how to use Git.
6

Exercise (Instructions): Online Git

Repositories
Objectives and Outcomes

In this exercise you will learn about how to set up and use an online Git repository and synchronize
your local Git repository with your online repository. At the end of this exercise, you will be able to:

 Set up the online repository as a remote repository for your local Git repository
 Push your commits to the online repository
 Clone an online Git repository to your computer

Setting up an Online Git repository

 Sign up for an account either at Bitbucket (https://bitbucket.org) or GitHub

(https://github.com).
 Then set up an online Git repository named git-test. Note the URL of your online Git
repository. Note that private repositories on GitHub requires a paid account, and is not available
for free accounts.

Set the local Git repository to set its remote origin

 At the prompt, type the following to set up your local repository to link to your online Git
repository:

git remote add origin <repository URL>

Pushing your commits to the online repository

 At the prompt, type the following to push the commits to the online repository:

git push -u origin master

Cloning an online repository

 To clone an online repository to your computer, type the following at the prompt:

git clone <repository URL>

Conclusions

In this exercise you have learnt to set up an online Git repository, synchronize your local repository
with the remote repository, and clone an online repository.

Exercise (Instructions): Setting up Node.js

and NPM
Note: Make sure you have installed Git on your machine before you install Node.js. Please
complete the previous Git installation exercise before proceeding with this exercise.

Objectives and Outcomes

In this exercise, you will learn to set up the Node.js environment, a popular Javascript based server
framework, and node package manager (NPM) on your machine. To learn more about NodeJS, you
can visit https://nodejs.org. For this course, you just need to install Node.js on your machine and
make use of it for running some front-end tools. You will learn more about the server-side support
using Node.js in a subsequent course. At the end of this exercise, you will be able to:

 Complete the set up of Node.js and NPM on your machine

 Verify that the installation was successful and your machine is ready for using Node.js and
NPM.

Installing Node

 To install Node on your machine, go to https://nodejs.org and click on the Download button.

Depending on your computer's platform (Windows, MacOS or Linux), the appropriate
installation package is downloaded.
 As an example, on a Mac, you will see the following web page. Click on the Download
button. Follow along the instructions to install Node on your machine. (Note: Now Node gives
you the option of installing a mature and dependable LTS version and a more newer stable
version. You should to install the LTS version. I will use this version in the course.)

Note: On Windows machines, you may need to configure your PATH environmental variable
in case you forgot to turn on the add to PATH during the installation steps.

Verifying the Node Installation

 Open a terminal window on your machine. If you are using a Windows machine, open a cmd
window or PowerShell window with admin privileges.
 To ensure that your NodeJS setup is working correctly, type the following at the command
prompt to check for the version of Node and NPM
 1

node -v

npm -v

Conclusions

At the end of this exercise, your machine is now ready with the Node installed for further
development. We will examine web development tools next.

Exercise (Instructions): Basics of Node.js

and NPM
Objectives and Outcomes

In this exercise you will learn the basics of Node and NPM. At the end of this exercise, you will be
able to:

 Set up package.json file in the project folder for configuring your Node and NPM for this
project
 Install a NPM module and make use of it within your project
Initializing package.json

 At the command prompt in your git-test folder, type

npm init

 Follow along the prompts and answer the questions as follows: accept the default values for
most of the entries, except set the entry point to index.html
 This should create a package.json file in your git-test folder.

Installing an NPM Module

 Install an NPM module, lite-server, that allows you to run a Node.js based development web
server and serve up your project files. To do this, type the following at the prompt:

npm install lite-server --save-dev

 You can check out more documentation on lite-server here.

 Next, open package.json in your editor and modify it as shown below. Note the addition of
two lines, line 7 and line 9.

1
2
3
 4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"name": "git-test",
"version": "1.0.0",
"description": "This is the Git and Node basic learning project",
"main": "index.html",
"scripts": {
"start": "npm run lite",
"test": "echo \"Error: no test specified\" && exit 1",
"lite": "lite-server"
},
"repository": {
"type": "git",
"url": "git+https://[email protected]/jogesh_k_muppala/git-test
      .git"
},
"author": "",
"license": "ISC",
"homepage": "https://bitbucket.org/jogesh_k_muppala/git-test#readme",
"devDependencies": {
"lite-server": "^2.2.2"
}
}

 Next, start the development server by typing the following at the prompt:

1
npm start

 This should open your index.html page in your default browser.

 If you now open the index.html page in an editor and make changes and save, the browser
should immediately refresh to reflect the changes.

Setting up .gitignore

 Next, create a file in your project directory named .gitignore (Note: the name starts with a
period)Then, add the following to the .gitignore file

node_modules

 Then do a git commit and push the changes to the online repository. You will note that the
node_modules folder will not be added to the commit, and will not be uploaded to the
repository.

Conclusions

In this exercise you learnt to set up package.json, install a npm package and start a development
server.

Setting up your Development Environment:

Git and Node: Additional Resources
PDFs of Presentations
Git.pdfPDF File

Git-Exercises.pdfPDF File
NodeJS.pdfPDF File

Exercises-Node-NPM.pdfPDF File

Additional Resources (Git)

 Git site http://git-scm.com.
 Installing Git chapter from Pro Git
 Git reference manual
 Quick reference guides: GitHub Cheat Sheet (PDF) | Visual Git Cheat Sheet (SVG | PNG)
 Atlassian comprehensive Git tutorial

Additional Resources (Node.js and NPM)

 Nodejs.org
 Npmjs.com
 Node API Documentation
 NPM Documentation
 lite-server

Introduction to Bootstrap: Objectives and

Outcomes
In this lesson, you will be given a quick overview of front-end UI frameworks, and an introduction to
Bootstrap. The exercises will introduce you to getting started with Bootstrap for your web project. At
the end of this lesson, you will be able to:

 Identify the purpose of using front-end UI frameworks in web design and development
 Set up a project with Bootstrap support
 Configure a web project to use Bootstrap
 Become familiar with the basic features of Bootstrap

Note: For those of you who are already familiar with Bootstrap 3, here is an overview from the
Bootstrap 4 documentation on the major changes in Bootstrap 4 compared to Bootstrap 3. While you
will find Bootstrap 4 to have a lot of overlap in its classes with Bootstrap 3, several breaking changes
have been introduced, including removing some components and introducing new components. This
course covers Bootstrap 4 with the assumption that you are not familiar with Bootstrap.

Exercise: Getting Started with Bootstrap

Exercise Resources

Bootstrap4-starter.zip

Objectives and Outcomes

This exercise introduces the first set of steps to set up your web page to make use of Bootstrap
classes and components. At the end of this exercise, you will be able to:

 Download Bootstrap using NPM and include it in your project

 Understand how to set up a web project to use Bootstrap
 Include the Bootstrap CSS and JS classes into a web page

Note: Please remember to retain the folder and all the files that you create in this
exercise. Further exercises will build upon the files that you create in this
exercise. DO NOT DELETE the files at the end of the exercise.

Setting up the Project Folder

 Go to a convenient folder location on your computer and download the Bootstrap4-

starter.zip file using the link provided at the top of this page.
 Unzip the file to see a folder named Bootstrap4 and a sub-folder under it
named conFusion created. Move to the conFusion folder.
 Open a cmd window/terminal and move to the conFusion folder.
 At the prompt type
 1

npm install

 This will install the lite-server node module to your project.

 Next, initialize a Git repository in the project folder, and then set up a .gitignore file with the
contents as shown below:

node_modules

 Now do a commit of your project folder to the Git repository with the message "Initial Setup".
You will be doing a commit of your project at the end of each exercise so that you retain the
completed files of each exercise.
 Set up an online Git repository and synchronize your project folder with the online repository.

Downloading Bootstrap

 You will use npm to fetch the Bootstrap files for use within your project. Thereafter you need
to install JQuery and Popper.js as shown below since Bootstrap 4 depends on these two. At the
prompt, type the following to fetch Bootstrap files to your project folder:

2
npm install [email protected] --save

npm install [email protected] [email protected] --save

 This will fetch the Bootstrap files and store is in your node_modules folder in a bootstrap
folder. The bootstrap->dist folder contains the precompiled Bootstrap CSS and JS files for use
within your project.

 Open your project folder in your editor, and then open the index.html file in
the conFusion folder. This is your starting web page for the project. We have already created
the web page with some content to get you started. We will use Bootstrap to style this web
page, and learn Bootstrap features, classes and components along the way.
 Start your lite-server by typing npm start at the prompt. The index.html file should now be
loaded into your default browser.

Getting your Web page Bootstrap ready

 Open the index.html file in your favourite text editor. If you are using Visual Studio Code,
Brackets, Sublime Text or similar editors, you can open the project folder in the editor and then
view index.html.
 Insert the following code in the <head> of index.html file before the title.

<!-- Required meta tags always come first -->

<meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink

      -to-fit=no">

<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min

      .css">

 This will include Bootstrap CSS into your web page. Note the subtle change in the fonts of
the content of the web page. This is the Bootstrap typography effect coming into play. The
default Bootstrap typography sets the font to Helvetica Neue and selects the appropriate font
size based on the choice of the heading style and paragraph style for the content.
 At the bottom of the page, just before the end of the body tag, add the following code to
include the JQuery library, popper.js library and Bootstrap's Javascript plugins. Bootstrap by
default uses the JQuery Javascript library for its Javascript plugins. Hence the need to include
JQuery library in the web page.

<!-- jQuery first, then Popper.js, then Bootstrap JS. -->

<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>

<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>

<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

 Now, do a Git commit with the message "Intro. to Bootstrap". You may push the commit to
your online repository.
Conclusion

We have now understood how to set up a web project to use Bootstrap. In the next lecture, we will
explore further on responsive design and Bootstrap's grid system.

Introduction to Bootstrap: Additional

Resources
PDFs of the Presentations
1-Web-UI-Frameworks.pdfPDF File

2-Intro-Bootstrap.pdfPDF File

Exercise Resources

 (required for the exercise)

Bootstrap4-starter.zip

Bootstrap Official Resources

 Bootstrap 4 Home Page

 Bootstrap typography
 Migrating from Bootstrap 3 to Bootstrap 4

Front-end Web UI Frameworks

 Top 10 Front-End Frameworks of 2018

 The 5 Most Popular Front-end Frameworks Compared
Responsive Design and Bootstrap Grid
System: Objectives and Outcomes
In this lesson, you will be given an overview of responsive web design and an introduction to the
Bootstrap grid system. The exercises will concentrate on enhancing your web project using the
Bootstrap grid in order to make it responsive. At the end of this lesson, you will be able to:

 Understand the reasons for using responsive web design in a web project
 Use the Bootstrap grid system to design responsive websites
 Add your own custom CSS classes to a Bootstrap based web project

Exercise: Responsive Design and

Bootstrap Grid System Part 1
Objectives and Outcomes

This exercise introduces you to responsive design and Bootstrap support for mobile first responsive
design through the use of the grid system. At the end of this exercise, you will be able to:

 Create responsive websites using the Bootstrap grid system

 Reordering content using push, pull and offset classes

Note: In this exercise we will continue to update the index.html file in

the conFusion folder that we created and edited in the previous lecture.

Bootstrap Grid System and Responsive Design

Bootstrap is designed to be mobile first, meaning that the classes are designed such that we can
begin by targeting mobile device screens first and then work upwards to larger screen sizes. The
starting point for this is first through media queries. We have already added the support for media
queries in the last lesson, where we added this line to the head:
 1

<meta name="viewport" content="width=device-width, initial-scale=1, shrink

      -to-fit=no">

The viewport meta tag ensures that the screen width is set to the device width and the content is
rendered with this width in mind. This brings us to the second issue, designing the websites to be
responsive to the size of the viewport. This is where the Bootstrap grid system comes to our aid.
Bootstrap makes available four sizes, xs for extra small, sm for small, md for medium and lg for large
screen sizes. We have already seen the basics of responsive design. In this exercise, we will employ
the Bootstrap grid classes to design the websites. We would like our website to have the content
stacked on extra small devices, but become horizontal within each row for smaller devices and
beyond. Towards this goal, we will make use of the classes .col-*, .col-sm-*, col-md-*, and .col-lg-*
for defining the layouts for the various device sizes. We can specify how many columns each piece
of content will occupy within a row, all adding up to 12 or a multiple thereof.

Using a Container class

 We use the container class to keep content within a fixed width on the screen, determined by
the size of the screen. The alternative is to use the container-fluid class to make the content
automatically to span the full width of the screen. We will discuss further about this when we
discuss the Bootstrap grid system in the next lecture. Add the container class to the first div
right after the </header> in the file as follows.

1
<div class="container"> ...
Dividing the content into rows

 Let us now add the class row to the first-level inner div elements inside the container. This
organizes the page into rows of content. In the next exercise, we will see how we can add other
classes to the rows.

1
<div class="row"> ...

Creating a Jumbotron

 Let us add the class jumbotron to the header class as shown below. This turns the header
element into a Bootstrap component named Jumbotron. A jumbotron is used to showcase key
content on a website. In this case we are using it to highlight the name of the restaurant.

1
<header class="jumbotron"> ...

 In the header add a container class to the first inner div and a row class to the second inner
div.

Creating a footer

 Finally, in the footer add a container class to the first inner div and a row class to the second
inner div.

Applying column classes within each row

 In the header row, we will display the restaurant name and the description to occupy 6
columns, while we will leave six columns for displaying the restaurant logo in the future. Let us
go into the jumbotron and define the classes for the inner divs as follows:
 1

<div class="col-12 col-sm-6"> ... </div>

<div class="col-12 col-sm"> ... </div>

 For the remaining three div rows that contain the content, let us define the classes for the
inner divs as follows:

<div class="col-12 col-sm-4 col-md-3"> ... </div>

<div class="col col-sm col-md"> ... </div>

 For the footer, let us define the classes for the inner divs as follows:

2
 3

<div class="col-4 col-sm-2"> ... </div>

<div class="col-7 col-sm-5"> ... </div>

<div class="col-12 col-sm-4"> ... </div>

<div class="col-auto"> ... </div>

Now you can see how the web page has been turned into a mobile-first responsive design layout.

Using Order and Offset with column layout classes

 In the content rows, we would like to have the title and description to alternate so that it gives
an interesting look to the web page. For extra small screens, the default stacked layout works
best. This can be accomplished by using the .order-sm-last and .order-sm-first for the first and
the third rows as follows:

<div class="col-12 col-sm-4 order-sm-last col-md-3"> ... </div>

<div class="col col-sm order-sm-first col-md"> ... </div>

 For the div containing the <ul> with the site links, update the class as follows:
 1
<div class="col-4 offset-1 col-sm-2">

 After saving all the changes, you can do a Git commit with the message "Bootstrap Grid Part
1" and push your changes to the online repository.

Conclusion

In this exercise, we reviewed responsive design and the Bootstrap grid system.

Exercise: Responsive Design and

Bootstrap Grid System Part 2
Objectives and Outcomes

This exercise continues the examination of responsive design and Bootstrap support for mobile first
responsive design through the use of the grid system. We also learn how to customize some of the
Bootstrap classes through defining our own modifications in a separate CSS file. At the end of this
exercise, you will be able to:

 Customize the CSS classes through your own additions in a separate CSS file
 Centering the content both vertically and horizontally within a row

List styles

 You can use several list styles to display lists in different formats. In this exercise, we will use
the unordered list style list-unstyled to display the links at the bottom of the page without the
bullets. To do this, go to the links in the footer and update the ul as follows
 1

<ul class="list-unstyled"> ... </ul>

Using Custom CSS classes

We can define our own custom CSS classes in a separate CSS file, and also customize some of the
built-in CSS classes. We will now attempt to do this in this part of the exercise.

 Create a folder named css. Then create a file named styles.css in the css folder. Open this
file to edit the contents. Add the following CSS code to the file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.row-header{
margin:0px auto;
padding:0px;
}
.row-content {
margin:0px auto;
 padding: 50px 0px 50px 0px;
border-bottom: 1px ridge;
min-height:400px;
}
.footer{
background-color: #D1C4E9;
margin:0px auto;
padding: 20px 0px 20px 0px;
}

 Include the styles.css file into the head of the index.html file as follows:

<link href="css/styles.css" rel="stylesheet">

 Then add these classes to the corresponding rows in the index.html file as follows. See the
difference in the index.html file in the browser. The first one is for the row in the <header>, the
next three for the rows in the content, and the last one directly to the <footer> tag.

8
 9

10

<div class="row row-header"> ... </div>

<div class="row row-content"> ... </div>

<div class="row row-content"> ... </div>

<div class="row row-content"> ... </div>

<footer class="footer"> ... </footer>

 Our next set of customization is to the jumbotron and the address. Add the following
to styles.css file:

1
2
3
4
5
6
7
8
9
10
11
12
13
.jumbotron {
padding:70px 30px 70px 30px;
margin:0px auto;
background: #9575CD ;
color:floralwhite;
}
address{
font-size:80%;
margin:0px;
color:#0f0f0f;
}
Vertically Centering the Content

 In the content section, update all the rows as follows:

1
<div class="row row-content align-items-center">

 In the footer, update the third column div that contains the social media links as follows:

1
<div class="col-12 col-sm-4 align-self-center">

Horizontally Centering the Content

 Update the copyright paragraph as follows:

1
2
<div class="row justify-content-center">
<div class="col-auto">

 Update the inner div containing the social media links as follows:
 1
<div class="text-center">

 After saving all the changes, you can do a Git commit with the message "Bootstrap Grid Part
2" and push your changes to the online repository.

Conclusion

In this exercise, we continued our review of responsive design and the Bootstrap grid system. We
also learnt how to customize using our own CSS classes.

Responsive Design and Bootstrap Grid

System: Additional Resources
PDFs of Presentations
3-Responsive-Design.pdfPDF File

4-Bootstrap-Grid.pdfPDF File

Bootstrap Official Documentation

 Bootstrap Grid System

Responsive Design and Bootstrap Grid Resources

 CSS Flexible Box Layout Module Level 1 (W3C Documentation)

 A Complete Guide to Flexbox
 A Visual Guide to CSS3 Flexbox Properties
  The Bootstrap 4 Grid: What's New?
 How the Bootstrap Grid Really Works
 The Subtle Magic Behind Why the Bootstrap 3 Grid Works (a detailed explanation of why the
Bootstrap grid system works the way it does, a delight to read!)
 What The Heck Is Responsive Web Design? (a short presentation that introduces responsive
web design)
 Beginner’s Guide to Responsive Web Design (simple introduction to responsive web design)
 The 2014 Guide to Responsive Web Design (an updated guide to responsive design)

Peer-graded Assignment: Assignment 1: Bootstrap

and Responsive Design
Submit by Jul 19, 11:59 PM PDT

It looks like this is your first peer-graded assignment.  Learn more

Submit your assignment soon

Even though your assignment is due on Jul 19, 11:59 PM PDT, try to submit it 1 or 2 days early if
you can. Submitting early gives you a better chance of getting the peer reviews you need in time.

1. Instructions
2. My submission
3. Discussions
In this assignment you will add a second page, aboutus.html, to your website. You will make use of
the Bootstrap skills learnt in this module to prepare this web page for integration into the website.

Assignment Resources

aboutus.html.zip

Objectives and Outcomes

In this assignment, you will continue to work with the website that you have been developing in the
exercises. You will add the About Us web page to the website. To get you started, you are provided
with a partially formatted aboutus.html.zip file given above that you need to download, unzip and
move the aboutus.html to the conFusion folder that contains your website. At the end of this
assignment, you should have completed the following tasks:

 Updated the page to make use of Bootstrap classes and Bootstrap grid
 Formatted the contents of the web page using the container, row and column classes
 Use the responsive utilities (hidden-* classes) to enable hiding of the detailed descriptions in
the extra small screen size devices

Assignment Requirements

This assignment requires you to complete the following tasks. Detailed instructions for each task are
given below. The picture of the completed web page included below indicates the location within the
web page that will be updated by the three tasks.

Task 1

In this task you will be updating the aboutus.html page to make use of the Bootstrap classes and
components:

 Update the page to make use of the Bootstrap CSS classes.

 Update the page to also use your custom styles defined in your styles.css file, and
 Update the page to make use of all the Bootstrap JS components.

Task 2

In this task you will be adding appropriate formatting to the web page contents using container, row
and column classes using the Bootstrap grid so that the web page is formatted to look like the figure
given below.

 The "About Us" title should stretch the entire width of the row.
 The "Our History" part should occupy only half the width of the row for small to extra large
screens, leaving space on the right side for more content to be added later. The content should
be stacked for extra small screens.
 The "Corporate Leadership" section should stretch the entire width of the row.
Task 3

In this task you will use some responsive utilities provided by Bootstrap to hide some of the content
only for extra small screens. You will make use of the d-none and d-sm-block CSS classes provided
by Bootstrap. To understand how to use these classes, please read the documentation here (in
particular see how the combination of classes shown here enables you to hide the content for xs
screen sizes) to learn how to apply the d-none and d-sm-block classes. This will get you into the
habit of consulting the Bootstrap documentation whenever you need to learn more about the various
components and classes of Bootstrap. You should apply the classes so that the <p> elements
containing the detailed descriptions of the corporate leadership is hidden only for extra small
screens. Thus, your page should look like the figure below on extra small screens.
 More details about the d-none and d-sm-block CSS classes can be found
at http://getbootstrap.com/docs/4.0/utilities/display/.

While you are at it, please also apply the same classes to the descriptions in the index.html page.
This is not part of the assignment, but should be completed to update your website.

Review criterialess 

Upon completion of the assignment, your submission will be reviewed based on the following
criteria:

Task 1:

 The page is update to correctly use the Bootstrap CSS classes

 The page is updated correctly to use the custom CSS classes from styles.css
 The page has been updated to use the all the necessary JavaScript classes

Task 2:

 The container class has been applied to the content at the correct location.
 Row class, including the row-content class has been applied to the rows of the content. Do
not apply row-content to the row containing the page heading
 Column classes have been appropriately applied to the content within each row to provide
responsive layout of the content.

Task 3:

 The d-none and d-sm-block classes are correctly applied to the content in the Corporate
Leadership section to hide the detailed description of the corporate leaders.

You are required to include two full-page screenshots of your completed web pages, one for normal
screen size, and one for extra small screens. To take a full-page screenshot of your page use the
Chrome extension: Full Page Screen Capture.

1. Instructions
2. My submission
3. Discussions
Project Title *
Please upload the updated aboutus.html file with all the three tasks completed. A reviewer should
easily be able to download your file and substitute it into their own web project and see it working
correctly.

Upload File
Please upload a full-page screenshot of your aboutus.html page for a small-extra large screen size.

Upload File
Please upload a full-page screenshot of your aboutus.html page for extra small screen size.

Upload File

I understand that submitting work that isn’t my own may result in permanent failure of this course or
deactivation of my Coursera account. 

Assignment 1 Resources
Assignment 1 Starter Files

aboutus.html.zip

Assignment 1 Screenshots

aboutus-xs.png

aboutus.png

Bootstrap Resources

 Bootstrap grid

 Bootstrap display utilities (documentation here about the d-none and d-sm-block classes)
Chrome extension

 Full Page Screen Capture.

Ideation: Objectives and Outcomes

The first step in your journey towards the implementation of the Capstone project begins with an
idea. In this module you will develop the idea for your project, the set of expected features, survey
the market to look at similar ideas to enable you to differentiate your project from others, while at the
same time drawing inspiration from them. You are required to submit a formal ideation report
following the structure given in the template. This will enable your peers to provide you feedback and
suggestions for your project.

Before you get started on a project, the first step is to develop the idea for the project. In this module
you will explore how you develop your idea and come up with possible set of features for your
project. At the end of this step you should be able to:

 Clearly express the central idea of your project, and identify the problem being addressed
 Delineate a set of features that you expect your website and app should support
 Identify other projects that might have similar features and would act as exemplars for your
project

Ideation Report Template

Project Title

1. Introduction

 A brief introduction to your website idea. State the goals of the project.
 The values / benefits (tangible and intangible) this application can bring to a
company/organization/end-user.
 2. Expected List of Features

 A brief list of features that you expect your website to support.

 Brief justifications for including these features.

3. Market Survey

 Do a survey of the Web to find about five web sites that might have similar ideas as yours.
 Briefly compare the features of these applications with your application idea.

4. References

 Give references to any material / websites / books etc. relevant to your application idea
 Give the links to the websites relevant to your idea, that you listed in the section above.

Honors Peer-graded Assignment: Ideation

Submit by Jul 19, 11:59 PM PDT

Submit your assignment soon

Even though your assignment is due on Jul 19, 11:59 PM PDT, try to submit it 1 or 2 days early if
you can. Submitting early gives you a better chance of getting the peer reviews you need in time.

1. Instructions
2. My submission
3. Discussions
In this assignment you will be submitting a written report describing the general idea of your project,
the expected list of features and a survey of existing projects, websites and/or apps that are similar
to your ideas and/or have some features similar to your proposed project. The structure of the
written report should adhere to the report template given in this module, and emphasize the points
specified in the template. The written submission needs to be no more than three standard Letter/A4
sized pages.

Review criterialess 
 Your submission will be reviewed based on the following criteria by peers in order to provide you
with constructive feedback on your project idea:

1. Does the Ideation report clearly state the idea of the project and the primary aim and
purpose of the proposed website ?
2. Does the Ideation report list the expected features that will be supported by the website?
3. Did the user provide a survey of related ideas/projects/websites that have some similarities
to the proposed idea?
4. Does the Ideation report provide references to suitable sources in support of the project
idea?

Honors Peer-graded Assignment: Ideation

Submit by Jul 19, 11:59 PM PDT

Submit your assignment soon

Even though your assignment is due on Jul 19, 11:59 PM PDT, try to submit it 1 or 2 days early if
you can. Submitting early gives you a better chance of getting the peer reviews you need in time.

1. Instructions
2. My submission
3. Discussions
Project Title *

Please upload a PDF version of your Ideation report

Upload File

I understand that submitting work that isn’t my own may result in permanent failure of this course or
deactivation of my Coursera account. 
Ideation: Additional Resources
General Resources

 Ideation (creative process)

Volunteer your Services

 VolunteerMatch.org
 Free Code Camp