Syllabus

Web Design (Front-End Web Development) Course

Twitter Bootstrap in Responsive Web Design

History of Web/Mobile Development

Research/Wireframing/Prototyping

Mockup Designing (Adobe Photoshop/Illustrator)

• Psychology of Color in Web
• Typography
• Using tools for Mockup Design
• Vector Design
• Designing various element for Web/Mobile
• Mastering elements using different options
• Using some important extension for Web/Mobile design
• Project Work (Designing Mockup)
• Creating Photoshop GIF Image.

HTML5

• Introduction
• Semantic markup with HTML5
• HTML5 structural tags
• XHTML vs HTML5 (Changed Element)
• Current state of Browser Support

HTML5 Tags

• HTML5 Form attributes
• placeholder
• autofocus
• autocomplete
• required
• pattern
• list
• multiple
• no validate
• form no validates
• form
• formaction
• formenctype
• formmethod
• formtarget
• HTML Audio
• HTML Video
• HTML Progress
• HTML Meter
• HTML Data Tag
• HTML Datalist Tag
• HTML Header Tag
• HTML Footer Tag
• HTML Figure Tag
• HTML Figcaption Tag
• HTML Article Tag
• HTML Aside Tag
• HTML Dialog Tag
• HTML Details Tag
• HTML Summary Tag
• HTML Section Tag
• HTML Time Tag
• HTML Main Tag
• HTML Wbr Tag
• HTML Canvas
  • Rectangles
  • Drawing Lines
  • Drawing with Arc
  • Path Intro
  • Text
• HTML SVG
• HTML Drag & Drop

CSS3

• Introduction
• Understanding Cascading Style Sheets(CSS)
• History, Current State of CSS3 support
• Cross browser support testing

HTML with CSS

• How css relate to html
• Inline, Internal and External
• Importance and usability
• Basic CSS
• Box model
• width, min/max-width, height, min/max-height
• Background, Border, Display, Padding, Line Height, Margin, Opacity, Vertical Align, White Space, Word Wrap, Outline, CSS Visibility Position
• Float and clear

Selectors

• Attribute Selectors
• The Target Pseudo-Class
• UI Element States Pseudo-Classes
• Negation Pseudo-Class
• Structural Pseudo-Classes
• Pseudo-elements(::first-line Pseudo-element ::first-letter Pseudo-element::beforePseudo-element::selection Pseudo-element)

Responsive Design

• Media queries (for Mobile, Tablet, Desktop)
• Various available frameworks for responsive design

CSS3 Fonts

• Fonts on Web
• The @font-face rule
• Using Google fonts

CSS3 effects

• gradients
• box-shadow
• border-radius
• text-shadow

2d/3d Animation

• Transform
• Transition
• CSS animation (using @keyframe) CSS3 Border Images
• CSS3 Rounded Corners CSS3 User Interface
• CSS3 Multi-column Layout CSS3 Box Sizing
• CSS3 Flexible Box CSS3 framework
• Most popular framework (Bootstrap, Materialize CSS, ZURB foundation, 960 grid, Jquery mobile)
• Understanding and Using Bootstrap

Javascript/JQuery

• Intro Javascript (JQuery)
• Javascript code and what to do with it
• Values, types and Operators
• Functions
• 1.Type of functions
• 2.Importance of functions

Objects

• Properties and methods
• Types of objects

Intro DOM (Document Object Model)

Jquery

• Understanding Jquery and its features
• Using it on live project
• Exploring basic concepts

Finalizing (Wrapping Up)

• Final Project (assessments of all above )
• Tips for enhancing Front End Development further
• Pro tips for job interview

Final Project