Web Development Part 2

Take a deeper look at front-end design and development to develop complex, interactive websites and apps. Focus on more advanced areas of HTML5 including CSS, JavaScript, forms, advanced UI design with transitions and animations, SVG, drawing and animation with Canvas and more.



  • Learn the proper use of the
    <header>, <footer>, <nav>, <section>, <article> and <aside>tags.
  • Understand the roles of <strong> vs <b> and <em> vs <i>, <s> and <i>
  • How to use the updated “rel” attribute as well as the “data-” attribute.
  • Using grouping tags such as <figure>
  • Understanding microformats and how they can benefit your SEO.
  • Learn about the many new form element features like:
    • Required fields.
    • Number and Range input.
    • Email input.
    • Date and color fields.
    • Regular expression pattern matching.
  • Create an “autocomplete” field using the <datalist> tag.
  • Making browser applications with tags to denote progress.
  • An overview of CSS selectors, from the universal selector to attribute selectors.
  • An overview of CSS selector and naming methodologies.
  • Handling the more complicated tag nesting by using the child and sibling selectors instead of the descendant selector.
  • Visual tricks with CSS rounded corners, multiple background images and drop shadows..
  • Creating gradients in CSS.
  • Formatting tabular data with pretty tables.
  • Scaling, rotating and skewing page elements with CSS transforms.
  • Enhancing user interaction with CSS3 transitions.
  • Advanced motion with CSS3 animation properties.
  • Simulating the third dimension with 3d transforms and perspective.
  • Coming soon to a browser near you – CSS Shapes, blend modes.
  • An overview of modern layout methods.
  • A deeper look into flexbox vs. grid.
  • Flexbox for horizontal or vertical flowing layout elements.
  • CSS grid for true control over modern, responsive page layout.
  • Using web fonts to significantly increase your font choices.
  • Responsive typographic solutions.
  • Pixels vs. ems vs. rems vs. ch vs. viewport size units.
  • Calculating values with calc().
  • Using custom properties (CSS variables).
  • CSS production approaches and methodologies such as BEM and SMACSS.
  • Intro to Sass
  • Using inline SVG (Scalable Vector Graphics) to add scalable, printable graphic elements with just markup.
  • Adding rectangles, rounded rectangles, circles, ellipses, and lines without the need of a graphics application.
  • Styling and grouping SVG elements.
  • Using applications like Adobe Illustrator and Inkscape to export complex SVG.
  • Interacting with the SVG as part of the DOM using JavaScript.
  • Animating SVG with CSS or JavaScript.
  • CSS tricks with SVGs such as borders and background images.
  • Helpful libraries like GSAP and snap.svg for SVG anaimations and interactivity.
  • Defining the drawing area with the <canvas> tag.
  • Getting access to the canvas with JavaScript.
  • Setting drawing properties.
  • Drawing lines, shapes and paths with the canvas API.
  • Adding bitmap images to the canvas drawing space.
  • Animating the canvas.
  • Exploring JavaScript libraries like D3 or p5.js that use the HTML5 canvas.



Class Length: 3 Days
Price: $1299

This open enrollment class is offered online with a live instructor.

Upcoming Dates:

Prerequisites:

Attendees must have a solid working knowledge HTML & CSS