FRONT END DEVELOPMENT

OVERVIEW

This is a first level course and many prefer to start at user interface programming. In this course you will learn common scripts used to build a user interface for all kinds of apps. The course covers HTML, CSS, Bootstrap and JavaScript. This course is followed by second level course in ReactJS  or Angular.   Starting with front end development will give you a richer and more enjoying product than backend development.

Instructors simplify learning by guiding students through practical examples demonstrating on the job best practice and simplest solutions. The course is 100% “Hands On”! Practice makes perfect with proper guidance!

Audience profile

Students and young professionals with zero programming or backend only programming knowledge and want to broaden their knowledge to front end development. Also, youngsters who know web design using the WordPress platform and want to advance to scripting and modifying websites interface. This course will get you started as a professional web developer while some prefer to not learn backend programming at all and develop only user interfaces.

COURSE OUTLINE

HTML & CSS Introduction
  • About Integrated Development Environment -IDE
  • HTML document structure
  • HTML elements – div and span
  • HTML elements – i, b, p, and a
  • HTML elements – ul, li, and ol
  • HTML elements – header and footer
  • HTML elements – section, main, and article
  • HTML elements – h1-h6 and aside
  • HTML tables
  • Targeting color and background
  • Element specificity
  • ID targeting, margin, and border
  • Padding, margin, and float
  • Max-width and background-image
  • Switching over to an IDE
  • Font weight, style, and family
  • Text decorations
  • Text spacing
  • Text decoration modification
  • Text shadow
HTML & CSS Advanced
  • Images
  • Forms
  • Inputs
  • Checkboxes
  • Radio buttons
  • Select, option, and buttons
  • HTML5 videos
  • HTML5 audio
  • Doctypes
  • Meta tags
  • Psuedo-states
  • Border radius
  • Positions
  • Psuedo-elements
  • Z-index
  • Viewpoint width and height, overflowing content
  • Transition property
Bootstrap
  • Bootstrap setup
  • Navigation menu
  • Forms
  • Buttons
Project: Response design
  • Home page
  • List of services
  • Single services detailed page
  • Contact page
Project: Create a landing page or simple website
  • Adding a bootstrap navigation menu
  • Adding a slider
  • Photo gallery with filtering
  • Contact form
  • Google Map
  • Google Fonts, Font Awesome Icons …etc
JavaScript
  • Intro to JavaScript
  • Alerts and console logging
  • Integers, strings, and variables
  • Undefined variables and modifying values of variables
  • Boolean operators
  • Comparing values
  • If statements
  • For loops
  • Defining functions
  • Event handling
  • Setting an elements innerHTML
  • Arrays
  • Textareas and getting the value of inputs
  • Functions – parameters and return values
  • Multiple parameters in functions
  • Flexible function parameters
  • Exercise – find the missing number
  • Exercise solution
  • Classes explained
  • CRUD operations with mock API
Project: Create an application
  • Creating an application using knowledge attained from this course

PREREQUISITES

There are no prerequisites!

PURCHASE