The Complete Website Design Training Programme

Master Website Design Course

To successfully complete a course you must score 80% or higher in each course assessments. Upon successful completion of a course, you can choose to make your achievement formal by purchasing an official Digital World School Certificate.

Certification:

• Introduction to Web Technologies• Careers in Web Technologies and Job Roles • How the Website Works?• Client and Server Scripting Languages • Domains and Hosting• Responsive Web Designing • Types of Websites (Static and Dynamic Websites)• Web Standards and W3C recommendations• File & Folder Naming Conventions • Typical Website File & Folder Structure

Introduction

Learn web design and upon completion of this web design course you will know how to create an HTML page and add content and images, links, tables and lists. You will have a good understanding of the meaning of inheritance, cascade, pseudo classes, pseudo elements and selectors which are concepts that are commonly used in web pages.

You will become familiar with using font, background styles and style sheets. This web design course will help you use Adobe Dreamweaver to create a website with HTML, CSS, JavaScript, and Jquery. It will help you to understand naming conventions, index files, welcome screen, graphical user interface (GUI) and many more settings that are useful when creating a website successfully.

• What is Markup Language • Basic Structure of HTML • Difference Between HTML and XHTML• Head Section and Elements of Head Section • Meta Tags • Css Tags• Script Tag • Table Tag • Div Tag • Header Tags • Paragraph, Span, Pre Tags• Anchor Links and Named Anchors • Image Tag • Object Tag • Iframe Tag• Forms • Form Tag • Attributes of Form • POST and GET Method• Fieldset and Legend • Text input, Text area • Checkbox and Radio Button• Dropdown, List and Optgroup • File Upload and Hidden Fields• Submit, Image, Normal, Reset Button • Creating a Live Website Form• HTML Validators

MODULE 1: Introduction to HTML

• Introduction to Cascading Style Sheets• Types of CSS• CSS Selectors• Universal Selector• ID Selector• Tag Selector• Class Selector• Sub Selector• Child Combinatory Selector• Adjacent Sibling Selector• Attribute Selector• Group selector• First-line and First-letter selector• Before and After Selector• CSS Properties• Type Properties• Background Properties• Block Properties• Box Properties• List Properties• Border Properties• Positioning Propeties• Realtime Implementation• Converstion of Table to CSS Layout• CSS Menu Design (Horizontal, Vertical)• Form Designing

MODULE 2: Learn how to style and format web page - CSS2

• Introduction to HTML5• Features of HTML5• HTML5 DocType• New Structure Tags• Section• Nav• Article• Asice• Header• Footer• Designing a HTML Structure of Page• New Media Tags• Audio Tag• Video Tag• Canvas and Svg Tag• Introduction to HTML5 Forms • New Attributes• Placeholder Attribue• Require Attribute• Pattern Attribute• Autofocue Attribute• email , tel, url types• number type• date type• range type• voice search• Examples of Form

MODULE 3: Advance HTML

• Introduction to CSS 3• New CSS 3 Selectors• Attribute Selectors• First-of-type• Last-of-type• Nth-child• Element:empty• New CSS3 Properties• Custom Fonts• Text-Shadow Property• Text-Stroke Property• Rounded Corners• Box Shadows• CSS Gradients• CSS Multiple backgrounds• Opacity Property• Transition effect• Transform effect• Animation effects• Css Media Queries• Using CSS3 in Practical Layout

MODULE 4: Advance CSS (CSS3)

• Introduction to Dreamweaver• More about Dreamweaver• Advanced features of Dreamweaver

MODULE 5: How to create website using adobe Dream Weaver CS3

• Introduction to Responsive Design• Mobile first design concepts• Common device dimensions• View-port tag• Using css media queries• Menu conversion script• Basic Custom Layout• Introduction to Bootstrap• Installation of Bootstrap• Grid System• Forms• Buttons• Icons Integration• Using CSS3 in Practical Layout

MODULE 6: Creating a Responsive Website that looks beautiful on all devices + Bootstrap

• Introduction to Client Side Scripting• Introduction to Java Script• Javascript Types• Variables in JS• Operators in JS• Conditions Statements• Java Script Loops• JS Popup Boxes• JS Events• JS Arrays• Working with Arrays• JS Objects• JS Functions• Using Java Script in Realtime• Validation of Forms• Related Examples

MODULE 7: Learn java Script Programming Language

• Introduction to jQuery• jQuery Features• Installing jQuery• jQuery Syntax• jQuery Ready Function• jQuery Selectors• jQuery Actions• jQuery plugins• jQuery Validation plugin• jQuery Slideshow• jQuery Dropdown• jQuery UI• Working with jQueryUI• jQuery Accordions• jQuery Tabs• jQuery Tooltips• jQuery Autocomplete

MODULE 8: Learn Jquery and Jquery UI

• Prototyping with Bootstrap• Blocking Content• Design Patterns• Fonts and Colors

MODULE 10: Prototyping in the Browser

• Transition properties• Transform properties• 3D transforms• Cubic-bezier

MODULE 11: CSS Transitions and Transforms

• Vector graphics versus raster graphics• Image and background SVGs• Embedded SVGs• Responsive SVGs

MODULE 12: SVG Basics

• Transitioning & Transforming SVG• Animating SVG with key frames• Animated Line Drawings in SVG

MODULE 13: Animating SVG with CSS

• What is a CSS Preprocessor?• Variables, nested rules and mixins• Separating your style sheet into partials• Storing data in maps• Functions, loops and conditionals

MODULE 14: Sass Basics

• Declaring row and column tracks• Setting gutters between rows and columns• Creating flexible and responsive grid layouts without media queries• Using Grid with Flex box

MODULE 15: CSS Grid Layout

• Forms• Input elements• Select menus• Radio buttons• Checkboxes

MODULE 17: HTML Forms

• What is Typography• Choosing and Using Webfonts• Laying out Type for the Web• Responsive Typography

MODULE 18: Web Typography

Flexbox is a set of CSS properties that give you a flexible way to lay out content. With flexbox you can change the direction, alignment, size and order of elements, regardless of their original size and order in the HTML. You can even stretch and shrink elements and distribute space, all with just a few lines of CSS!

MODULE 16: CSS Flexbox Layout

• Web Hosting Basics• Types of Hosting Packages• Registering domains• Defining Name Servers• Using Control Panel• Creating Emails in Cpanel• Using FTP Client• Maintaining a Website

Live Website Design Projects:• Clients Requirement Analysis• Planning the Website• Creating the HTML/CSS Structure• Creating project using Bootstrap• Integration of Features using JS and jQuery• Project Testing

Live Projects• Creating Web pages• Links, images and formatting• Publishing a Web page

MODULE 9: Domain names and hosting account explained

Master Class

• Web AccessibilityEverybody deserves access to their apps, even when affected by age, vision concerns, limited hearing, a broken arm, or other limitations.This course dives into the why and how of making web apps accessible. As a bonus, accessible sites tend to be more usable for all!• Responsive Web Design - Learn the mechanics of responsive web designYou’ll come away able to build web pages that work equally well on phones, tablets, and the desktop.

Designing for desktop, mobile and tablet • Responsive web design vs mobile design• Understanding different platforms and mobile browsers• About Screen resolutions• The role of HTML, CSS and Javascript in Responsive design• Planning a responsive site

HTML5 and CSS3 • Upgrading from HTML4 to HTML5• The semantic HTML5 elements • Review of current CSS skills• About CSS3• CSS Vendor prefixes• Semantic HTML

Supporting older browsers • Using browser developer tools• Online testing resources• Using browser add-ons and extensions• Physical device testing

Testing tools for responsive design • Upgrading from HTML4 to HTML5• The semantic HTML5 elements • Review of current CSS skills• About CSS3• CSS Vendor prefixes

Building responsive type • Different strategies for sizing type• Working with fluid responsive type• Using web fonts from font libraries• Serving your own fonts• Rotating text with CSS transform• Adding shadows and effects to type

Responsive assets• Making images liquid• Adding audio and video with HTML5• Adding cover images for video• Making video liquid• Auto playing background video• Scalable buttons

Converting layout to a fluid grid• Mobile or desktop first• Planning a fluid grid• Converting from fixed to liquid layout• Conversion calculations for containers• Converting spaces to liquidity• Unit measures for responsive design – px, em, rem, %

Understanding CSS media queries• What is a media query• Setting up media queries• What we can test for• Defining breakpoints for your page• Changing typography based on screen size• Changing layout based on screen size• Showing and hiding page elements• Implementing the viewport meta tag

Build for all devices and users

Strategies for responsive images: learn how to work with new features such as <picture> and srcset so that your images look great and load quickly on any device.

• When to use images and when not to• Picking the best image formats• Serving different images to different devices• How to deal with retina displays

Building responsive navigation• Forming navigation with HTML• Styling nav bars and buttons]• Making a drop navigation• Using a form control for navigation• Switching navigation layout with a media query• Making a toggle button based navigation

Improve the user experience

Front End frameworks

• Browser Rendering OptimizationLearn how to build apps that maintain 60-frames-per-second performance to react quickly and render smoothly.• Website Performance OptimizationThe #1 reason people leave a web site is because it renders too slowly. Learn how to optimize your websites for speed on the desktop and mobile.• Client-Server CommunicationsBecome an HTTP master, optimizing network communications (for example using REST), preventing security problems (XSS, CSRF), deploying HTTPS, and turbocharging your apps with HTTP/2.• High Conversion Web FormsOver 70% of online shopping carts are abandoned before checkout! Learn how to keep users happy and reduce the chances of their walking away.

1. Bootstrap2. Semantic-UI3. Foundation4. Materialize5. Material UI6. Pure7. Skeleton8. UIKit9. Milligram10. Susy

TRAINEES FROM

(+91) 783-684-2000(+91) 956-019-5359

www.digitalworldschool.com Evening, Weekend, Sunday Batches