Professional Web Design & Development

professional web design

Mahin IT Limited offers Advanced Web Design and Development courses.

Course Outline

Professional Web Design
Class 01:
  1. Introduction to web design.
  1. Hand sketch & wire framing.
  1. Story Board (how to think).
  1. Website designing tools/software.
  1. Environment Setup.
  1. Creating file/Startup package.
Project: Think about a website. Make a skeleton by using wire framing tools.
Class 02:
  1. HTML & Browser
  1. HTML Syntax
  1. Head & Body Section
  1. Basic tags
  1. HTML Element & Attributes
  1. Commenting in HTML
Project: Creating a web page with proper HTML syntax & upload it to google drive.
Class 03:
  1. List in HTML
  1. What is table?
  1. Table Head and Body Content
  1. Table Row and Column
  1. Nested table
  1. Layout with table
Project: Creating a webpage layout with table
Class 04:
  1. Introduction to form
  1. Form Elements
  1. Input types & attributes
  1. Form Arrangement & decoration
  1. Different types of image in HTML
  1. Iframe in HTML
  1. Audio and Video Controlling
  1. Embedded video from youtube
  1. GIF animation embedded
Project: Creating a webpage where image, audio, video and gif animation will be embedded and a register Form.
 
Class 05:
  1. Introduction to CSS(Cascading Style Sheet)
  1. Syntax of CSS
  1. How to Link CSS(Inline/Internal/External)
  1. Important property of CSS
  1. Layout concept in CSS
Project: Creating and linking a css file and implement important properties.
Class 06:
  1. Introduction to Selectors
  1. Universal & Element type Selector
  1. ID vs Class
  1. Descendant selector
  1. Child, Attribute, Pseudo selector
  1. Selectors grouping
Project: Creating and External css file and change HTML view styling with selectors.
Class 07:
  1. Flex box
  1. Styling text
  1. Fonts & Icon
  1. Creating a menu
Project: Creating a menu with icons, styling text and fonts.
Class 08:
  1. Position
  1. Floats
  1. Input box styling
  1. Background Image
  1. Dropdown menu
Project: Creating a website with actual positioning
Class 09:
  1. Introduction to lovable CSS
  1. Border and rounding corners
  1. Gradient and shadow
  1. Transition and transformation
Project: Creating a website with image/color backgrounds and transition, transformation effects.
Class 10:
  1. Overview of Responsive Web Design(RWD)
  1. Working with view point
  1. Practicing media queries
  1. RWD Frameworks
Project: Enable a website for mobile responsive view
Class 11: Live project with HTML and CSS
Class 12:
  1. Introduction to Javascript(JS)
  1. What can’t you do with JS?
  1. JS basic syntax
  1. Variable in JS
  1. Operator, Data type and Function in JS
  1. Commenting in JS
Project: Playing with JS syntax
Class 13:
  1. Array in JS
  1. Concept of Objects.
  1. JS conditions (if,else)
  1. DOM in JS
  1. Making a live Digital clock using JS
Project: Practicing JS with programming concept.
Class 14:
  1. Date format in JS
  1. Form validation techniques
Project: Completing form validation in JS
Class 15:
  1. Introduction to jQuery
  1. jQuery Selectors
  1. jQuery and DOM
  1. jQuery and Event
Project: Working with jQuery
Class 16:
  1. Introduction to jQuery effects
  1. Hide, Show, Fade, Slide in jQuery
  1. Animation in jQuery
  1. Creating a responsive menu using jQuery
Project: Practicing jQuery methods and creating a responsive menu, Implementing a slider in jQuery.
Class 17:
  1. Introduction to Bootstrap Framework (BS)
  1. How to install BS
  1. Great Grid System
  1. Understanding Device Screen Size
Project: Installing BS and create a grid for web layout.
Class 18:
  1. BS Table
  1. BS Form
  1. BS Button
  1. BS Image responsive
  1. BS Card
Project: Creating table, register form using BS Classes.
Class 19:
  1. BS Modal
  1. BS Scrollspy
  1. BS tab and Tooltip
  1. BS Carousel
  1. BS Accordion
Project: Complete a webpage with BS.
Class 20:
  1. What is Photoshop(PS)
  1. Basic concept of PS
  1. How to use PS tools?
  1. PSD fonts, color and layer concept
  1. Image slicing in PS
  1. PSD to HTML converting techniques.
Project: Slicing image from a PSD template.
Class 21: Landing Page Design
Class 22: Converting portfolio PSD template to HTML
Class 23: Converting multipurpose business PSD template to HTML
Class 24:
  1. What is Outsourcing?
  1. How to open an account in freelancer.com/ upwork.com
  1. Cover latter writing
  1. Finding jobs & facing interview
  1. Proper Communication with clients
  1. Payment method
Project: Creating an account in marketplace
Class 25:
  1. What is server side scripting?
  1. Introduction to PHP
  1. How to use WAMP/XAMPP
  1. PHP syntax
  1. Defining variable and constant
  1. Function in PHP
Project: Installing WAMP/XAMPP in localhost, working with PHP syntax
Class 26:
  1. Introduction to SQL
  1. Connection with MySpl Database.
  1. Create a database in localhost.
  1. What is table in Database. How to create a tabel?
  1. Basic Queries Of SQL.
Project: Creating a database
Class 27:
  1. Live PHP coding with database.
  1. How to insert data into Database
  1. How to show data in webpage from Database.
Project: Creating a Database and insert data into the Database.
Class 28:
  1. What is CMS?
  1. Introduction to WordPress.
  1. Creating database for WP.
  1. Installing WP.
  1. Overview of WP Dashboard.
Project: Creating Database and Installing WP.
Class 29:
  1. How to install a WP thems.
  1. Customize the theme.
  1. Creating an one page Template with WordPress theme.
Project: Customize a WP theme.
Class30:
  1. What is Plugin in WP?
  1. How to install a Plugin?
  1. Working with WP Plugins.
  1. Working with visual Composer.
Project: Working with Plugins in WP.
Class 31: Hands on live Project in WP (Complete a Website).
Class 32:
  1. What is domain and hosting?
  1. Introduction to cpanel.
  1. Overview of webmail.
  1. How to host a website in server?
  1. Creating a database in live server.
Project: Host the website in live server. Creating and accessing webmail.
Class 33:
  1. Overview of WP.
  1. Final Exam.
Class 34:
  1. Introduction to fiverr.
  1. How to create a fiverr account?
  1. Gigs setting techniques.
  1. Buyer request.
  1. Payment method.
Project: Opening a fiverr account.
Mahin IT Limited