Become a Frontend Developer

Learn to build websites in 3 months with 1-on-1 help from an engineer
Thinkful logo

The best starting point for beginners.

This course is the best way to create a real portfolio while getting started as an engineer. Working with a professional frontend developer you'll build interactive websites – including an online resume, a clone of Google's homepage and an interactive shopping list – using HTML, CSS, JavaScript and jQuery. Don't know what those are? Don't worry, your mentor will teach you 1-on-1.

You'll master these fundamentals with 1-on-1 guidance from your mentor who is a professional developer. Your mentor will be there to help you when you get stuck, motivate you to finish a challenging project, and keep you on track. You’ll graduate with a full portfolio and a fully-stacked GitHub profile. Even if you’ve literally never coded a single line you can take the course and become a beginner frontend developer.

This course is perfect for:

  • Beginners taking the first steps to become an engineer
  • Visual designers who want to learn to code
  • Anyone that needs to make changes to their website

Chelsea Michaels

Frontend engineer, Thinkful alum

Thinkful provides a setting to learn much more effectively and productively - you don't just learn how to code, but how to think like a developer, use best practices, and apply the knowledge towards real projects.

The best starting point for beginners.

This course is the best way to create a real portfolio while getting started as an engineer. Working with a professional frontend developer you'll build interactive websites – including an online resume, a clone of Google's homepage and an interactive shopping list – using HTML, CSS, JavaScript and jQuery. Don't know what those are? Don't worry, your mentor will teach you 1-on-1.

You'll master these fundamentals with 1-on-1 guidance from your mentor who is a professional developer. Your mentor will be there to help you when you get stuck, motivate you to finish a challenging project, and keep you on track. You’ll graduate with a full portfolio and a fully-stacked GitHub profile. Even if you’ve literally never coded a single line you can take the course and become a beginner frontend developer.

Thinkful provides a setting to learn much more effectively and productively - you don't just learn how to code, but how to think like a developer, use best practices, and apply the knowledge towards real projects.

Chelsea Michaels

Frontend engineer, Thinkful alum

This course is perfect for:

  • Beginners taking the first steps to become an engineer
  • Visual designers who want to learn to code
  • Anyone that needs to make changes to their website

Weekly, 1–on–1 Video Chats with Your Mentor

Learning a new skill is tough, but roadblocks and questions can be overcome with a little help. That's why we created Thinkful and built the largest network of expert mentors who each have an average of five years experience.

Upon enrollment, you'll be matched with a mentor based upon your schedule, goals and interests. You'll meet over email and have a 45-minute live video chat each week.

Office hours. Post questions and get help from mentors in group sessions.

Learn online. You can work through the curriculum anytime, anywhere.

Career Services. Get interview prep and resume critique when you finish.

Build 15 Projects

Hot or Cold

Casey Wilson created this Hot or Cold App the help of her mentor which challenges participates to guess the secret number. It's a great way to review JavaScript functions and scope.

Book Match

Ben Chao created this Quiz App with the help of his mentor to understand JavaScript objects. He built a guessing game where participants match a book description with the right cover.

Capstone Project: Portfolio

Edoe Cohen created this portfolio with the help of his mentor. In this capstone, Edoe made a home for his Thinkful projects, reviewing core concepts like HTML, CSS, and JavaScript along the way.

Frontend Web Development Syllabus

Unit 1

Structure and Style with HTML and CSS

Learn HTML and CSS, including techniques for building responsive websites and essential developer tools such as git and the command line. By the end of the unit, you’ll be able to build attractive, responsive websites from scratch and host them on the web.

Show details Jump to Unit 2

Concepts covered

Concepts covered

HTML, CSS, Git, GitHub, Command Line, Responsive Design, Media Queries

Build Your First Website

Dive into HTML and CSS by building your first website, learning essential concepts in each along the way. You’ll also gain an understanding of how the web works.

Projects and Assignments in this Lesson

1

Introducing HTML

2

Introducing CSS

Build an About Me Page

You’ll now take your HTML/CSS skills to the next level building a complete “About Me” website from scratch. This website will later serve as your portfolio site where you’ll showcase the remainder of your projects.

Projects and Assignments in this Lesson

1

Set Up CodePen

2

Wireframe Your About Me Page

3

Structure Your HTML

4

Build Your Header: Challenge

5

Build Your Header: Walkthrough

6

Position the Header Image: Walkthrough

7

Build the Middle Sections: Challenge

8

Build the Middle Sections: HTML Walkthrough

9

Build the Middle Sections: CSS Walkthrough

10

Build Your Footer: Challenge

11

Build Your Footer: Walkthrough

12

Review of Positioning and Layout Key Points

13

Upgrade the Typography

14

Style Your Page

Build a personal website from scratch with HTML and CSS.

Hack The Times

Projects and Assignments in this Lesson

1

Use Chrome Developer Tools

2

Hack the New York Times: Challenge

Hack into the New York Times homepage and write new headlines.

3

The Command Line

4

Git and Github

Build a Landing Page from Scratch

This lesson reinforces all of the techniques you’ve learned so far to build a more complex website that requires more challenging techniques. Once you’ve finished this project, you’ll be able to look at any layout and deconstruct how it was built, and even build it yourself.

Projects and Assignments in this Lesson

1

Upgrade Sublime

2

Prepare the Landing Page Project

3

Build the Karma Navigation Bar: Challenge

4

Build the Karma Navigation Bar: Walkthrough

5

Construct the Background Image Section: Challenge

6

Construct the Background Image Section: Walkthrough

7

Save Your Progress with GitHub

8

Build the Three-Icon Section: Challenge

9

Build the Three-Icon Section: Walkthrough

10

Build the Karma Footer: Challenge

11

Build the Karma Footer: Walk-through

12

FavIcons and Other Finishing Touches

Create a Responsive Web Page

Learn to make your websites responsive by using media queries. Media queries ensure your sites are functional and attractive on every device, including mobile and tablet. In this lesson you’ll make your portfolio page responsive.

Projects and Assignments in this Lesson

1

Intro to Responsive

2

Make About Me Responsive

3

Submitting Your Portfolio

Unit 2

jQuery

Learn jQuery, a powerful JavaScript library that lets you make your web pages interactive. By the end of the unit, you’ll be able to make websites that a user can interact with by clicking, hovering or submitting information to forms.

Show details Jump to Unit 3

Concepts covered

Concepts covered

jQuery, DOM, Events, Effects and animations

Introducing jQuery

Learn about the DOM (Document Object Model) and how to use jQuery to change specific elements as a user interacts with your website. By the end of the lesson, you’ll be able to change the content in a page based on a user’s interactions without reloading the page.

Projects and Assignments in this Lesson

1

Hello World with jQuery

2

Introducing the Document Object Model

3

Practice jQuery Basics

4

Searching and Traversing the DOM

Manipulating the DOM, Events, and Effects with jQuery

Use jQuery to add, remove, modify, or animate DOM elements. By the end of this lesson, you’ll be building highly interactive webpages, such as our Street Fighter demo.

Projects and Assignments in this Lesson

1

Street Fighter: Project Overview

2

Street Fighter: HTML and CSS Walkthrough

3

Street Fighter: jQuery Events Walkthrough

4

Street Fighter: Animation Walkthrough

5

Street Fighter Project: Challenge

Build a web-based Street Fighter game with jQuery.

Build a Shopping List App

Bring everything you’ve learned together by building a shopping list app where a user can items to a list, remove them, and check them off as a completed. You’ll combine your HTML, CSS, and jQuery knowledge and use all the developer tools you’ve learned so far.

Projects and Assignments in this Lesson

1

Design and Wireframe Your App

2

Create a Non-Interactive Version

3

Complete Your Shopping List App

Build a shopping list that lets a user add, remove, and check off items.

Unit 3

Programming Fundamentals in JavaScript

Master fundamental programming concepts in JavaScript. Build websites with more complex logic and solve programming challenges, such as FizzBuzz, that match problems you might face in programming interviews.

Show details Jump to Unit 4

Concepts covered

Concepts covered

Programming Fundamentals in JavaScript, Variables, Data Types, Control Flow, Scope, Objects and Inheritance, Debugging

JavaScript Basics

Learn control flow, or the ways of dictating the order in which different parts of a program are run. You’ll also build a “FizzBuzz” app to review most of the JavaScript concepts you’ve learned so far.

Projects and Assignments in this Lesson

1

Introduction to Programming

2

Running Code in the JavaScript Console

3

Get to Know JavaScript’s Data Types

4

Numbers and Arithmetic Operators and Comparators

5

Working with Strings

6

Working with Variables

7

Conditionals and Truthiness

8

Loops and Arrays

9

FizzBuzz: Challenge

Build a FizzBuzz app that aces the game every time.

Functions and Scope

Learn to work with functions, sets of code that store behaviors, and to manage scope. Master functional programming as you break down complex problems into small, well-written functions, and call them appropriately.

Projects and Assignments in this Lesson

1

Introduction to Functions

2

Practice Functions

3

FizzBuzz Refactor: Challenge

4

Hot or Cold App: Challenge

Build a guessing game that gives your users hints until they win.

Objects and Object Oriented Programming

Learn about objects, data structures that have identifiers that point to values, and Object Oriented Programming (OOP), a technique that uses objects to model your applications. To practice OOP, you’ll build a quiz app that stores questions and answers, and gives the user feedback based on their answers.

Projects and Assignments in this Lesson

1

Object Basics

2

Deeper into Objects

3

Debugging JavaScript with Developer Tools

4

Design and Wireframe Your Quiz App

5

Create a Non-Interactive Version of Your Quiz App

6

Make Your Quiz App Interactive

Build a multiple-choice quiz app that stores questions and answers and gives your user helpful feedback.

Unit 4

Ajax and Advanced jQuery

Use Ajax to build web pages that make multiple server calls without reloading the page. By the end of the unit, you’ll be able to build highly interactive apps that rely on third-party APIs to power some of their functionality.

Show details Jump to Unit 5

Concepts covered

Concepts covered

Ajax, jQuery, JSON, Callbacks, APIs

Working with AJAX

Make asynchronous calls to a database, learn about callbacks, and practice updating the DOM with that data. Work with JSON to trasnmit and receive JavaScript objects.

Projects and Assignments in this Lesson

1

Intro to APIs

2

Coding with APIs

3

Exploring the API Data

4

Showing the API Data

5

Thinkful Tube: Challenge

StackOverflow Reputation Builder

Build a more complex app to reinforce the practice of making AJAX calls and updating the DOM based on the response data.

Projects and Assignments in this Lesson

1

Reputation Builder: Walkthrough

2

“Get Inspired” Feature

Build an app where users can enter a coding topic they’re interested in and see unanswered questions for that topic on StackOverflow.

API Hack

Projects and Assignments in this Lesson

1

Choosing an API

2

Sketching your Project

3

Prototype your App

4

Integrate an API

Polishing your Portfolio

Complete your portfolio site, linking to every project you’ve built so far and adding a brief description of your learning journey so far.

Projects and Assignments in this Lesson

1

Finishing your Portfolio

2

What to learn next

3

Exit Interview

Josh Milo

Frontend engineer,
Thinkful alum

I just want to say thanks to you guys and the hard work that you've done. I recently got a job as a frontend developer at Portent Interactive and it's great.

Enroll in Frontend Web Development

Create a Portfolio

Build 15 projects with the guidance of your mentor.

1-on-1 Mentorship

Weekly video sessions and daily class office hours.

At Your Own Pace

Complete in 3 months if you study 10-15 hours per week.

Affordable Tuition

Only $300 per month.

Class starts February 4th

$300per month

If you're unsatisfied in the first 2 weeks, receive a full refund.

Common Questions

  1. Are there prerequisites for this course?

    Just a strong desire to learn. This course is perfect for an absolute beginner.

  2. Will I be able to work on my own website?

    Yes! But first be sure to nail the fundamentals. The best way of getting there is to complete the projects in the course. You’ll have ample time to work with your mentor on your own project toward the end of the course.

  3. Who owns the projects I build?

    We take no claim over your work. The projects you build are entirely your own.

  4. Will this course cover responsive design?

    Yup, you’ll learn the fundamentals of responsive design as well as wireframing new websites. It's all included in Unit 1.

  5. I already have a bit of experience with HTML and CSS. Can I skip Unit 1?

    Sure! We suggest you complete the same projects because you'll learn more that way and if you really know it you'll breeze through them anyway.

  6. Will I need to purchase any special hardware or software?

    If you have a computer with internet access you're all set. In the course, you’ll get help installing and using all necessary development tools, including Sublime Text, git, and GitHub.

  7. What if Thinkful isn't right for me?

    You’ll receive a full refund if you withdraw in the first two weeks. You can also pause or cancel your enrollment at any time before the next month's payment. We understand that life sometimes gets in the way.

Talk to Nora today

Nora, your Education Advisor, is ready to answer questions and discuss your goals.

Schedule a Call
Email Nora

Choose Your Course