Laying Things Out (Positioning & Structure)

• Line up items in a neat row. GRP: 001
• Stack items one on top of the other. GRP: 002
• Space items out evenly in a row or column. GRP: 003
• Push some items to one side and others to the opposite side in a row. GRP: 004
• Center something perfectly in the middle of a box (both ways). GRP: 005
• Center a whole block of content on the page. GRP: 006
• Arrange items in a grid (like a checkerboard or photo album). GRP: 007
• Make something stretch to fill the entire width or height available. GRP: 008
• Place one item on top of another (overlapping). GRP: 009
• Make something stick to the top or side of the screen even when you scroll. GRP: 010

Styling Common Web Page Parts

• Create a basic, clickable button look. GRP: 011
• Give buttons rounded or pill-shaped corners. GRP: 012
• Create "outlined" buttons (border, no fill). GRP: 013
• Style text boxes where users type information. GRP: 014
• Style checkboxes and radio buttons. GRP: 015
• Design "cards" – boxes holding content. GRP: 016
• Build a horizontal navigation bar. GRP: 017
• Create a list of links down the side (sidebar menu). GRP: 018
• Make lists (bullet points or numbers) look good. GRP: 019
• Create small notification badges or tags. GRP: 020
• Make profile pictures or avatars circular. GRP: 021
• Add lines to separate content (dividers). GRP: 022
• Style pop-up messages (like success or error alerts). GRP: 023

Working with Text

• Control how big or small text is. GRP: 024
• Change the color of text. GRP: 025
• Make text bold, normal, or light (font weight). GRP: 026
• Adjust the space between lines of text. GRP: 027
• Line up text (left, center, right). GRP: 028
• Cut off long text with "..." (ellipsis). GRP: 029

Adding Visual Flair & Decoration

• Put borders around things (or just on one side). GRP: 030
• Make corners rounded instead of sharp. GRP: 031
• Add shadows to make things look like they're lifting off the page. GRP: 032
• Change background colors or add background pictures. GRP: 033
• Make things partly see-through (transparent). GRP: 034
• Create smooth color transitions (gradients) for backgrounds. GRP: 035

Making Things Interactive & Respond to Users

• Change how something looks when the mouse pointer is over it. GRP: 036
• Change how something looks when it's being clicked. GRP: 037
• Change how a form field looks when you click into it to type. GRP: 038
• Style things that are "disabled" (can't be clicked or used). GRP: 039
• Make style changes happen smoothly (animations/transitions). GRP: 040

Making Websites Work on All Screen Sizes (Responsiveness)

• Hide something on small screens but show it on big screens (or vice versa). GRP: 041
• Change how many items are in a row depending on screen size. GRP: 042
• Make items stack vertically on small screens that were side-by-side on larger screens. GRP: 043
• Use different text sizes for different screen sizes. GRP: 044
• Create a "hamburger" menu icon that opens a navigation list on mobile. GRP: 045

Organizing Your Styles & Customizing

• Use consistent spacing everywhere. GRP: 046
• Create a "Dark Mode" version of your site. GRP: 047
• Set up your website's main colors to match a brand. GRP: 048
• Use specific fonts for your website's text. GRP: 049
• Group common styles to reuse them easily (like a "main button" look). GRP: 050