BOX MODEL:
- Content : Text, images etc
- Padding: transparent area around the content, inside the box
- Border: Goes around the padding and content
- Margin: White Space between different boxes, page boundaries.
- Use border box so that you can modify height and width of boxes, disabled by default.
- top, right, bottom etc signify distance between parent element and current element.
- parent element should be relative.
- inline block doesn't cause new line, while block does.
INLINE ELEMENTS:
- Content and objects whose properties can't be modified.
CONVENTIONS:
- Remove default margins and paddings by setting them to 0 globally
- box-sizing to border box as mentioned above (its for the content by default)
- Responsive Web Design:
- Use of Fluid Grid: Such that all elements are sized in relative units
- Flexible Images: those sized in relative units
- Media Queries: Specify CSS for different browser widths
BEFORE GETTING STARTED
- Define the goal of your project
- Define your audience
- Plan your content, text, images, videos, icon, etc
- Always think about visual hierarchy
- Content first - then web
- Define the site structure
- Get ideas and store them
- Never start designing without an idea of what you want to do.
BEFORE LAUNCH:
- Boost speed