This 10 week, instructor-led, course is targeted to learners who would like to develop skills in front-end web technologies. The course is targeted primarily to individuals looking to learn or advance their skills in HTML5, CSS3, JavaScript and front-end frameworks utilized in developing web applications. In this fast-paced, project-based, 10-week course you will learn new skills for web application front-end design and development. This innovative approach supports a new accelerated learning model approach, where a learner will participate in an intensive training course over the period of 10 weeks. This coding bootcamp will teach participants with minimal to no IT backgrounds how to write computer code on an accelerated time frame. Students will complete 60 instructional hours and receive a letter of completion.
- Understand the fundamental concepts of web application front-end design
- Build webpages that look good (using HTML5, CSS3 and JavaScript)
- Apply CSS for the layout and design of the website and JavaScript and jQuery to make the website interactive
- Learn how responsive design targets desktops, mobiles, tablets and other devices
- You will be able to convert an image from a graphic designer into a functioning website with HTML and CSS.
Website are created with HTML and we use CSS to make it shine. So we'll take what you've learned during the pre-work and learn more about HTML and add some color. By the end of the week you will have built a simple webpage that actually look good. We'll also lay the groundwork so you know fundamental web development concepts.
Objectives
- 1.1 Demonstrate HTML Basic Concepts
- 1.2 Describe Sublime Text Basics
- 1.3 Demonstrate HTML Nesting
- 1.4 Demonstrate HTML Attributes
- 1.5 Demonstrate CSS Basic Selectors
- 1.6 Explain Wordpress Basics
You thought you knew HTML and CSS but we're just getting started. We'll explain the box model, flows, floats, positioning and patterns. You'll use Chrome Web Inspector to improve your site.
Objectives
- 2.1 Explain CSS Basic Properties
- 2.2 Explain Basic HTTP Concepts
- 2.3 Demonstrate Unix Basics
- 2.4 Demonstrate Git Basics
- 2.5 Create Wordpress Posts
This week we look at the skills needed to work as a team using git. We will also learn more about CSS and use the developer tools found in browers. This will help us design for different browsers and devices.
Objectives
- 3.1 Demonstrate Github Collaboration Basics
- 3.2 Demonstrate Chrome DevTools Basics
- 3.3 Explain CSS Default Behavior
- 3.4 Demonstrate Basic CSS Selector Strategies
- 3.5 Demonstrate Responsive Web Design
- 3.6 Use Web Fonts
| Details | Map | |
|---|---|---|
| Live Lecture | [GitHub and Collaboration](https://github.com/RockitBootcamp/Student-Resources/blob/master/Misc/Git/02 GitHub and Collaboration) (1hr) | 3.1 |
| Live Lecture | [Chrome DevTools](https://github.com/RockitBootcamp/Student-Resources/blob/master/Misc/Workflow/02 Chrome DevTools) (0.5hr) | 3.2 |
| Live Lecture | [CSS Defaults](https://github.com/RockitBootcamp/Student-Resources/blob/master/CSS/03 Defaults) (1hr) | 3.3 |
| Live Lecture | [Basic Selector Strategy](https://github.com/RockitBootcamp/Student-Resources/blob/master/CSS/04 Basic Selector Strategy) (1.5) | 3.4 |
| Live Lecture | [Responsive Web Design](https://github.com/RockitBootcamp/Student-Resources/tree/master/CSS/13 Responsive Design), Fonts, Typography (1.5) | 3.5, 3.6 |
| Group Project | Complete Team Github | 3.1 |
| Individual Project | Complete the [Design a page](https://github.com/RockitBootcamp/Student-Resources/tree/master/CSS/04 Basic Selector Strategy/design-a-page) | 3.4 |
| Individual Project | Complete the [Responsive Page](https://github.com/RockitBootcamp/Phoenix/tree/master/Projects/CSS Responsive) | 3.2, 3.5, 3.6 |
With HTML5 we have new tags and new concepts. We'll discuss these topics and learn how to apply them. We will also start to give our sites behavior by adding a bit of JavaScript. You will also create a blog using a the popular Jekyll framework.
Objectives
- 4.1 Explain HTML Semantic Tags
- 4.2 Demonstrate HTML Form Basics
- 4.3 Demonstrate HTML Form Validation
- 4.4 Create Jekyll Blog
- 4.5 Demonstrate JavaScript Basics
- 4.6 Describe JavaScript Data Types
- 4.7 Explain Jekyll Content
| Details | Map | |
|---|---|---|
| Live Lecture | [HTML Semantic Tags](https://github.com/RockitBootcamp/Student-Resources/blob/master/HTML/04 Semantic Tags) (0.5hr) | 4.1 |
| Live Lecture | [HTML Form Basics](https://github.com/RockitBootcamp/Student-Resources/blob/master/HTML/05 Form Basics) (0.75hr) | 4.2 |
| Live Lecture | [HTML Form Constraint Validation](https://github.com/RockitBootcamp/Student-Resources/blob/master/HTML/06 Form Constraint Validation) (0.75hr) | 4.3 |
| Live Lecture | [Getting Started with Jekyll](https://github.com/RockitBootcamp/Student-Resources/blob/master/Jekyll/01 Install and Basic Concepts) (1hr) | 4.4 |
| Live Lecture | [JavaScript Basic Concepts](https://github.com/RockitBootcamp/Student-Resources/blob/master/JavaScript/01 Basic Concepts) (0.75) | 4.5 |
| Live Lecture | [JavaScript Data Types](https://github.com/RockitBootcamp/Student-Resources/blob/master/JavaScript/02 Data Types) (0.75) | 4.6 |
| Live Lecture | [Jekyll Content](https://github.com/RockitBootcamp/Student-Resources/blob/master/Jekyll/02 Templates and Markdown) (1hr) | 4.7 |
| Individual Project | Complete the [HTML Forms](https://github.com/RockitBootcamp/Phoenix/tree/master/Projects/HTML Forms) | 4.1-4.3 |
| Individual Project | Complete the Sunday Chores project | 4.5, 4.7 |
| Individual Project | Complete the [Jekyll Blog project](https://github.com/RockitBootcamp/Phoenix/tree/master/Projects/Jekyll Blog) | 4.4, 4.7 |
This week we dive into the heart of JavaScript and learn how to reuse code with functions. We will also see how to customize and deploy our Jekyll blog.
Objectives
- 5.1 Demonstrate JavaScript Basic Operator
- 5.2 Demonstrate JavaScript Object Literals
- 5.3 Explain Anonymous Functions
- 5.4 Create User Defined Functions
- 5.5 Demonstrate Jekyll Customization
- 5.6 Demonstrate JavaScript Basic Logic
- 5.7 Use JavaScript Built-in Methods and Properties
- 5.8 Demonstrate Jekyll Deployment
| Details | Map | |
|---|---|---|
| Live Lecture | [JavaScript Basic Operators](https://github.com/RockitBootcamp/Student-Resources/blob/master/JavaScript/03 Basic Operators) (0.5hr) | 5.1 |
| Live Lecture | [JavaScript Object Literals I](https://github.com/RockitBootcamp/Student-Resources/tree/master/JavaScript/05 Objects I) (0.5) | 5.2 |
| Live Lecture | [Callback and Anonymous Functions](https://github.com/RockitBootcamp/Student-Resources/blob/master/JavaScript/06 Callback and Anonymous Functions) (0.5) | 5.3 |
| Live Lecture | [JavaScript User Defined Functions](https://github.com/RockitBootcamp/Student-Resources/blob/master/JavaScript/04 User Defined Functions) (1hr) | 5.4 |
| Live Lecture | [Jekyll Customization](https://github.com/RockitBootcamp/Student-Resources/tree/master/Jekyll/01 Install and Basic Concepts) (0.5hr) | 5.5 |
| Live Lecture | [JavaScript Basic Logic](https://github.com/RockitBootcamp/Student-Resources/blob/master/JavaScript/08 Basic Logic) (1.5hr) | 5.6 |
| Live Lecture | [Built-in Methods and Properties](https://github.com/RockitBootcamp/Student-Resources/tree/master/JavaScript/09 Built-in Methods and Properties) (0.5) | 5.7 |
| Live Lecture | [Jekyll Deployment](https://github.com/RockitBootcamp/Student-Resources/tree/master/Jekyll/04 Deployment) (1hr) | 5.8 |
| Individual Project | Complete the Functions Project | 5.1-5.4 |
| Individual Project | Complete the Elevator Project | 5.6, 5.7 |
| Individual Project | Complete the [Jekyll Deployment Project](https://github.com/RockitBootcamp/Phoenix/tree/master/Projects/Jekyll Blog) | 5.5, 5.8 |
This week we learn how to use jQuery to manipulate the DOM. We also learn important aspects of CSS that will allow us to design amazing websites.
Objectives
- 6.1 Explain the layers of the box model
- 6.2 Demonstrate Collapsing Margins
- 6.3 Demonstrate Float Syntax
- 6.4 Explain float clearing approaches
- 6.5 Demonstrate common jQuery Methods
- 6.6 Demonstrate Document Readiness with jQuery
| Details | Map | |
|---|---|---|
| Live Lecture | CSS Box Model (1hr) | 6.1, 6.2 |
| Live Lecture | CSS Resets (1hr) | 6.x |
| Live Lecture | CSS Flex and Floats (1hr) | 6.3, 6.4 |
| Live Lecture | jQuery Basics (1hr) | 6.5, 6.6 |
| Individual Project | Complete the [CSS Media Objects Project](https://github.com/RockitBootcamp/Phoenix/tree/master/Projects/CSS Media Objects) | 6.1-4 |
| Individual Project | Complete the jQuery Basics Exercise | 6.5-6 |
We will take a look at how we can use JavaScript to inspect and manipulate the DOM. We will also fetch data to include in our page.
Objectives
- 7.1 Demonstrate
documentmethods to fetchelements - 7.2 Demonstrate
elementmethods and properties - 7.3 Demonstrate array creation syntax
- 7.4 Demonstrate working with arrays
- 7.5 Demonstrate JavaScript loops (while, for, for-in, forEach)
- 7.6 Demonstrate jQuery's
$.ajax()methods
| Details | Map | |
|---|---|---|
| Live Lecture | JavaScript DOM and Document Methods (1hr) | 7.1-2 |
| Live Lecture | JavaScript Arrays (1hr) | 7.3-4 |
| Live Lecture | JavaScript Loops (1hr) | 7.5 |
| Live Lecture | JavaScript Ajax (1hr) | 7.6 |
| Individual Project | Complete the [Manipulate the Dom Project](https://github.com/RockitBootcamp/Phoenix/tree/master/Projects/JavaScript DOM) | 7.1-5 |
| Individual Project | Complete the [jQuery Twitter Project](https://github.com/RockitBootcamp/Phoenix/tree/master/Projects/jQuery Twitter v1) | 7.1-6 |
This week we tackle reusing code and data with Objects. We also hook into the DOM to make Websites that react to user interaction.
Objectives
- 8.1 Demonstrate Object Literal Creation Syntax
- 8.2 Use Object Properties
- 8.3 Use
thisto access parts of an object - 8.4 Demonstrate a jQuery events with
.on()method and with event's specific method:
| Details | Map | |
|---|---|---|
| Live Lecture | JavaScript Truthy vs Falsy (See video) (0.25hr) | 8.x |
| Live Lecture | JavaScript Objects I (1hr) | 8.1-2 |
| Live Lecture | JavaScript Objects II (1hr) | 8.3 |
| Live Lecture | JQuery Events (1hr) | 8.4 |
| Individual Project | Complete the [JavaScript Objects project](https://github.com/RockitBootcamp/Phoenix/tree/master/Projects/JavaScript Objects) | 8.1-3 |
| Individual Project | Complete the [jQuery ToDo project](https://github.com/RockitBootcamp/Phoenix/tree/master/Projects/jQuery ToDo) | 8.4 |
So far we have used data we control. This week we will look at api's offered by other companies and incorporate it into our pages.
Objectives
- 9.1 Fetch data from External Sites
| Details | Map | |
|---|---|---|
| Live Lecture | JavaScript Working with Different API's (2hr) | 9.1 |
| Individual Project | Continue working on the [jQuery ToDo project](https://github.com/RockitBootcamp/Phoenix/tree/master/Projects/jQuery ToDo) | 8.4 |
In this final week we will take everything we have learned and create our own project using HTML, CSS, Jekyll, to fetch external data and host it on Github Pages.
Objectives
- Develop Final Project
- Showcase Final Project
| Details | Map | |
|---|---|---|
| Lab Time | Work on Final Project (3hr) | 10.1 |
| Live Lecture | Final Project Readout (3hr) | 10.2 |