Learn how to web design

Learn how to Web Design

what is web design

Web Designing is for people who are computer savyy whether they are graduate, post-graduate or even 12th pass … and for people who use apps like Dreamweaver and other wysiwyg apps (wysiwyg stands for: “What You See Is What You Get”) … and now want to learn what’s going on ‘behind the scenes’ of web design.

To really learn how to web design, you need to learn HTML, CSS & basics of Javascript & JQuery coding!

Why learning HTML and CSS makes sense.

Web design apps like Dreamweaver are fine, but if you want to be able to build modern responsive HTML5 based websites, then these apps will get in the way of you learning (because you have to learn the app on top of the code) … and will actually slow you down!

Learning to build your web sites using HTML will give you far better control over the process, and ultimately your web sites. On top of that, you will have a far deeper understanding of the web, and as a result you will create better websites quicker – much quicker.

At DICE Academy, we focus that you understand the basics of HTML, CSS & Web Design so that you can create any kind of website with ease. We give you detailed understanding of UI/UX so that you understand the various components of Web Design. We make learning web design fun!

Why is this best course to learn how to web design?

  • Complete coverage of Graphics Design and Web Design
  • Focussed on Job Placement & Job Interview
  • Course material developed by Industry’s design experts
  • Your teachers will be actual designers from IT Industry
  • Focus on modern technologies demanded by leading Web design companies and MNCs
  • Full of live hands-on exercises and projects
  • DICE Academy provides you best-in-class placement assistance
    • Bonus Personality Development Course covering Professional Communication, Email Etiquette and Interview Handling Skills

Click here to view the detailed course curriculum for Learn how to Web Design

Multiple Web Design Placements in last 4 weeks!

web design placaments

Topics Covered in Learn how to Web Design

Adobe Photoshop CS6
Becoming familiar with the workspace
Understanding the Toolbox and tool options bar” “- Detail & Importance of Canvas Size
– Explain selection tools, painting tools, erasing tools etc
– Layer Panel
– Unlocking The Layer..
– Color Mode
– New Files
– How to fill the color in document and selected area
– Tool Color palletePerforming Basic Image/File Operation “- File types (Compressed, Un-compressed, Raster,Vector)
– File formats (PSD,TIFF,JPEG,GIF,PNG,BMP,RAW)
– Creating a new image (explain options shown in dialog box)
– Opening an existing image
– Saving an image (Again explain when to use psd,jpg,png)
– Understanding size and resolution (explain all options from dialog box)
– Changing the canvas size (explain all options dialog box)- Difference between raster and vector
– Overview if menus bar
– File formates
– File types
– How to change the no. of steps of undo
– What is pixel
– vector imagesWorking with Layer, Color Modes & Color PalettesWorking with Selection tools
– How to reslect or make selection on object
– Ctrl+click on layer icon
– multiple layer selection
– renaming the layer
– Select Multiple object
– diffeference between fill and opacity
– Grouping of layers
– Transform ToolWorking with Transform, Crop & Straghten Images
– Details of cropping tools
– Cropping (Cropping.psd) – Also explaining changing canvas size along with cropping. Also explain options bar with aspect ratio & size)
– Transform Tools in Details
– Straightening (Straighten.psd)
– Rotating (Rotating.psd)
– Flipping (Flipping.psd)Working with Selection tools with options
– Quick selection tool
– With all options
– Spacing
– Hardness
– Refine EdgeAll about Layers
– Explain the concept of layers – why multiple layers are needed
– Adding new layers
– Using Layer Menus (Explain options in the menu)
– Filtering layers
– Changing the Opacity and Fill settings
– Changing the lock settings
– Blending modes
– Filtering layers
– Opacity and Fill settings
– Lock settings
– Blending modes
– Linking Layers
– Grouping Layers

Working with brushes, paint tool & gradient
– Working with painting tools in blending modes
– Applying color with painting tools
– Painting with editing tools
– Using the Brush Panel
– Selecting the brush tip shape
– Filling a selection with a color or pattern
– Applying a gradient fill

Working with Advanced Transform, Content aware scale feature
– Using Transformations
– Understanding the importance of the reference point
– Scaling images
– Rotating images
– Skewing images
– Changing the perspective of images
– Using the Warp transformation
– Using free transform
– Using the Content-Aware Scale feature”

All about Text
– Learning a Little Bit about Text
– Using the Text Tools to Add Text to Images
– Using the text tools to add text
i. Adding text as a point type
ii. Adding text as a paragraph type
iii. Edit Type
iv. Check Spelling
– Find and Replace Text
– Rasterize Type
– Create Work Path
– Convert to Shape
– Horizontal/Vertical options
– Anti-Alias adjustment
– Faux formatting
– Convert to Point Text/Paragraph Text
– Warp Text
– Adding text in a Smart Object

Working with Advanced Layers
– Layers Panel Menu
– Duplicate Layer
– Layer Style
– Layer Content Options
– Layer Mask
– Vector Mask
– Create Clipping Mask
– Smart Objects, Rasterize
– Group Layers, Ungroup Layers
– Hide Layers
– Arrange
– Combine Shapes
– Align, Distribute
– Lock All Layers in Group
– Link Layers
– Select Linked Layers
– Merge Down
– Merge Visible
– Flatten Image

Working with Path
– Understanding Paths
– Building path components
– Exploring the Vector Path
i. Using the Pen tools
ii. Using the Path Selection tools
iii. Understanding the Paths panel
iv. Free transforming paths
– Creating vector masks
– Working with vector shape tools

Working with Color, Contrast & Brightness correction of Images
– Levels
– Curves
– All Adjustemts of image menus
– Smart Filter, New Fill Layer, New Adjustment Layer

Working with advanced selection methods & filters
– Masking, Channel masking
a. Looking at Artistic Effects Filters
b. Exploring Artistic filters
c. Discovering Brush Stroke filters

Working with Web Templates Part-I
– Basic requirement to create a web page
– Understanding Patterns
– Understanding Icons
– Understanding Fonts
– Knowing Design References
– Understanding Website Design

Working with Web Templates Part-II
– Understanding tutorials available on internet
– Understanding the creation of artistic effects, brushes etc
– How to work with logo & branding
– Understanding the source of images
– Understanding UI elements
– Understanding about the dummy content based on specific industry
– Understanding how to use cooked-up vectors in your files

Working with Web Templates Part-III
– Hands-on exercise based on the industry standards

UI/UX Concepts
– Understanding the Business Problems
– Undetstanding the User Context
– Sketching to explore the design concept
– Prototype the solution
– Working with Wireframe Part-I
– Working with Wireframe Part-II
– Understanding the latest apps, widgets & code snippets which can be used in sites
Adobe Illustrator CS6
Working with artboards
– Working with artboardsa.
– Drawing shapes and lines
– Applying color
– Working with the Shape Builder toolCreating and editing gradients
– Applying a gradient to an object
– Creating an elliptical gradient
– Modifying the colors in a gradient
– Applying a gradient across multiple objects
– Changing gradient direction, radius, or originPlacing Adobe Photoshop images in Illustrator
– Using Image TraceWorking with the Color Guide panel
– About selecting colors
– Swatches panel and swatch library panels
– Color Picker
– Eyedropper tool
– Color panel
– Color Guide panel
– Edit Colors/Recolor Artwork dialog box
– Add Selected Colors command or New Color Group buttonCreating and applying a pattern
– Creating painted pattern object
– Creating pattern swatch from an object :
– Editing your pattern
Adobe In-Design CS6
Setting Up A Document
– Creating a new document
– Adding text and art in frames
– Applying color to an objectWorking With Pages
– Adding pages to your document
– Creating a PDF for print
– Adding a hyperlink
– Finding the page centerWorking with Frame, Shapes and Graphics
– Resizing content in a frame
-Evenly distributing objects
– Adding placeholder text
– Linking graphics

Learning Plan for Web

Basic HTML
Introduction to HTML
– What is HTML?
– Tag Syntax
– Create HTMLHTML Document
– Structure
– Doctype
– html element
– head element
– body elementBasic content
– Headings
– Paragraph
– Line
– List
— unordered list
— ordered list
— definition list
– ImageHyperlinks
– What is Hyperlinks
– Hyperlinks
– Relative paths or Absolute URL
— Relative path
— Absolute URLTables
– Table
– Table row
– Table data
– Table heading
– CaptionsForms
– User-submittable form
— The action attribute
— The method attribute
– Form controls
— The Input element
—- type=”text”
—- type=”radio”
—- type=”tel”
—- type=”email”
– The textarea element
– Select menu
— The select element
— The option element
– buttonOther HTML ELEMENT
– pre
– blockquote
– center
– u
– i
– b
– br
– font
– marquee
– small
– sub , sup
– strike
Basic CSS
Introduction to CSS
– What is CSS
– Syntax
– Selectors
— Type selector
—- Class selector
—- ID selector
—- Descendant combinator
—- Grouping
– Create CSSAdding style to HTML
– Linking style sheet
— Internal style sheet
— inline style sheet
— external style sheetStyling
– Texts
— text-align
— text-decoration
— text-indent
– line-height
– vertical-align
– text-transform
– letter-spacing
– word-spacing
– white-spaceBox Size
– width
– heightVisual formatting
– Display
– position
– top
– right
– left
– bottom
– Float
– clear
– z-index
– overflow
– clip
– visibility
– cursorCSS Fonts
— font-size
— font-family
— font-style
— font-weight
— Font Face
—- Custom Fonts
—- Google Fonts
– Lists
– LinkBox model
– Box model
– Paddings and Margins
– Background
– Borders
– outline
– color
– opacity
Advanced HTML
Introduction to HTML Doctype
– The HTML5 doctype
– The HTML 4.01 strict doctype
– The HTML 4.01 transitional doctype
– The XML 1.0 strict and transitional doctypes
– The HTML 4.01 and XML 1.0 frameset doctypes
– Other doctypesList of HTML ELEMENT
– Grouping content
— div
– Text-level semantics
— cite
— code
— em
— kbd
— span
– Sections
— section
— nav
— article
— aside
— header
— footer
— addressEmbedded content
— canvas
— map
— area
— svg
— audio
— iframe
— video
— embedHTML structural elements
– simple page structure using basic html
– Structuring a page with HTML 4
— div , span structure
– Enter HTML5 structural elements
— header, footer , nav , article , aside , section
Advanced CSS
Box Size
– width
– min-width
– max-width
– height
– min-height
– max-heightStyling tables
– Table and cell width
– border, padding , margin
– A simple designStyling forms
– label styling
– input styling
– select styling
– button styling
– textarea styling
– checckbox , radio button styling
– error message styling
– fieldset stylingFloats and clearing
– How does floating work?
– Margins on floats
– Clearing
– Containing floats
– Shrink-wrapping
– Centering FloatsCSS static and relative positioning
– Static positioning
– Relative positioningCSS absolute and fixed positioning
– Absolute positioning
– Fixed positioningIntroduction To CSS3
– Type Selector
— elementname
– Universal Selector
– Attribute Selector
— [attributename]
— [attributename=”val”]
— [attributename~=”val”]
— [attributename|=”val”]
— [attributename^=”val”]
— [attributename$=”val”]
— [attributename*=”val”]
– Pseudo-classes
– Dynamic pseudo-classes
– The target pseudo-class
– The language pseudo-class
– The UI element states pseudo-classes
– Structural pseudo-classes
– The negation pseudo-class
– Pseudo-elements
— ::first-line
— ::first-letter
— ::before
— ::after
– Combinators
— Descendant combinator
— Child combinators
— Adjacent sibling combinator
— General sibling combinator

Gradients
– linear
– radial
– conic

Other CSS Properties
– Transform
– Lists and Counters Properties
– Multi-column Layout Properties
– Filter Effects Properties
– Masking Properties
– box shadow
– Text shadow
– Transition
– css3 Animation

Headers footers columns and templates
– Introduction
– The stylist’s critical process steps
— Gather requirements
— Content classification
— Wireframes
— write code
— Test
— repair
— publish
– Element nesting and grouping
– Single column layout implementation
– Double column layout implementation
— Two Column Equal layout
— Two Column Left Layout
— Two Column Right Layout
– Triple column layout implementation
— Three Colun Equal Layout
— Three Column Layout

Others
Javascript
– Introduction to Javascript
– Understanding Javascript Syntax
– Understanding Javascript Statements
– Understanding Javascript Variables
– Using Javascript Operators
– Understanding Javascript FunctionsJQuery
– Introduction to JQuery
– Understanding JQuery Syntax
– Understanding JQuery Selectors
– Understanding JQuery Events
– Using JQuery Effects like Hide/Show, Fade In-Fade OutBootstrap 3
– Bootstrap Overview
– Bootstrap Grid System
– Bootstrap – CSS Overview
– Bootstrap Typography
– Bootstrap Code
– Bootstrap Tables
– Bootstrap Buttons
– Bootstrap Images
– Bootstrap Responsive Utilities
– Bootstrap Layout ComponentsPHP/MySQL
– Introduction to PHP & MySQL
– Understanding PHP Variables
– Understanding PHP Data Types
– Understanding PHP Constants & Operators
– Understanding PHP Loops & If-Else
– Understanding PHP FunctionsWordPress
– How to Install WordPress
– How to Create a WordPress Site
– How to Install WordPress Themes
– How to Install WordPress Plugins