Front End Development

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.

Register Now

Course Details

  • 🕒 Schedule: Twice a week, evenings only

  • ⏱️ Duration: This course is 45 hours from 2.5 hours each session.

  • 💶 Price: €300

  • 👨‍🏫 Format: Instructor-led, hands-on training

  • 📦 Includes: This course includes a project coded by the students and the instructor.

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 and more

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
Back to Course List

Ready to get started?

Get in touch

Contact Us