This training is jointly organized by BITM & UY LAB
Training will be held in UYS Lab.
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 :
- Introduction to web design
- Static Dynamic Website
- How Web Work?
- What Is Wireframing?
- Wireframing Tools.
- Course Module Overview
Project: Think about a website. Make a skeleton by using wireframing tools.
- Website Designing Tools
- IDE vs Code Editor
- HTML and Browsers
- File Extension
- Creating A HTML File
- Arranging files and making a startup package
Project: Creating startup package and upload it to google drive.
- HTML Syntax
- Basic Structure ( Head and Body Section)
- HTML Tags
- HTML Elements
- HTML Attributes
- HTML Typography
- HTML Block vs Inline Element
- Commenting in HTML
Project: Creating a web page with proper HTML Syntax.
- HTML LIsts
- HTML Table
- Table Head and Body Contents
- Table Caption
- Attributes of Table
- Table Row and Column
Project: Creating a table.
- Introduction to HTML Form
- From Elements
- Input Types and Attributes
- Form Validations
- GET vs POST Method
- Form Arrangement (Fieldset)
Project: Creating a register form that requires every form elements.
- HTML Media Elements
- Different Types of Images
- Audio and Video Controlling
- Iframe in HTML
- Embedded Video from Youtube
Project: Creating a webpage where image, audio, video and gif animation will be
- HTML5 Semantic Elements
- Brief Discussion on HTML5 API
- HTML Review
Project: Create a Semantic Layout
- Introduction to CSS (Cascading Style Sheet)
- CSS Ruleset
- How to Link CSS
- CSS Specificity
Project: Creating and linking a css file and implement important properties.
- Introduction to CSS Selectors
- HTML DOM Tree
- Universal Selector
- Type Selector
- Attribute Selectors
- Pseudo Classes
- Pseudo Elements
- Child and Adjacent Selectors
- ID vs Class Selectors
Project: Creating an external css file and change HTML view styling with selectors.
- CSS Box Model
- Different Box Model Properties
- Styling List
Project: Create a basic web layout
- Introduction to CSS Layout
- Practical Positioning Example
Project: Creating a website with actual positioning.
- Creating Menu in CSS
- Styling Text
- Working With Web Fonts and Icons
- Styling fonts and icons
- Input box Styling
Project: Creating a menu with icons. Styling text and fonts.
- Introduction to lovable CSS (Some CSS3 Properties
- Border and Rounded Corners
- Working With Background
- Gradient and Shadow
- Transition and Transformation
- CSS Animation
Project: Creating a website with image/color backgrounds and transition, transformation
- A Complete Web Page Using HTML5 and CSS3
- Introduction to Sass
- Installing Sass and Sass Compiler
- Folder Structure
Project: Implementing css property with Sass.
- Nesting and Scope
Project: Implementing css property with Sass.
- Introduction to Bootstrap Framework. (BS)
- How to Install BS
- BS Grid System
- Understanding Device Screen Size
- BS Typography
Project: Installing bootstrap and create a grid for web layout.
- BS Table
- BS Form
Project: create a form for web site.
- BS Navigation
- BS Button
- BS Pagination
- BS Image Responsive
- Bs Card
Project: create a Card for web site.
- BS Carousel
- BS Accordion
- BS Modal
- BS Tab and Tooltip
Project: Complete a webpage with Bootstrap.
- Overview of Responsive Web Design (RWD)
- Working With Viewport
Project: Enable a website for mobile responsive view.
- Mid Term Exam
- What is Photoshop?
- Basic Concept of Photoshop.
- How to Use Photoshop tools?
- PSD Fonts, Color and Layer Concept.
- Image Trimming in Photoshop.
Project: Converting PSD to HTML.
- Converting Multipurpose Business PSD Template to HTML
- Js Basic Syntax
- Variable in JS
- Operator, Data Type in JS
- Commenting in JS
- Function in JS
- Array in JS
- Concept of Objects
- JS Conditions (if, else)
- Loop in JS
Project: Practicing JS with programming concept.
- DOM and BOM in JS
- Method, Documents, Elements in DOM
- DOM Event and Eventlistner
- JS Window
- History and Navigation in JS
Project: Working with advance JS.
- Date Format in JS
- Form Validation Techniques.
- jQuery Introduction
- jQuery Selectors
- jQuery and DOM
- jQuery and Event
Project: Working with jQuery.
- Introduction to jQuery Effects
- Hide, Show, Fade, Toggle
- Animation in jQuery
- Using Plugin in jQuery
Project: using a slider in JQuery.
- What is Domain and Hosting?
- Introduction to cPanel
- How to Host a Website in a Server?
- Working in Live Server.
Project: Host the website in live server.
- What is Server Side Scripting?
- Introduction to PHP.
- How to Use XAMPP?
- PHP Syntax.
- Defining Variables and echo .
- Using include and require function
Project: Installing XAMPP in localhost. Working with PHP syntax.
- Create a complete working form using PHP
Project: Converting a static site to Dynamic.
- What is CMS?
- Introduction to Wordpress.
- Creating Database For WP.
- Installing WP
- Overview of WP Elements
Project: Creating Database and Installing WP. Working With Theme in WP.
- Understanding the WP Dashboard
- Pages, Tags, Menu, Media and Content
- Core WP Settings
- Finding and Installing WP Theme and Plugins
Project:Create a Menu in WP. Add a New Menu In WP, Installing New Theme
- Introduction to Marketplace (Fiverr)
- How to Create a fiverr Account?
- Gigs Setting Techniques.
- Presentation. Certification and Closing Ceremony.
Project: Opening a fiverr Account.
||Advance Web design and Development