Front End Web and Mobile

Development Bootcamp Syllabus

Learn front-end and hybrid mobile

development.
The three courses in this Bootcamp cover front-end frameworks: Bootstrap and React. You’ll also
learn to create hybrid mobile applications, using the React Native. Learners enrolling in this
Bootcamp are expected to have prior working knowledge of HTML, CSS and JavaScript.

3 Courses Project Portfolio Certificate

At a structured pace, with the Develop a restaurant website Showcase your
support of a dedicated throughout the bootcamp, accomplishment after each
Instructor and classroom and work on your own project course and the end of the
environment. in groups or 2-3 students. Bootcamp.

Page 1 of 10
v4 (May 2020)
Front-End Web UI Frameworks and
Tools: Bootstrap
Commitment

5 weeks of study, 8-10 hours/week

About the Course

This course will give you an overview of client-side web UI frameworks, in particular Bootstrap 4.
You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You
will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and
NPM and task runners like Grunt and Gulp.

At the end of this course, you will be able to

a) Set up, design and style a web page using Bootstrap 4 and its components,
b) Create a responsive web page design, and
c) Make use of web tools to setup and manage web sites.

Page 2 of 10
v4 (May 2020)
WEEK 1

Front-end Web UI Frameworks Overview: Bootstrap

This module gives you a quick introduction to full-stack web development and the outline of the
course. Then you will learn the basics of Bootstrap, setting up a web project using Bootstrap. You
will learn about responsive design and the Bootstrap grid system. At the end of this module, you
need to complete your first assignment.

WEEK 2

Bootstrap CSS Components

This module concentrates on Bootstrap's components that are designed using pure CSS classes.
You will learn about Navigation and Navigation bar. Then, you will learn about buttons, forms, tables,
cards, images and media, tags, alerts and progress bars. At the end of this module you need to
complete your second assignment.

WEEK 3

Bootstrap JavaScript Components + JavaScript Review 1

This module concentrates on Bootstrap's JavaScript based components. You will learn about tabs,
pills and tabbed navigation, collapse, accordion, scrollspy, affix, tooltips, popovers, modals and the
carousel. At the end of this module you need to complete the third assignment.

WEEK 4

Web Development Tools + JavaScript Review 1

This module rounds out our discussions on Bootstrap JavaScript components. Then we discuss
CSS preprocessors, Less and Sass. Finally, we discuss building and deployment of our Web

Page 3 of 10
v4 (May 2020)
projects through task automation using NPM scripts, and task runners like Grunt and Gulp. The final
assignment of this course needs to be completed at the end of this module.

WEEK 5

Portfolio Project + JavaScript Advanced

This week, you will aim to complete your Bootstrap Portfolio Project, or as much of it as
possible. You will also write a final report about your Portfolio Project, and you will share both
your project and the report during the end-of-week workshop. Alongside this, you will begin to
learn more advanced concepts in JavaScript, to help you prepare for the next course of your
bootcamp, React.

Page 4 of 10
v4 (May 2020)
Front-End JavaScript Frameworks:
React
Commitment

5 weeks of study, 14-20 hours/week

About the Course

This course explores Javascript based front-end application development, and in particular the
React library. This course will use JavaScript ES6 for developing React application. You will also get
an introduction to the use of Reactstrap for Bootstrap 4-based responsive UI design. You will be
introduced to various aspects of React components. You will learn about React router and its use in
developing single-page applications. You will also learn about designing controlled forms. You will
be introduced to the Flux architecture and Redux. You will explore various aspects of Redux and use
it to develop React-Redux powered applications. You will then learn to use Fetch for client-server
communication and the use of REST API on the server side. A quick tour through React animation
support and testing rounds off the course. You must have preferably completed the previous course
in the specialization on Bootstrap 4, or have a working knowledge of Bootstrap 4 to be able to
navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly
recommended.

At the end of this course you will:

a) Be familiar with client-side Javascript application development and the React library
b) Be able to implement single page applications in React
c) Be able to use various React features including components and forms
d) Be able to implement a functional front-end web application using React
e) Be able to use Reactstrap for designing responsive React applications
f) Be able to use Redux to design the architecture for a React-Redux application

Page 5 of 10
v4 (May 2020)
WEEK 1

Introduction to JavaScript ES 6

In this module you are introduced to the latest JavaScript evolution and how Typescript supplements
the language with string typing and additional debugging capabilities.

WEEK 2

Introduction to React

In this module we get a quick introduction to front-end JavaScript frameworks and libraries, followed
by an introduction to React. We will also learn about React components and JSX.

WEEK 3

React Router and Single Page Applications

In this week, you will learn about various component types. You will learn about React router and its
use in designing single page applications. You will also learn about single page applications and use
React Router to design single page applications.

WEEK 4

React Forms, Flow Architecture and Introduction to Redux

In this module you will be introduced to uncontrolled and controlled forms and briefly examine form
validation in React applications. You will get an overview of the Flux architecture and introduced to
Redux as a way of realizing the flux architecture.

Page 6 of 10
v4 (May 2020)
WEEK 5

More Redux and Client-Server Communication

In this module you will explore Redux further including Redux action, combining reducers, and
Redux thunk, client-server communication using Fetch and the REST API. You will get a brief
introduction to animation in React. You will also learn about testing, building and deploying React
applications.

Page 7 of 10
v4 (May 2020)
Multiplatform Mobile App Development
with React Native
Commitment

4 weeks of study, 14-20 hours/week

About the Course

This course focuses on developing truly cross-platform, native iOS and Android apps using React
Native and the Expo SDK. React Native uses modern JavaScript to get truly native UI and
performance while sharing skills and code with the web. You will learn about UI development with
React Native UI and layout support and access the native mobile platform's capabilities from
Javascript using the Expo SDK. You should have already completed the Bootstrap 4 and the React
courses in this specialization before proceeding with this course.

At the end of this course you will be able to:

a) Build mobile applications targeting multiple platforms with a single codebase,

b) Leverage your HTML5, CSS, JavaScript and React skills, and
c) Use various features of the React Native and Expo SDK to build hybrid mobile applications
d) Use Redux to design the architecture for a React-Redux application

WEEK 1

Hybrid Mobile App Development Frameworks: An Introduction

This module introduces you to hybrid mobile application development. You will learn about React
Native and explore some of the features of React Native to implement a mobile app based on the
React application that was implemented in the previous course on React.

Page 8 of 10
v4 (May 2020)
WEEK 2

React Native UI Elements and Redux

This module introduces you to various React Native UI elements. We will look at how we can make
use of these elements in designing the various views of our application. You will get an overview of
the Flux architecture and introduced to Redux as a way of realizing the Flux architecture.

WEEK 3

React Native Alerts, Animations, Gestures, and Persist Redux Store

In this module we look at enhancing the user experience through the use of animations and support
for gesture-based interaction. We also look at persisting the redux state, and alerting the users.

WEEK 4

Accessing Native Capabilities of Devices: The Expo SDK

In this module you will explore the Expo SDK that enables you to access the native capabilities of
the mobile devices. You will use a few SDK APIs in order to understand the general concepts and
the patterns for using these APIs within your React Native application.

Page 9 of 10
v4 (May 2020)
Project Portfolio
Commitment

Self-driven and in groups, 4-8 hours/week for the duration of the Bootcamp

About the Project Portfolio

This Bootcamp offers a structured path for you to develop a fully functional and feature rich project
portfolio. You will be asked to start with identifying the project you would like to build, based on a
market analysis of needs, and will quickly move to a prototyping phase. With every new course and
technology, you will improve your project to make it more responsive, data-driven, mobile-friendly
and finally connect it with a back-end and host it on a cloud platform.

You will be invited to work in groups and offered a weekly rhythm to progress.

Page 10 of 10
v4 (May 2020)