DOCSEARCHbyAlgolia
Submit Docs

Uni-Docs Web Design Documentation

website·Indexed 29 days ago

https://uni-docs.netlify.app

Educational resources for web design, covering HTML fundamentals (syntax, tags, tables, and semantic structure) and CSS basics (selectors, box model, text styling, and positioning). Includes guidance on UI design principles such as balance, contrast, hierarchy, and white space, along with an interactive code editor for testing HTML.

Tokens
16.7K
Snippets
103
Records
141
Agent score
74%

What's inside Uni-Docs

  1. Overview of Web Design disciplines

    Web design involves the creation and maintenance of websites, primarily focusing on the front-end design process. It overlaps with web engineering within the broader scope of web development. Key areas of web design include:

    • Graphic Web Design
    • User Interface (UI) Design
    • User Experience (UX) Design
    • Search Engine Optimization (SEO)

  2. Role of HTML in web development

    HTML (HyperText Markup Language) is the fundamental building block of the web. It is used to define the meaning and structure of web content. The 'HyperText' aspect refers to the links that connect webpages within a single site or across different sites, enabling the interconnected nature of the World Wide Web.

  3. Understand the difference between UI and UX design

    Web design is the process of designing web interfaces. It is divided into two primary disciplines:

    • User Interface (UI) Design: Focuses on the visual appearance and look of the interface.
    • User Experience (UX) Design: Focuses on how the user navigates the website and their overall interaction with the product.

  4. Add descriptive tooltips to links with the title attribute

    Use the title attribute within an <a> element to provide additional information about the link, which typically appears as a tooltip when a user hovers over the link.
    <a href="https://www.mozilla.org/en-US/"
title="The best place to find more information about Mozilla's mission">
  the Mozilla homepage
</a>

  5. Understand the purpose and capabilities of CSS

    CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of documents written in HTML or XML. It allows developers to control the visual layout and design of web pages, separating the document structure (HTML) from its visual representation (rendering). Key capabilities include:

    • Styling text (changing colors, sizes of headings and links).
    • Creating complex layouts (grid layouts, multi-column layouts).
    • Implementing visual effects and animations.

  6. Role of CSS in web development

    CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of documents written in HTML or XML (including SVG, MathML, or XHTML). It determines how elements are rendered on screens, paper, or other media. Modern CSS is standardized by the W3C and is managed as a collection of individual modules rather than monolithic versions (like CSS3 or CSS4).

  7. Understand the CSS Box Model components

    The CSS box model defines how every visible element on a web page is rendered as a rectangular box. The model consists of four layers that wrap around the content from the inside out:

    1. Content Area: The innermost part containing the actual content (text, images, video). Its size is controlled by width and height properties.
    2. Padding Area: The space immediately around the content, inside the border. Controlled by padding, padding-top, padding-right, padding-bottom, and padding-left.
    3. Border Area: The line surrounding the padding and content. Controlled by border and border-width.
    4. Margin Area: The outermost space used to separate the element from its neighbors. Controlled by margin, margin-top, margin-right, margin-bottom, and margin-left.

  8. Understand HTML basic syntax and tags

    HTML (HyperText Markup Language) uses markup to define the structure and meaning of web content. It uses tags to identify special elements. A tag consists of an element name enclosed in angle brackets (< and >). While HTML tags are case-insensitive (e.g., <title>, <Title>, and <TITLE> are treated the same), the standard convention and best practice is to use lowercase.

  9. Understand HTML basic syntax and structure

    An HTML document is a plain text file (typically with a .html or .htm extension) structured using elements. Elements are defined by matching opening and closing tags enclosed in angle brackets (<>). Some elements are 'void' (empty), meaning they cannot wrap text and do not have a closing tag, such as <img>. Tags can be extended with attributes that provide additional information to the browser on how to interpret the element.

  10. Use HTML attributes to extend element behavior

    Attributes provide additional information or metadata about an HTML element and are always placed within the opening tag. They typically follow the format name="value".

    • Standard Attributes: Used to change behavior or provide identifiers (e.g., class is used for CSS styling or JavaScript targeting).
    • Boolean Attributes: These are controlled solely by their presence or absence in the tag; they do not require a value.
    <!-- Standard attribute -->
<div class="container"></div>

<!-- Boolean attribute example (presence indicates true) -->
<input disabled>

  11. Manage internal and external links using URL paths

    Links are categorized as internal (pointing to the same site) or external (pointing to a different site).

    • External Links: Must always use a full URL (absolute path) including the domain name (e.g., https://www.example.com).
    • Internal Links: Can use a full URL, an absolute path, or a relative path (e.g., projects/index.html).
    <!-- External link (Full URL required) -->
<a href="https://www.example.com/projects/">projects</a>

<!-- Internal link (Relative path) -->
<a href="projects">projects</a>

  12. Group table columns using <colgroup> and <col>

    The <colgroup> and <col> elements allow you to target and style entire columns as a group. This is particularly useful for applying styles (like background colors) to a specific column without having to apply the style to every individual cell in that column.