• 1. Area of Study
    Business
    Beauty
    Creative
    Animal Care
    Education
    Finance
    Trades
    Health
  • 2. Online / On-Campus
    * Optional
  • 3. Qualification
    * Optional

Front End Web Development

Provided by General Assembly

Course Overview

lead form graphic Want to learn more ?

Simply fill in the details and you'll receive a PDF Info Sheet that outlines pay-rates, employment rates and more. Good Luck!

Learn More Now

This course is designed to give you all the skills necessary in the ever changing world of front-end web development.

You'll be introduced to industry standard technology such as HTML5, CSS3, JavaScript, jQuery, GitHub, and Sublime. Whats more your instructors will be industry professionals so you're well versed in the skills needed to become a front-end web developer. They'll teach you the frameworks, tools, vocabulary and best-practise to get you up to speed.

You'll actually build a fully responsive, interactive website so you can learn a real world example and put your newfound skills to the test.

Check out the subjects below to get a more detailed view of what you'll learn in this course.

Course Quick Look

Awarded By:
General Assembly
Qualification:
Other
Study Mode:
On-Campus
Duration:
10 Weeks Part Time
Nationally Recognised:
NO

Career Outcomes

Subjects

Unit 1: The Basics

HTML Basics

  • Apply HTML tags: <head>, <link>, <script>, <style>, <meta> to web pages
  • Apply tags to HTML documents to effectively section content
  • Differentiate between the various image file types
  • Predict image paths and apply relative paths to img src tags
  • Describe how the Internet delivers web pages to the browser

CSS Basics

  • Apply and explain the CSS “cascade” including: importance, specificity and inheritance
  • Differentiate between basic web color principles: RGB, RGBA, hexadecimal color and HSL
  • Experiment with CSS properties and values to change the styling of a page

Advanced CSS

  • Define CSS Box Model, and demonstrate the ability to properly manipulate the "box" around tags
  • Differentiate between classes vs IDs and apply best practices when implementing
  • Select nested elements to apply styling

Page Layout

  • Draw the DOM Tree for web pages containing sections <div>, <section>
  • Apply header, footer, sidebar, and multi-column layouts to develop a web page
  • Experiment and predict effects of floats and clearing CSS positioning
  • Describe the use of Normalize and reset.css files

HTML/CSS Lab

  • Practice web development by transforming a design comp into an HTML and CSS web page

Introduction To Programming

  • Practice programmatic thinking by writing pseudo code to solve a basic problem
  • Define web site behavior and the practical uses of JavaScript
  • Predict DOM output / changes by reading JS code

JavaScript Basics (Variables, Conditionals)

  • Define variables and identify best cases to use them
  • Differentiate between strings, integers and floats
  • Apply conditionals to change the programs control flow
  • Describe arguments as they relate to functions
  • Apply the JS click function

JavaScript Functions

  • Describe arguments as they relate to functions
  • Predict values returned by a given function
  • Differentiate between named and anonymous functions

Intro To jQuery

  • Utilize jQuery tree traversal techniques to access and manipulate DOM elements
  • Utilize jQuery Docs to apply functions

Arrays and Traversing The DOM

  • Apply JS and jQuery knowledge to program a carousel
  • Define arrays and collections
  • Practice using indexes to access array elements

Unit 2: Building In Concert

Lab Session

  • Apply programming skills to plan and build a full website with HTML/CSS and JS

Review and Refactor

  • Apply switch blocks as a replacement for if/else if/else
  • Describe the concept of "this" as it applies within jQuery anonymous functions
  • Define refactoring and describe why it is important
  • Learn the basics of CSS/JS refactoring and be able to apply these concepts to their own code
  • Differentiate ways to debug code and how to apply the concepts to their own code

Responsive Web Design

  • Articulate that responsive design is more design than code
  • Know the difference between fixed and responsive layouts and understand the difference between fluid and elastic layouts
  • Apply media queries to web sites to achieve a responsive layout
  • Implement media queries to change layout on mobile devices

Web Forms

  • Understand what the form tag is used for and what the method, action, and enctype attributes are used for
  • Be able to differentiate the different types of inputs and why/where we would use each
  • Understand how to group elements by name
  • Be able to perform pseudo-styling of input elements that the browser won't let us directly style

Special Topic

  • Instructor and student choice

Payment Options

Pay upfront