Follow Us :

Responsive Web Design Course

Responsive Web Design

Training Mode Regular Fastrack Crash
Classroom | Online 3 Months

(M,W,F or T,T,S Class)

(3 Class in a week)

 45 Days

(Monday to Friday Class)

(5 Class in a week)

 25 Days

(Monday to Friday Class)

(5 Class in a week 1:30 hour duration)

A website which is mobile device and screen friendly is known as responsive web design. In this course you will learn to make responsive website that could adapt to mobile screen, iPad screen, laptop screen and other devices.

Making a website responsive is important for the user, so that they could use the website on whichever device or screen they prefer.

Responsive web design is a short-term course which consist of 2 modules.

The first module is about UI interface design and graphic design. In this you will learn to make a website layout, designing it, visual element and more. Make it aesthetically pleasing and dynamic. You will use adobe photoshop to make this happen. In second module you will learn about HTML, CSS and bootstrap to design the website and its various pages.

WHO CAN JOIN Responsive Web Design
  • 10th, 12th or Equivalent
  • BCA/MCA, B.Tech, M.Tech, B.sc (IT), B.sc(CS)
  • Diploma Candidates

Module-1 UI Interface Design | Graphic Design : Duration (1 Month)

Module 1: Introduction to Photoshop

  • Raster And Vector
  • Set Image Size, Unit, Resolution & Color Mode
  • Color Profile
  • Photoshop Overview

Module 2: Selection

  • Make Selection With Tools
  • Rectangular Marquee
  • Elliptical Marquee
  • Single Row
  • Single Column
  • Lasso
  • Polygonal Lasso
  • Magnetic Lasso
  • Quick Selection
  • Magic Wand

Module 3: Crop & Select Color

  • Crop Tool
  • Perspective Crop
  • Slice
  • Slice Selection
  • Eyedropper
  • Color Sampler

Module 4: Image Editing Tools & Color Correction

  • Spot Healing
  • Healing
  • Patch
  • Content-Aware Move
  • Red Eye
  • Adjustments
  • Brightness/Contrast
  • Levels
  • Curves
  • Exposure
  • Vibrance
  • Hue/Saturation
  • Color Balance
  • Black & White
  • Photo Filter
  • Channel Mixer
  • Color Lookup

Module 5: Brush Tools

  • Brush
  • Create Brush
  • Upload Brush
  • Use Brush Setting
  • Pencil
  • Color Replacement
  • Mixer Brush
  • Clone Stamp
  • Pattern Stamp
  • Eraser
  • Background Eraser
  • Magic Eraser
  • Blur
  • Sharpen
  • Smudge
  • Dodge
  • Burn
  • Sponge

Module 6: Color

  • Fill Color In Selection
  • Pattern
  • Gradient
  • Paint
  • Bucket

Module 7: Create Path

  • Use Pen
  • Freeform Pen Tool
  • Add Anchor Point
  • Convert Point

Module 8: Text

  • Use Horizontal & Vertical Type
  • Use Horizontal & Vertical Type Mask
  • Character & Paragraph Palette
  • Font Size
  • Font Family
  • Font Style
  • Leading
  • Kerning
  • Tracking
  • Horizontal & Vertical Scale
  • Baseline Shift
  • Paragraph Align
  • Left & Right Indent
  • Before & After Paragraph Space

Module 9: Create Shape

  • Rectangle
  • Rounded Rectangle
  • Ellipse
  • Polygon
  • Line
  • Custom Shape Create And  Add Shape

Module 10: Work Mask

  • Clipping Mask
  • Layer Mask
  • Type Mask
  • Vector Mask
  • Quick Mask

Module 11: Layer Style

  • Bevel & Emboss
  • Stroke
  • Inner Shadow
  • Inner Glow
  • Satin
  • Color Overlay
  • Gradient Overlay
  • Pattern Overlay
  • Outer Glow
  • Drop Shadow

Module 12: Practice Work

  • Create Banner
  • Poster
  • Mobile App UI
  • Website UI (Responsive)
  • Social Media Post

Module 13: Filter

  • Filter Gallery
  • Camera Raw
  • Liquify
  • Oil Paint
  • Vanishing Point
  • Blur
  • Distort
  • Noise
  • Pixelate
  • Render
  • Sharpen
  • Stylize

Module 14: 3D

  • Create 3D Shape
  • 3D Text
  • 3D Custom Shape
  • Apply Texture
  • Use 3D Material Eyedropper 
  • Use 3D Material Drop

Module 15: Use Adv. Option

  • Action
  • Animation
  • Create GIF File

Module 16: Export File In

  • .Psd
  • .Jpg
  • .Png
  • .Gif
  • .Pdf
  • .Pdf

Module-2 Web Design : Duration (2 Months)

INTRODUCTION TO HTML

  • What is static/Dynamic Website
  • What is SEO Friendly Website
  • What is Responsive Website
  • What is HTML
  • HTML4 VS HTML5
  • EDITORS IN HTML

WORKING WITH BASIC TAGS

  • DOCTYPE In HTML
  • Tag and Attributes
  • Title and Meta tag
  • Headings and Paragraph
  • Formatting Tags
  • EDITORS In HTML

ANCHORS AND HYPERLINKS

  • Internal link
  • External link
  • Text link
  • Image link
  • Email link
  • Phone link
  • target attribute

WORKING WITH LISTS

  • Ordred List
  • Unordred List
  • Definition List
  • Nested List
  • List Attributes

WORKING WITH GOOGLE MAP & YOUTUBE

  • Google Map Insertion in Webpage
  • Youtube Video Insertion in Webpage

WORKING WITH TABLES

  • Creating Tables on a Web Page
  • Altering Tables and Spanning Rows & Columns
  • Placing Images & Graphics into Tables
  • Aligning Text & Graphics in Tables
  • Adding a Background Color

WORKING WITH HTML FORM

  • HTML Input tags
  • HTML Input Attributes
  • Setting up form
  • Form attributes
  • Submit and Reset Button

HTML5 SEMANTIC TAGS

  • header and footer tag
  • section tag
  • figure and figcaption
  • nav and aside tag

HTML5 AUDIO & VIDEO

  • Audio Tag
  • Video Tag

HTML5 API'S

  • Drag & Drop
  • Local Storage
  • Geolocation

COURSE CONTENTS OF CSS

INTRODUCTION TO CSS

  • What is CSS?
  • How CSS Works?
  • Types of CSS,Internal,Inline,External
  • CSS Selectors
  • Comments In CSS
  • How to Link External CSS

WORKING WITH BASIC CSS PROPERTIES

  • Selectors : Class or Elements
  • Colors
  • Height / Width
  • Border
  • Margin and Padding
  • CSS Box Model

WORKING WITH WEB LAYOUTS

  • Aligning Div
  • Two Div Align
  • Three Div Align
  • Four Div Align
  • Use of floats
  • Clearing float
  • Inline or Block Element

WORKING WITH BACKGROUND,GRADIENT OR IMAGE SPRITE

  • Background Color
  • Background Image
  • Background Position
  • Background Attachment
  • Gradient Colors
  • Image Sprite

WORKING WITH TEXT PROPERTIES

  • Text Alignments
  • Line height(Leading)
  • Letter Spacing(Kerning)
  • Font Family
  • Font Size with Font Weight
  • Tips For Improving Text Readability

WORKING WITH ICONS & FONTS

  • Use of Font Awesome
  • Use of Flat Icons
  • Use of Google Fonts

WORKING WITH MENUS AND POSITIONS

  • Static Position
  • Fixed Position
  • Absolute Position
  • Relative Position
  • Creating Menu
  • Menu With Multi Dropdown

WORKING WITH BORDER AND SHADOW

  • Border
  • Border Image
  • Rounded Corner
  • Box Shadow
  • Text Shadow

WORKING WITH OUTLINE AND UI

  • Outline
  • Outline Offset
  • Resize

WORKING WITH IMAGE STRETCHING PROBLEM

  • Object Fit : Fill
  • Object Fit : Contain
  • Object Fit : Cover

WORKING WITH HTML FORM & CSS

  • labels with inputs
  • Form-based selectors
  • Changing properties of form elements
  • Formatting text in forms
  • Formatting inputs
  • Formatting form areas
  • Changing the appearance of buttons
  • Laying out forms

WORKING WITH 2D & 3D TRANSFORMS

  • translate
  • rotate
  • skew
  • scale

WORKING WITH HOVER,TRANSITIONS & ANIMATIONS

  • Hover Effects
  • Transitions
  • Animations
  • Creating Web Ads Using Animation

INTRODUCTION TO BOOTSTRAP

  • What is a Responsive Website
  • What is Bootstrap
  • Where to Download
  • How to Use Bootstrap
  • Bootstrap Directory Structure

WORKING WITH GRID IN BOOTSTRAP

  • What is Grid System
  • Use of Grid System
  • small, medium, large Grid System
  • Container Vs Container-fluid

WORKING WITH IMAGES, TEXT, TABLES

  • image responsive
  • rounded image
  • circle image
  • text-align
  • text colors
  • responsive table

WORKING WITH BOOTSTRAP FORM

  • labels
  • form inputs
  • input classes
  • type of buttons
  • form layouts

WORKING WITH WEB LAYOUTS, MENUS

  • Container Layout
  • Container Fluid Layout
  • Proper Use of Rows and Columns
  • Menu
  • Single Dropdown Menu, Multilevel Dropdown Menu
  • Mobile Menu / Collapse Menu

WORKING WITH SLIDER, TAB PANEL, MODAL BOX

  • Responsive Slider
  • Tab Panel
  • Modal Box
  • Menu
  • Single Dropdown Menu, Multilevel Dropdown Menu

WORKING WITH CSS HELPERS, RESPONSIVE UTILITIES

  • Class Helpers
  • Responsive Utilities

View More Projects

Contact Us

Course Feedback

View More Testimonials

Student Projects

  • Name : Manish Bharti

    Course : Web Designer

    Project : Mindx

    Guided By : Rajesh Sir

  • Name : Manish Bharti

    Course : Web Designer

    Project : Light Basket

    Guided By : Rajesh Sir

  • Name : Sakesh Kumar

    Course : Web Development

    Project : Delhi Hospital

    Guided By : Rajesh Sir

  • Name : Vikash Kumar

    Course : Full Stack Developer

    Project : PS Health Care

    Guided By : Rajesh Sir

  • Name : Bablu Kumar

    Course : Web Developer

    Project : Mudra Cash for Gold

    Guided By : Rajesh Sir

  • Name : Manish Bharti

    Course : Web Designer

    Project : vedicessentials

    Guided By : Rajesh Sir

  • Name : Guddu Kumar

    Course : Advance Full Stack Developer Expert

    Project : MPSswitches

    Guided By : Rajesh Sir

  • Name : Guddu Kumar

    Course : Advance Full Stack Developer Expert

    Project : Palco

    Guided By : Rajesh Sir

View More Projects

KEY FEATURES OF COURSES

Enjoy a free demo session in both classroom and online with live instructor with us before join any course. This helps you to understand our instructor and the atmosphere of our institute. To attend a demo session just give us call or fill enquiry from or email us on: [email protected].
We at Next-G Classes enables you to pay your course fees in Installments through a simple and Hassle free process. You can discuss your installments at the time of registration and pursue your dreams. Our installments process is totally interest free, we don’t charge any extra charge for same.
We always believe on quality training that’s why we have put limited batch size. Because we often feel that some students prefer small batch size. Our limited batch size provides personal attention, better results, enhance learning, focus on learning and many more also.
Our Instructors are highly professional. All our instructors are passionate about delivering student achievement and learning outcomes. Next-G classes is one of few institutes in all across country that’s aim is to provide high quality learning experience.
One year free class retake facility provides an opportunity to retake class at No Cost as per your convenience. Because at our institute our aim is to enhance the concepts of every student’s, after provide in-depth knowledge of every software’s, languages etc.
One year free class retake facility provides an opportunity to retake class at No Cost as per your convenience. Because at our institute our aim is to enhance the concepts of every student’s, after provide in-depth knowledge of every software’s, languages etc.
Request For Free Demo

Master IT Courses

Trending Courses

Courses For 10th & 12 Class Students

Other Courses

Trusted by our Students

More than 1000 students we have trained in last 8 years placed successfully in various Industry.

    WDI Student review

Request For Demo