RESPONSIVE WEB DESIGN AND FRONT-END DEVELOPMENT
RESPONSIVE WEB DESIGN AND FRONT-END DEVELOPMENT
A brief summary
After finishing this Responsive Web Design and Front-end Development training course, you can build an interactive website And will be able to work Freelancing Marketplace as a Responsive Web Designer.
What you will learn
This training class is 90% hands-on, 10% lecture. Students learn by doing, with immediate opportunities to apply the material they learn to real-world problems.
- Creating a HTML page, HTML Tags, Paragraph & Text Formatting
- Lists, Horizontal Ruling lines, HTML Color, Background Color
- Specifying Font Information, Formatting Tags
HTML Review and Basics
- HTML Elements, HTML Attributes, HTML Headings, HTML Paragraphs, HTML Hyper links
- HTML Table, Table & Data Alignment Options, Table Cell Spacing & Padding, Changing Table Height & Width of Table Elements
- Links, Anchor Tag, HTML Lists & Blocks, HTML Forms & Media
- HTML Layout, HTML Form, Form Overview
- Marquee Tag, HTML Iframes, Create Interactive Button
- List Background Using Images, Make menu Button Using HTML code & Image, HTML bdo tag, HTML span tag
Creative Artwork with HTML5
- HTML5 Basics, HTML5 Intro, HTML5 New Elements, HTML5 Semantic
- HTML5 Input Types, HTML5 Form Elements, HTML5 Form Attributes
- HTML5 Media, HTML5 Video, HTML5 Audio
CSS Review and Basics
- Introduction to CSS, External Style Sheet, Internal Style Sheet, Inline Style, Multiple Style Sheet, CSS Syntax, CSS Id & Class, CSS Selectors, CSS1 vs CSS2 vs CSS3, The Cascade & Styling
- The letter-spacing Property, The word-spacing Property, Text Align Property, Line Height Property, Background-URL, Background-Position, Background-Repeat, Specificity & Validating your CSS
Building Layout with CSS
- CSS Box Model, 2 Column Layout
- 3 Column Layout, CSS Border, Outline, Margin & Padding
- CSS Floating & Positioning, CSS Dimension & Display
- CSS Align, Pseudo-class, Pseudo-element &Navigation Bar, CSS Image Gallery, Opacity, Sprites &Media Types
Creative Artwork with CSS3
- CSS3 Round Corners, CSS3 Font-face, CSS3 Transparency and Semi-transparency
- CSS3 Box Shadow & Text Shadow, CSS3 Transitions, Transform & Gradient
Responsive Web Design
- Responsive Web Design using CSS LESS Frame Work
- Interface and Basic tool and shape
- Basic for retouching and related tool
- Working with texture and pattern
- PS Mock-up
- Mock-up making and Marketplace
- Animation and Video editing
- Apps UI/UX design
- Web and Apps element design
- Web Template design
PSD to HTML Conversion
- Learn what is PSD slicing, how to slice PSD to convert to HTML files.
- Work with PSD layers to convert each layers to single HTML file.
- Convert PSD design to fixed width HTML with pixel perfect calculation.
- Practical and Project Assignments on PSD to fixed width HTML.
- Introduction to responsive HTML, where and when to use it and benefits of making responsive HTML.
- Introduction to Media Query, media query syntax, how to use media query to make a HTML file to responsive.
- Practical and Project Assignments on PSD to responsive HTML using Media Query
- Introduction to percentage based element displaying, positioning and alignments. How percentage features will make a HTML responsive.
- Practical and Project Assignments on PSD to Responsive HTML using both media query and percentage.
A live project with Layout building with validations
- Project Overview, Layout Planing, CSS Optimization
- Final Build Up, Project Summary, Live Web Designing Project
- Global variables
- Whitespace and semicolons
- Arithmetic operators
- Flow control
- Code blocks
- Scope Amd/commonjs module specifications
- Array operations
- Undefined and null
- Built-in objects
- Creating objects
- Literal objects
- Constructor function objects
- Prototype chaining / inheritance
- Prototypes in action – implementing the singleton pattern
- jQuery syntax and how to write code in jQuery.
- What is DOM elements, how to jQuery to traversing DOM element easily, necessity for element traversing. Make use to element traversing functions and most common usages.
- Using jQueryto handle and control DOM elements CSS to change element behavior in client side.
- How to use jQueryeffects and animationsto show nice effects in client side. Get used to built in animation/effect functions and make new custom effects.
- What is jQuery plugins, where to get these and how and why to use these.
- Practical and Project Assignments for making some small animations with element traversing options.
- Introduction to Bootstrap, what are the benefits to use Bootstrap.
- Knowing Bootstrap features, grids and measurements, use of Form elements, lists and panels.
- Bootstrap use of popup, modal, tooltips, navigations and carousel,
- PSD to bootstrap HTML conversion using bootstrap features.
- Customizing Bootstrap attributes and necessity for this.
- Practical and Project Assignment on PSD to bootstrap HTML conversion.
- Introduction to SASS, what is the difference with normal CSS, what are the benefits of using SASS
- Installing SASS and creating SCSS files and converting to CSS files.
- SASS rules and attributes and their usages.
- Full course Review
Introducing WordPress and WordPress Customization
- Introduction to the Course, What is WordPress?, Your WordPress Server, One Click Installations, Navigating WordPress, Using Real Content, Under the Hood: Files & Databases
- Creating WordPress Content
- WordPress Additional Types of Content<
- Controlling WordPress Blog
- Using WordPress as a Content Management System
- Customizing WordPress Appearance
- Getting More Performance from WordPress
- Exploring the Anatomy of a Theme