CSS Fundamentals Practice

This assignment helps you practice and demonstrate your understanding of CSS fundamentals through a series of mini assessments. You will work with an AI assistant to analyze code, identify issues, and explain CSS concepts. This format allows you to learn through conversation and develop your ability to articulate technical concepts.

Complete each challenge below by copying the code and AI prompt template into your preferred AI tool (ChatGPT, Claude, etc.). Have a conversation with the AI about each challenge, then submit a reflection documenting what you learned.

How to Complete This Assignment

1. Read through each challenge below to understand what you need to analyze
2. Attempt each challenge on your own first without AI assistance. You may copy the code to VS Code to test it, but disable any AI coding assistants while working.
3. After making your best attempt, use the copy icon above each code block to copy both the code and AI prompt template
4. Paste into your AI assistant (ChatGPT, Claude, etc.) and discuss your solution
5. Have a conversation with the AI about your answers, asking for clarification when needed
6. Move to the next challenge and repeat
7. After completing all challenges, fill out the reflection form at the end

Challenge 1: Specificity Conflicts

       /* Analyze which color applies to each paragraph element below */
       
       p {
           color: blue;
       }
       
       .intro {
           color: green;
       }
       
       #special {
           color: red;
       }
       
       div p {
           color: purple;
       }
       
       .container .intro {
           color: orange;
       }
       
       #special.intro {
           color: brown;
       }
   

       <!-- HTML for reference: -->
       <div class="container">
           <p>Paragraph 1</p>
           <p class="intro">Paragraph 2</p>
           <p id="special">Paragraph 3</p>
           <p id="special" class="intro">Paragraph 4</p>
       </div>
   

Challenge 2: Box Model Calculations

       /* Calculate the actual rendered dimensions */
       
       .box-one {
           box-sizing: content-box;
           width: 300px;
           height: 200px;
           padding: 20px;
           border: 5px solid black;
           margin: 10px;
       }
       
       .box-two {
           box-sizing: border-box;
           width: 300px;
           height: 200px;
           padding: 20px;
           border: 5px solid black;
           margin: 10px;
       }
   

Challenge 3: Cascade Order

       /* Which background color applies? */
       
       div {
           background: blue;
       }
       
       .box {
           background: green;
       }
       
       div {
           background: red;
       }
       
       .container .box {
           background: purple;
       }
       
       .box {
           background: orange;
       }
   

       <div class="container">
           <div class="box">What color am I?</div>
       </div>
   

Challenge 4: Mobile-First Media Queries

       /* Is this mobile-first? If not, fix it. */
       
       .navigation {
           display: flex;
           flex-direction: row;
           justify-content: space-between;
           padding: 2rem;
           font-size: 1.2rem;
       }
       
       @media (max-width: 768px) {
           .navigation {
               flex-direction: column;
               padding: 1rem;
               font-size: 1rem;
           }
       }
   

Challenge 5: Print Styles with Link URLs

       /* Complete the print styles */
       
       nav {
           display: flex;
           gap: 1rem;
           padding: 1rem;
           background: #333;
       }
       
       a {
           color: #0066cc;
           text-decoration: none;
       }
       
       /* Add @media print rule here to:
          1. Hide the nav element
          2. Make links black and underlined
          3. Show the URL after each link using attr()
          4. Do NOT show URLs for anchor links (href starting with #)
       */
   

Challenge 6: Nested Media Queries

       /* Rewrite using nested media queries */
       
       .card {
           padding: 1rem;
           background: white;
           border-radius: 8px;
       }
       
       @media (width >= 768px) {
           .card {
               padding: 2rem;
               display: grid;
               grid-template-columns: 200px 1fr;
           }
       }
       
       @media (width >= 1024px) {
           .card {
               padding: 3rem;
               grid-template-columns: 300px 1fr;
           }
       }
   

Submission

After completing all six challenges, fill out the reflection form below. Once complete, click the download button to generate a PDF and submit it through Canvas.

Grading Criteria

This assignment will be graded on:

• Completion: Evidence that you worked through all six challenges
• Understanding: Your reflection demonstrates comprehension of the concepts
• Engagement: You asked meaningful questions and explored topics in depth
• Explanation: You can articulate technical concepts clearly in your own words

The goal is to develop your understanding and your ability to communicate about CSS. Thoughtful engagement with the material is more valuable than perfect answers.