Website Development Study Sheets - CSS

Self-checks, answers and notes for designing with CSS

Self-Check Sheet 1 — Plan a Website

  1. Why is it essential to define the purpose of a website before starting the design and development process?
    Defining purpose gives clarity and focus, aligns design and content with goals, and prevents scope creep and ineffective design.
  2. Can you provide an example of how the purpose of a website influences its design?
    An e-commerce site focuses on product discovery and checkout flow — product grids, filtering, cart and payment UX — because its purpose is to sell.
  3. What are the key steps in defining the purpose of a website?
    Identify goals, define target audience, list primary & secondary objectives, and document expected user journeys.
  4. Why is selecting an appropriate colour scheme important in design requirements?
    Colours set tone, influence emotions and legibility, and support brand recognition and accessibility.
  5. How does typography impact user experience, and why is it a design requirement?
    Typography affects readability, hierarchy and perceived trustworthiness; right choices improve comprehension and scanning.
  6. Why is a well-designed user interface (UI) important, and how does it enhance a website's usability?
    Good UI makes navigation intuitive, clarifies actions (buttons/controls), and reduces user errors — improving overall usability.
  7. Can you give an example of how technical limitations can impact design choices?
    If you must support older browsers, you may avoid modern CSS features (e.g., CSS grid) or advanced animations, adjusting layout approaches accordingly.
  8. How does recognizing constraints upfront benefit the design process?
    It sets realistic scope, reduces rework, and helps choose feasible techniques and priorities early on.
  9. Can you provide an example of how budget constraints might influence design choices?
    Limited budget may favor template-based designs or fewer custom components rather than expensive custom animations or integrations.
  10. Why is creating a conceptual design important, and how does it relate to the website's purpose?
    A conceptual design maps structure & layout to goals, ensuring the website's navigation and content support the purpose.
  11. How can wireframes and mockups be helpful in the conceptual design phase?
    They visualize content placement and interactions, enabling feedback and iteration before development.
  12. Why is content strategy integral to the conceptual design phase?
    Content strategy ensures the right content types (text, images, video) are planned and positioned to meet user needs and goals.
  13. How does a content strategy reflect the website's purpose and audience?
    It defines tone, topics and formats targeted to the audience while supporting the site's objectives (e.g., educate, sell, inform).
  14. Can you provide an example of purpose-driven content for a website?
    On an e-commerce site: product descriptions, pricing, shipping info, and reviews that directly support purchasing decisions.

Self-Check Sheet 2 — Design the Website using CSS

  1. What does CSS stand for?
    Cascading Style Sheets.
  2. What is the purpose of CSS?
    To control presentation & layout of HTML (colors, fonts, spacing, animations).
  3. What are the three ways to include CSS in an HTML document?
    Inline, internal (style tag), and external (link stylesheet).
  4. What is the difference between class and ID selectors in CSS?
    Classes (.) can be used on multiple elements; IDs (#) should be unique per page.
  5. How can you select all <a> (anchor) elements within a specific <div> element?
    div a { /* styles */ }
  6. How do you select an element with the ID "my-element" using CSS?
    #my-element { /* styles */ }
  7. What is the CSS box model?
    A model consisting of content, padding, border and margin that defines element dimensions and spacing.
  8. How can you center a block-level element horizontally in CSS?
    Set a width and use margin: 0 auto;.
  9. How can you apply multiple CSS classes to an element?
    Add multiple class names separated by spaces, e.g. class="btn primary large".
  10. How do you specify a font-family in CSS?
    font-family: "Arial", sans-serif;
  11. What is the purpose of the display property in CSS?
    To control how an element is rendered (block, inline, grid, flex, none, etc.).
  12. How can you apply a background image to an element in CSS?
    background-image: url("image.jpg");
  13. What is the difference between margin and padding in CSS?
    Margin: space outside border. Padding: space between content and border.
  14. What is the purpose of media queries in CSS?
    Apply different styles based on viewport/device features (screen size, orientation).
  15. How can you create a CSS animation?
    Use @keyframes and the animation property on the element.
  16. What is the purpose of the float property in CSS?
    Float positions elements left or right, allowing inline wrapping of text (legacy layout technique).
  17. How can you hide an element in CSS?
    Use display: none; or visibility: hidden;.
  18. What is the difference between em and rem units in CSS?
    em is relative to parent font-size; rem is relative to root (<html>) font-size.
  19. What is a responsive layout?
    A layout that adapts to various screen sizes and devices to provide optimal UX.

Self-Check Sheet 3 — Enhance Website using CSS Framework

Multiple Choice Questions (MCQs)

  1. What are front-end frameworks primarily used for?
    a) Backend development
    b) Database management
    c) User interface (UI) development
    d) Server configuration
  2. Why are front-end frameworks crucial for web developers?
    a) They simplify server-side scripting.
    b) They provide database management tools.
    c) They help create responsive and interactive user interfaces.
    d) They optimize server performance.
  3. Which of the following is NOT a benefit of using front-end frameworks?
    a) Accelerated development speed
    b) Low code requirements
    c) Increased server security
    d) Easy maintenance
  4. What does the Bootstrap front-end framework prioritize in its design approach?
    a) Desktop-first design
    b) Mobile-first design
    c) Tablet-first design
    d) Cross-browser compatibility
  5. What is the purpose of Bootstrap's grid system?
    a) To create responsive layouts
    b) To manage server resources
    c) To generate database queries
    d) To optimize SEO performance
  6. What is the purpose of conducting user testing when presenting mockups?
    a) To gather quantitative feedback
    b) To validate design decisions
    c) To create clickable prototypes
    d) To document design decisions
  7. Which of the following tools can be used to convert Bootstrap mockups into clickable prototypes?
    a) Bootstrap documentation
    b) Google Docs
    c) InVision
    d) Adobe Photoshop
  8. What is the primary benefit of A/B testing in the mockup testing process?
    a) Gathering qualitative insights
    b) Validating design principles
    c) Comparing design variations
    d) Conducting usability testing
  9. In design critiques, what is the main purpose of presenting mockups to a group of people?
    a) To finalize the design
    b) To identify potential issues
    c) To create clickable prototypes
    d) To gather quantitative feedback
  10. What is the purpose of emphasizing interactive elements when presenting mockups?
    a) To showcase visual design
    b) To engage stakeholders
    c) To gather user feedback
    d) To highlight functionality

Short Questions — Frameworks

  1. Explain the importance of a mobile-first design approach in front-end development.
    Designing mobile-first ensures the core experience works for the majority of users and scales up to larger screens, encouraging focus on essential content and performance.
  2. How does Bootstrap's grid system work, and why is it useful?
    Bootstrap uses a 12-column grid; designers place content in rows and columns which collapse and reorder across breakpoints, simplifying responsive layouts.
  3. Describe the role of typography in web design and how Bootstrap helps.
    Typography sets hierarchy and readability; Bootstrap offers utility classes and consistent typographic scale for quick, uniform styling.
  4. Buttons and use-cases in design; how Bootstrap simplifies them.
    Buttons trigger actions (submit, navigate). Bootstrap supplies ready-made button classes (btn, btn-primary) for consistent styling and states.
  5. What is a modal and an example use-case?
    A modal is a dialog overlay used for focused tasks like sign-up forms or confirmation prompts, preventing navigation away from the current page.
  6. Key advantage of using Bootstrap for mockups.
    Rapid prototyping using predefined components and responsive grid reduces development time.
  7. Ensuring responsiveness in Bootstrap mockups.
    Test across breakpoints and devices; use Bootstrap’s responsive classes and utilities to adjust layout and spacing.
  8. Purpose of documenting design decisions.
    Keeps rationale, constraints and iteration history clear for stakeholders and future maintenance.
  9. ifference between usability testing and A/B testing. D
    Usability testing observes how users interact (qualitative); A/B testing compares variations to measure which performs better (quantitative).
  10. Why contextualize mockups for stakeholders?
    Explains the problem solved, user needs addressed, and how the design meets objectives — making feedback more targeted.

Self-Check Sheet 4 — Test and Confirm the Website

  1. What is the primary goal of functional testing in web development?
    A. Checking website compatibility
    B. Ensuring cross-browser compatibility
    C. Verifying that interactive elements work as intended
    D. Evaluating website fitness for purpose
  2. During functional testing, what is the purpose of regression testing?
    A. To identify errors systematically
    B. To ensure cross-browser compatibility
    C. To check responsiveness on mobile devices
    D. To confirm that fixes haven't introduced new issues
  3. Why is validation of HTML and CSS code essential in functional testing?
    A. It ensures cross-browser compatibility.
    B. It identifies visual discrepancies.
    C. Valid code is less prone to errors.
    D. It improves website performance.
  4. What is the purpose of cross-browser compatibility testing?
    A. To ensure that the website is accessible
    B. To verify that the website functions as intended
    C. To confirm that the website appears consistent on different browsers
    D. To evaluate the website's loading speed
  5. Why is responsive design testing important for a website?
    A. To check for broken links
    B. To ensure accessibility
    C. To verify functionality
    D. To adapt to different screen sizes
  6. What is the main goal of accessibility testing?
    A. To verify functionality
    B. To ensure cross-browser compatibility
    C. To make the website usable for people with disabilities
    D. To assess website performance
  7. In the context of website evaluation, what should you do to ensure the website aligns with client requirements?
    A. Conduct usability testing
    B. Review client feedback
    C. Assess the loading speed
    D. Review initial client requirements
  8. What is the purpose of usability testing during website evaluation?
    A. To assess loading speed
    B. To gather feedback on the user experience
    C. To identify broken links
    D. To ensure cross-browser compatibility
  9. Why is performance evaluation important for a website?
    A. To ensure accessibility
    B. To verify functionality
    C. To assess loading speed and overall performance
    D. To check for broken links
  10. What should be reviewed to ensure that website content is accurate and relevant?
    A. Browser compatibility
    B. Code validation
    C. Content alignment
    D. Client feedback