Web Design and Development

    You are here:  
  1. Home
  2. Training
  3. Web Design and Development

Web Design and Development

Course Objectives:

An interactive, smooth and easy to access website can hold audience longer than a complicated code stuffed non creative website. For every website good numbers of customer traffic is the main object and each minute visitors stay on the website counts, it means the longer visitors stay the more it causes good rank for the website. Basically the main reason behind the huge demand for a web designer over a web developer, ignoring the fact that the first one can be a non-technical person, is to keep the front end design eye catchy and easily accessible.

Course outline:

01: Think​ ​about​ ​a​ ​website.​ ​Make​ ​a​ ​skeleton​ ​by​ ​using​ ​Wireframing​ ​tools

  1. Introduction to web design
  2. Static Dynamic Website
  3. How Web Work?
  4. What Is Wireframing?
  5. Wireframing Tools.
  6. Course Module Overview

02: Creating​ ​startup​ ​package​ ​and​ ​upload​ ​it​ ​to​ ​google​ ​drive

  1. Website Designing Tools
  2. IDE vs Code Editor
  3. HTML and Browsers
  4. File Extension
  5. Creating a HTML File
  6. Arranging files and making a startup package

03: Creating​ ​a​ ​web​ ​page​ ​with​ ​proper​​  HTML​ ​Syntax

  1. HTML Syntax
  2. Basic Structure (Head and Body Section)
  3. HTML Tags
  4. HTML Elements
  5. HTML Attributes
  6. HTML Typography
  7. HTML Block vs Inline Element
  8. Commenting in HTML

04: Creating​ ​a​ ​table

  1. HTML LIsts
  2. HTML Table
  3. Table Head and Body Contents
  4. Table Caption
  5. Attributes of Table
  6. Table Row and Column

05: ​Creating​ ​a​ ​register​ ​form​ ​that​ ​requires​ ​every​ ​form​ ​elements

  1. Introduction to HTML Form
  2. From Elements
  3. Input Types and Attributes
  4. Form Validations
  5. GET vs POST Method
  6. Form Arrangement (Fieldset)

06: ​Creating​ ​a​ ​webpage​ ​where​ ​image,​ ​audio,​ ​video​ ​and​ ​gif​ ​animation​ ​will​ ​be embedded

  1. HTML Media Elements
  2. Different Types of Images
  3. Audio and Video Controlling
  4. Iframe in HTML
  5. Embedded Video from Youtube

07: ​Create​ ​a​ ​Semantic​ ​Layout

  1. HTML5 Semantic Elements
  2. Brief Discussion on HTML5 API
  3. HTML Review

08: Creating​ ​and​ ​linking​ ​a​ ​CSS​ ​file​ ​and​ ​implement​ ​important​ ​properties

  1. Introduction to CSS (Cascading Style Sheet)
  2. CSS Rule set
  3. How to Link CSS
  4. Inline
  5. Internal
  6. External
  7. CSS Specificity
  8. Introduction to CSS Selectors
  9. HTML DOM Tree
  10. Universal Selector
  11. Type Selector
  12. Attribute Selectors

09: Creating​ ​an​ ​external​ ​css​ ​file​ ​and​ ​change​ ​HTML​ ​view​ ​styling​ ​with​ ​selectors

  1. Pseudo Partes
  2. Pseudo Elements
  3. Child and Adjacent Selectors
  4. ID vs Part Selectors

10: ​Create​ ​a​ ​basic​ ​web​ ​layout

  1. CSS Box Model
  2. Margin
  3. Padding
  4. Border
  5. Content
  6. Different Box Model Properties
  7. Styling List

11: ​Creating​ ​a​ ​website​ ​with​ ​actual​ ​positioning

  1. Introduction to CSS Layout
  2. Floats
  3. Positioning
  4. Practical Positioning Example
  5. Flex

12: Creating​ ​a​ ​menu​ ​with​ ​icons.​ ​Styling​ ​text​ ​and​ ​fonts

  1. Creating Menu in CSS
  2. Styling Text
  3. Working with Web Fonts and Icons
  4. Styling fonts and icons
  5. Input box Styling

13: Creating​ ​a​ ​website​ ​with​ ​image/color​ ​backgrounds​ ​and​ ​transition,​ ​transformation effects

  1. Introduction to lovable CSS (Some CSS3 Properties
  2. Border and Rounded Corners
  3. Working with Background
  4. Gradient and Shadow
  5. Transition and Transformation
  6. CSS Animation

14: A Complete Web Page Using HTML5 and CSS3

15: Implementing​ ​css​ ​property​ ​with​ ​Sass

  1. Introduction to Sass
  2. Installing Sass and Sass Compiler
  3. Folder Structure
  4. Variable
  5. Mixins

16: Implementing​ ​css​ ​property​ ​with​ ​Sass

  1. Types
  2. Nesting and Scope
  3. Operator
  4. Function
  5. Extend

17: Installing​ ​bootstrap​ ​and​ ​create​ ​a​ ​grid​ ​for​ ​web​ ​layout

  1. Introduction to Bootstrap Framework. (BS)
  2. How to Install BS
  3. BS Grid System
  4. Understanding Device Screen Size
  5. BS Typography

18: create​ ​a​ ​form​ ​for​ ​web​ ​site

  1. BS Table
  2. BS Form

19: ​create​ ​a​ ​Card​ ​for​ ​web​ ​site

  1. BS Navigation
  2. BS Button
  3. BS Pagination
  4. BS Image Responsive
  5. Bs Card

20: ​Complete​ ​a​ ​webpage​ ​with​ ​Bootstrap

  1. BS Carousel
  2. BS Accordion
  3. BS Modal
  4. BS Tab and Tooltip

21: Enable​ ​a​ ​website​ ​for​ ​mobile​ ​responsive​ ​view

  1. Overview of Responsive Web Design (RWD)
  2. Working with Viewport

22: Converting​ ​PSD​ ​to​ ​HTML

  1. What is Photoshop?
  2. Basic Concept of Photoshop.
  3. How to Use Photoshop tools?
  4. PSD Fonts, Color and Layer Concept.
  5. Image Trimming in Photoshop

23: Converting Multipurpose Business PSD Template to HTML

24: Playing​ ​with​ ​Javascript​ ​syntax

  1. Introduction to JavaScript. (JS)
  2. What you can do with JavaScript?
  3. Js Basic Syntax
  4. Variable in JS
  5. Operator, Data Type in JS
  6. Commenting in JS

25: Practicing​ ​JS​ ​with​ ​programming​ ​concept

  1. Function in JS
  2. Array in JS
  3. Concept of Objects
  4. JS Conditions (if, else)
  5. Loop in JS

26: ​Working​ ​with​ ​advance​ ​JS

  1. DOM and BOM in JS
  2. Method, Documents, Elements in DOM
  3. DOM Event and Eventlistner
  4. JS Window
  5. History and Navigation in JS

27: Completing​ ​form​ ​validation​ ​in​ ​Javascript

  1. Date Format in JS
  2. Form Validation Techniques

28: Working​ ​with​ ​jQuery

  1. jQuery Introduction
  2. jQuery Selectors
  3. jQuery and DOM
  4. jQuery and Event

29: Using​ ​a​ ​slider​ ​in​ ​JQuery

  1. Introduction to jQuery Effects
  2. Hide, Show, Fade, Toggle
  3. Animation in jQuery
  4. Using Plugin in jQuery
  5. UX/UI Design

31: Host​ ​the​ ​website​ ​in​ ​live​ ​server

  1. What is Domain and Hosting?
  2. Introduction to cPanel
  3. How to Host a Website in a Server?
  4. Working in Live Server

32: ​Installing​ ​XAMPP​ ​in​ ​local host.​ ​Working​ ​with​ ​PHP​ ​syntax

  1. What is Server Side Scripting?
  2. Introduction to PHP.
  3. How to Use XAMPP?
  4. PHP Syntax.
  5. Defining Variables and echo.
  6. Using include and require function

33: Converting​ ​a​ ​static​ ​site​ ​to​ ​Dynamic

  1. Create a complete working form using PHP

34: ​Creating​ ​Database​ ​and​ ​Installing​ ​WP.​ ​Working​ ​With​​ Theme​ ​in​ ​WP

  1. What is CMS?
  2. Introduction to Wordpress.
  3. Creating Database for WP.
  4. Installing WP
  5. Overview of WP Elements

35: Create​ ​a​ ​Menu​ ​in​ ​WP.​ ​Add​ ​a​ ​New​ ​Menu​ ​in​ ​WP,​ ​Installing​ ​New​ ​Theme

  1. Understanding the WP Dashboard
  2. Pages, Tags, Menu, Media and Content
  3. Core WP Settings
  4. Finding and Installing WP Theme and Plugins

36:         Introduction to Marketplace

Search