Introduction to the Applied Visual Design Challenges

Visual Design in web development is a broad topic. It combines typography, color theory, graphics, animation, and page layout to help deliver a site's message. The definition of good design is a well-discussed subject, with many books on the theme.

At a basic level, most web content provides a user with information. The visual design of the page can influence its presentation and a user's experience. In web development, HTML gives structure and semantics to a page's content, and CSS controls the layout and appearance of it.

This section covers some of the basic tools developers use to create their own visual designs.

Go to the first lesson

Upcoming Lessons

Create Visual Balance Using the text-align PropertyAdjust the Width of an Element Using the width PropertyAdjust the Height of an Element Using the height PropertyUse the strong Tag to Make Text BoldUse the u Tag to Underline TextUse the em Tag to Italicize TextUse the s Tag to Strikethrough TextCreate a Horizontal Line Using the hr ElementAdjust the background-color Property of TextAdjust the Size of a Header Versus a Paragraph TagAdd a box-shadow to a Card-like ElementDecrease the Opacity of an ElementUse the text-transform Property to Make Text UppercaseSet the font-size for Multiple Heading ElementsSet the font-weight for Multiple Heading ElementsSet the font-size of Paragraph TextSet the line-height of ParagraphsAdjust the Hover State of an Anchor TagChange an Element's Relative PositionMove a Relatively Positioned Element with CSS OffsetsLock an Element to its Parent with Absolute PositioningLock an Element to the Browser Window with Fixed PositioningPush Elements Left or Right with the float PropertyChange the Position of Overlapping Elements with the z-index PropertyCenter an Element Horizontally Using the margin PropertyLearn about Complementary ColorsLearn about Tertiary ColorsAdjust the Color of Various Elements to Complementary ColorsAdjust the Hue of a ColorAdjust the Tone of a ColorCreate a Gradual CSS Linear GradientUse a CSS Linear Gradient to Create a Striped ElementCreate Texture by Adding a Subtle Pattern as a Background ImageUse the CSS Transform scale Property to Change the Size of an ElementUse the CSS Transform scale Property to Scale an Element on HoverUse the CSS Transform Property skewX to Skew an Element Along the X-AxisUse the CSS Transform Property skewY to Skew an Element Along the Y-AxisCreate a Graphic Using CSSCreate a More Complex Shape Using CSS and HTMLLearn How the CSS @keyframes and animation Properties WorkUse CSS Animation to Change the Hover State of a ButtonModify Fill Mode of an AnimationCreate Movement Using CSS AnimationCreate Visual Direction by Fading an Element from Left to RightAnimate Elements Continually Using an Infinite Animation CountMake a CSS Heartbeat using an Infinite Animation CountAnimate Elements at Variable RatesAnimate Multiple Elements at Variable RatesChange Animation Timing with KeywordsLearn How Bezier Curves WorkUse a Bezier Curve to Move a GraphicMake Motion More Natural Using a Bezier Curve