Deep Dive into HTML and CSS

Learn to create beautiful interfaces

Start Course

The course is built of interactive exercises

This is the most effective way to learn since from the very beginning we teach you with live coding to independently solve tasks similar to real ones.

  • Learning with interactive courses means constant practice

    20% of the time you study theory and 80% of the time you write code. Only this approach allows you to gain knowledge and sharpen your skills to the maximum. A perfect start.

  • Interactive courses allow you to study at a comfortable pace

    You can study at your own pace and visually track your progress.

  • Is the course right for you?

    This course is for those who can create small or medium-sized projects at the freelance level and want to grow in the field of complex product development.

  • Your level after the course

    After completing the course, you’ll gain the arsenal of skills of a front-end developer who starts the path of creating product interfaces.

  • What you will learn:

    In this course we will analyze some advanced tasks and technologies that you can come across in the development and optimization of interfaces:

    • Techniques for optimizing the performance of interfaces, creating complex CSS graphics and decorative effects,
    • Techniques for creating interface animations and micro-animations using CSS tools,
    • The internals of the SVG format, which is critical for designing complex interactive elements, optimizing interfaces, and creating some decorative effects.

Syllabus

  1. Section 1. Advanced Decorative Effects
    • 2D transforms, multiple transforms.
    • Types of transforms: moving objects horizontally and vertically, rotation, skew, scaling.
    • Flipping horizontally and vertically.
    • Assigning origin points of transforms.
    • Using transforms for interface tricks: centering, vertical text, skewed buttons, custom shadows, round menu.
    • CSS filters to change brightness, contrast, discoloration.
    • CSS filters to control color saturation, color inversion and color rotation.
    • CSS filters to add blur, change opacity and add shadows.
    • Differences between box-shadow and drop-shadow.
    • Animating CSS filters.
  2. Section 2. Advanced Work with Backgrounds and Frames
    • Managing the size of background images. Special cover and contain modes.
    • Managing background display areas and cropping: background-origin and background-clip.
    • Working with multiple background images.
    • Positioning the background relative to different borders of containers.
    • Background repetition mode: round and space.
    • Property for creating outer frames: outline and its features.
    • Rounding corners. Different radii of the rounding of different corners. Managing horizontal and vertical rounding radii.
    • Working with frame images. Areas of a frame image, slicing the image and placing the pieces in the areas of the frame.
    • Symmetrical and asymmetrical slicing.
    • Managing repetition, size and placement of frame images.
    • Techniques for creating interfaces using frames and backgrounds: creating triangles, round interface elements, decorative frames, arrows.
  3. Section 3. Interface Animations
    • Smooth transitions between CSS property values. Transition duration control.
    • Managing the list of properties with smooth transitions.
    • Managing transition delay and timing function.
    • Predefined timing functions: ease, linear, ease-in, ease-out, ease-in-out. Arbitrary timing function: cubic-bezier. Discrete time function: steps.
    • Examples of micro-animations in interfaces using smooth transitions: buttons with smooth switching, transforming checkboxes, radio buttons and icons, toggle switches, a dynamic placeholder in the input field.
    • CSS animations with keyframes.
    • Description of keyframes. Initial, final and intermediate keyframes. Frame grouping.
    • Complex animations.
    • General animation parameters: duration, play count, animation direction, animation delay.
    • Managing pre- and post-animation state. Pausing an animation.
    • Timing functions of animations with keyframes: predefined, arbitrary and discrete.
    • Examples of creating complex animated scenes using frame-by-frame animation.
  4. Section 4. SVG Basics
    • SVG format. Differences between a vector and a raster.
    • Basic SVG shapes: rectangle, circle, ellipse, polygon, line, polyline.
    • Managing the dimensions and coordinates of SVG shapes. Dimensions and coordinates in percentages.
    • Rectangle with rounded corners.
    • Controlling the fill of SVG shapes using attributes and CSS. Fill opacity.
    • Controlling strokes of SVG shapes using attributes and CSS. Stroke opacity, width and offset.
    • Controlling the shape of line ends and the shape of bends.
    • Working with dashed lines. Creating a dashed line with a complicated rhythm.
    • Managing the dimensions of SVG elements and dimensions of viewBox. The viewBox attribute.
    • Controlling the aspect ratio and alignment of the viewBox. The preserveAspectRatio attribute.
    • Flexible background with preserveAspectRatio.
    • Units and coordinate systems in SVG. Viewport coordinate system and user coordinate system.
    • Coordinate systems and transforms.
    • Examples of drawing SVG images.

Start learning

This course is a logical continuation of the «Deep Dive into HTML Layout» course.

Course

Deep Dive into HTML and CSS

$ 149
Buy now

By pressing the «Buy now» button, you agree to our «License Agreement» and «Privacy Policy».