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.
- Create Visual Balance Using the text-align Property
- Adjust the Width of an Element Using the width Property
- Adjust the Height of an Element Using the height Property
- Use the strong Tag to Make Text Bold
- Use the u Tag to Underline Text
- Use the em Tag to Italicize Text
- Use the s Tag to Strikethrough Text
- Create a Horizontal Line Using the hr Element
- Adjust the background-color Property of Text
- Adjust the Size of a Header Versus a Paragraph Tag
- Add a box-shadow to a Card-like Element
- Decrease the Opacity of an Element
- Use the text-transform Property to Make Text Uppercase
- Set the font-size for Multiple Heading Elements
- Set the font-weight for Multiple Heading Elements
- Set the font-size of Paragraph Text
- Set the line-height of Paragraphs
- Adjust the Hover State of an Anchor Tag
- Change an Element's Relative Position
- Move a Relatively Positioned Element with CSS Offsets
- Lock an Element to its Parent with Absolute Positioning
- Lock an Element to the Browser Window with Fixed Positioning
- Push Elements Left or Right with the float Property
- Change the Position of Overlapping Elements with the z-index Property
- Center an Element Horizontally Using the margin Property
- Learn about Complementary Colors
- Learn about Tertiary Colors
- Adjust the Color of Various Elements to Complementary Colors
- Adjust the Hue of a Color
- Adjust the Tone of a Color
- Create a Gradual CSS Linear Gradient
- Use a CSS Linear Gradient to Create a Striped Element
- Create Texture by Adding a Subtle Pattern as a Background Image
- Use the CSS Transform scale Property to Change the Size of an Element
- Use the CSS Transform scale Property to Scale an Element on Hover
- Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
- Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
- Create a Graphic Using CSS
- Create a More Complex Shape Using CSS and HTML
- Learn How the CSS @keyframes and animation Properties Work
- Use CSS Animation to Change the Hover State of a Button
- Modify Fill Mode of an Animation
- Create Movement Using CSS Animation
- Create Visual Direction by Fading an Element from Left to Right
- Animate Elements Continually Using an Infinite Animation Count
- Make a CSS Heartbeat using an Infinite Animation Count
- Animate Elements at Variable Rates
- Animate Multiple Elements at Variable Rates
- Change Animation Timing with Keywords
- Learn How Bezier Curves Work
- Use a Bezier Curve to Move a Graphic
- Make Motion More Natural Using a Bezier Curve
Credits to FreeCodeCamp