Web Design Online

Step-by-step lessons helping you achieve mastery for print, or digital media.

Master the visual art of web design with Sajid Holy's training courses dedicated to teaching you interactive, responsive and user centered visual designs. Web design is more than ever a visceral experience where how something is presented to the user is as important as ever. Learn from industry experts on how to create beautiful websites that work across every device. View our creative web design library and learn something new today!

ADOBE DREAMWEAVER (HTML5+CSS3+BOOTSTRAP) (WEB DESIGN)

This Specialization covers how to write syntactically correct HTML5 and CSS3, and how to create interactive web experiences with HTML5 and CSS3. Mastering these technologies will help you develop high quality web sites that, work seamlessly on mobile, tablet, and large screen browsers accessible. During the course you will develop a professional-quality web portfolio demonstrating your growth as a web designer and your knowledge of accessible web design. This will include your ability to design and implement a responsive website that utilizes tools to create a site that is accessible to a wide audience, including those with visual, audial, physical, and cognitive impairments.


  1. HTML5

    Agenda

    • Select an editor that can edit an HTML5 Document
    • Configure a development environment for HTML5
    • Apply tools to validate an HTML5 Document
    • Describe the markup language used to create an HTML5 document
    • Describe how tags are used to create an HTML5 document
    • Apply the !DOCTYPE declaration to an HTML5 document
    • Define the structure of an HTML5 document
    • Create the basic head section in an HTML5 document
    • Create the basic body section in an HTML5 document
    • Create the basic document structure for an HTML5 document
    • Apply meta tags to an HTML5 document
    • Use the new meta tags introduced in HTML5
    • Create comments in HTML5
    • Describe how the paragraph tag is used in HTML5
    • Create paragraph and line break tags in an HTML5 document
    • Create heading tags in an HTML5 document
    • Describe best coding practices for HTML5
    • Describe how to space and format code in an HTML5 document
    • Describe how to create a hyperlink in HTML5
    • Use a hyperlink in an HTML5 document
    • Create an in-site hyperlink in an HTML5 document
    • Create an e-mail link in an HTML5 document
    • Specify when to use an Absolute versus a Relative link
    • Apply font styling to an HTML5 document
    • Use special characters in an HTML5 document
    • Understand how HTML5 is used to generate a web page
  2. CSS3

    Agenda

    • Relation of CSS3 with HTML5
    • Structure of the CSS3 syntax for HTML5
    • Inline CSS3 styles in an HTML5 document
    • Add an attachment link to include a file in an HTML5 document
    • Create a CSS3 style sheet file for HTML5
    • Apply CSS3 syntax to add style to an HTML5 document
    • Use inline CSS3 in an HTML5 document
    • Add an external CSS3 style sheet to an HTML5 document
    • Why using an external CSS3 style sheet is better than doing it within an HTML5 document?
    • Perform modifications to HTML5 tags using CSS3
    • Apply formatting to an HTML5 table in order to alternate the row colors using CSS3
    • Describe the block elements used in HTML5
    • Create styled HTML5 lists using CSS3
    • Use CSS3 to manipulate DIVs in an HTML5 document
    • Styled HTML5 list bullets using CSS3
    • Apply CSS3 to small sections of the HTML5 web page by using SPAN tags
    • How ID and class attributes added to HTML5 tags can allow for fine grain CSS3 styling
    • Create CSS styles that will apply to only an element with a given ID in an HTML5 document
    • Create CSS styles that will apply to all elements with the given class in an HTML5 document
    • Aadd style to a hyperlink in an HTML5 document using CSS3
    • Add CSS3 style to a hyperlink's hover and visited states in a HTML5 document
    • Use CSS3 to change the color of visited links in an HTML5 document
    • How to apply a style only to the child elements, also referred to as nested elements, of an element in an HTML5 document
    • Hto change, add, or remove a style to a single element that already has a CSS3 style applied in an HTML5 document
    • Use CSS3 to hide or display HTML5 objects
    • Apply CSS styles to HTML pages
    • Apply a transform to rotate an object in an HTML5 document
    • Distort an object using the transform matrix in an HTML5 document
    • Describe how to apply a 3D transformation to an object in an HTML5 document
    • Use a transform to position an object in HTML5
    • Add scaling to an object using a transform in HTML5
    • Apply a transform to skew an object in HTML5
    • Use a transform to add a perspective to an object in an HTML5 document
    • Describe how to use CSS3 to create an animation in HTML5
    • Create an animated picture using CSS3 in an HTML5 document
    • Describe how CSS3 animation keyframes are used in HTML5
    • Cycle the color of a div using CSS3 animation in an HTML5 document
    • Rotate objects using CSS3 animation in an HTML5 document
    • Describe some of the advanced CSS3 animation techniques available in HTML5
    • Use CSS3 to change a web site's background color in an HTML5 document
    • Use CSS3 to change a web site's background image in an HTML5 document
    • Describe how to use CSS3 styles to modify background images in an HTML5 document
    • Apply CSS3 styles to create columns and flow text in an HTML5 document
    • Describe how and when to use image alignment in HTML5
    • Describe CSS3 pseudo selectors in HTML5
    • Apply CSS3 pseudo selectors to an HTML5 document
    • Use CSS3 drop shadows in an HTML5 document
    • Apply CSS3 linear gradients in an HTML5 document
    • Create radial gradients in CSS3 in an HTML5 document
    • Create gradient text using CSS3 in an HTML5 document
    • Add transparency to objects in HTML5 using CSS3
    • Use CSS3 to change the range slider style in an HTML5 document
    • Draw triangles using CSS3 in HTML5
    • How to programmatically apply CSS3 transitions and animations, 2D and 3D transforms
  3. RESPONSIVE WEB DESIGN WITH BOOTSTRAP

    Agenda

    • How bootstrap came about and why it was necessary
    • What Bootstrap is, and how it is intended to be used
    • What is necessary for hardware and software requirements to run Bootstrap effectively
    • How CSS is used to define, but not limit developers
    • The default grid system and how it can be extended with the responsive CSS files added
    • Different grid layouts and how to enable responsive features
    • How to offset and nest columns
    • What a fixed grid is and why it would be used
    • What a fluid grid is and why it would be used
    • What basic typography is and describe how the scaffolding.less is involved
    • Apply basic Inline and Block code
    • Create the basic table and then add in the optional classes
    • Use the default style of forms and then show some optional layouts
    • Create the default buttons, change their sizes, and add different elements including, but not limited to, the disabled element
    • Create image placeholders for an image with rounded corners, a circle, and an image thumbnail
    • Use classes to assist in simplifying formatting efforts
    • Use classes to assist in visually changing the different elements on a page, based on window size or state
    • Different layout components
    • Glyphicons
    • Dropdown class and add values to it, including headers and select values
    • Build a single button group, a multiple button group, and vertical button group
    • Create a button dropdown menu and make some of the options available
    • Merge dropdowns with button groups
    • Use button dropdown selections to update items
    • Emulate a forms submission
    • Create input groups and add the available options
    • Create an interactive tabular navigation bar
    • Add dropdown menus to pill style navigation elements
    • Responsive navigation bar
    • Breadcrumbs
    • Pagination
    • Labels
    • Badges
    • Purpose of the Jumbotron and how to apply it
    • Page header
    • Default and custom elements of the Thumbnails component
    • Accordion
    • Different examples of alerts
    • Implement the progress bar
    • Describe what the media object is and implement the default media
    • Use a list group with a basic example, linked items, and custom content
    • Create a basic panel and a panel with a heading
    • Use a default well and the optional classes
    • Implement transitions
    • Tooltips
    • Tabs
    • Carousel
  4. FORMS

    Agenda

    • Build a form using Bootstrap
    • Outline the input types that Bootstrap supports
    • Configure a drop-down list box
    • Work with radio buttons and checkboxes
    • Control the state of a form and its controls
    • Change the border of an image and implement a utility
    • Examine utility classes that control positioning and responsiveness
    • Demonstrate the use of iconic fonts
    • Group buttons for special effect
    • Prepend and append text or buttons to text-based input
Learn With Sajid Holy Request Course Demo

Learning is a Treasure that will follow its owner everywhere.