These exercises are a series of CSS related tasks intended to complement the HTML and CSS content on The Odin Project.

  • By The Odin Project
  • Last update: Jan 8, 2023
  • Comments: 17

CSS Exercises

These exercises are a series of CSS related tasks intended to complement the HTML and CSS content on The Odin Project.

These exercises should be done when instructed during the course of the curriculum.

When doing the following exercises, please use all the documentation and resources you need to accomplish them. You are not intended to have any of this stuff memorized at this point. Check the docs, use Google, do what you need to do (besides checking the solutions) to get them done.

How to use these exercises

  1. Fork and copy this repository. To learn how to fork a repository, see the GitHub documentation on how to fork a repo. Copies of repositories on your machine are called clones. If you need help cloning to your local environment you can learn how from the GitHub documentation on cloning a repository.
  2. Go to an exercise directory and open the HTML file in your browser. You can either open the file directly, or use something like VSCode's Live Server.
  3. For each exercise, view the README, and edit the CSS file to make the output in your browser look like the images provided.
  4. Each README has a "Self Check" list. Use this to make sure you haven't missed any important details in your implementation.
  5. Don't check the solutions until you're done!

Some hints

  • The official solutions put all changes at the end of the CSS file, which may duplicate some selectors (e.g. there might be a body {} in the given CSS, and another body {} in the solution). When you are working on an exercise, it is best practice to add your CSS to existing selectors instead of duplicating them at the end of the file. We're sacrificing this best practice in our official solutions to make it extra clear to you what things we changed to solve the exercise.
  • Unless listed in the self-check section, do not worry about getting the exact pixel value for things like margin, padding and font-size. These exercises are intended to test your knowledge of CSS, not your ability to guess that a screenshot is using font: sans-serif bold 16px, or that the margin is exactly 42px.
  • You may need to add some elements to your HTML to get things into the right spot. (For the first few exercises we make it explicit when this needs to happen.)
  • You may need to add more selectors to your CSS file. The first few exercises have almost everything already done for you, but as you progress you'll find that you need to add more and more to get the correct result.
  • In many cases, there will be multiple correct ways to solve these problems. The official solution isn't necessarily the only right way, but it is possible to do things in ways that are overall unhelpful. If your solution differs wildly from the official solution (and still passes the self-check criteria), feel free to ask about it in the chatroom.

Github

https://github.com/TheOdinProject/css-exercises

Comments(17)

  • 1

    TheOdinProject/css-exercises/foundations: add indent to the and tags within for readability

    • [x] I have thoroughly read and understand the CSS Exercises Contributing Guide
    • [x] The title of this PR is in file/exercise/folder: brief description of changes format e.g. 01 flex center: add hint for XYZ
    • [ ] If one exists, I have linked a related open issue to this PR in Step 2 below
    • [ ] If changes were requested, I have made them and re-requested a review from the maintainer (top of the right sidebar)

    1. Description of the Changes

    Adjust the and indent inside the index.html files and solution.html files in the exercises.

    2. Related Issue

    Closes #XXXXX

  • 2

    03-grid-layout-3: remove empty declaration blocks

    Complete the following REQUIRED checkboxes:

    • [x] I have thoroughly read and understand The Odin Project Contributing Guide
    • [x] The title of this issue follows the location for request: brief description of request format, e.g. Foundations exercises: Add exercise for XYZ

    The following checkbox is OPTIONAL:

    • [ ] I would like to be assigned this issue to work on it

    1. Description of the Feature Request:

    Currently both the style.css and the pre-solution portion of the solution.css files for this exercise include empty declaration blocks, e.g:

    .logo {
}

    These empty declaration blocks are not used in other exercises in this repo and should be removed for consistency, and to avoid leading users towards a specific way of doing things (since this repo emphasizes that there are multiple ways of doing things).

    2. Acceptance Criteria:

    • [ ] Remove empty declaration blocks in the style.css and solution.css files

    3. Additional Information:

  • 3

    Foundations > 02-class-id-selectors: "DejaVu Sans" should be in quotes

    At solution.css:

    .odd {
  background-color: rgb(255, 167, 167);
  --> font-family: Verdana, DejaVu Sans, sans-serif; <--
}

    font-family: Verdana, DejaVu Sans, sans-serif; should be font-family: Verdana, "DejaVu Sans", sans-serif;

  • 4

    wrong solution for "flex/03-flex-header-2" exercise

    issue:

    • rightmost header components (button and notification) are not aligned with the desired outcome

    solution link:

    • https://github.com/TheOdinProject/css-exercises/blob/main/flex/03-flex-header-2/solution/solution.css, line 50 and beyond
  • 5

    Update solution.html

    the odd elements do not necessarly have to share a common class in this example , because they are already p elements .

    you may need to see the css file to get the idea

  • 6

    flex/04-flex-information

    It said twice in the self-check section that items should be arranged horizontally, not vertically. Yet in the solution there is align-items: center property in the .container class. Is that how it supposed to be? Third plant icon is visibly lover than others due to that.

  • 7

    06-cascade-fix: Add missing weight from solution.css

    [X] I have thoroughly read and understand The Odin Project Contributing Guide [X] The title of this PR follows the location of change: brief description of change format, e.g. 01-flex-center: Update self check

    The solution.css has a font weight of 800 on the classes .para, small-para, .small-para, and .child that were missing from the originally assigned style.css

  • 8

    logic not correct for exercise one of grid layout

    Link To exercise I believe logic should be reversed for the highlighted / boxed self check item below: css_grid

    It should be something along the lines of

    - The second column is three times larger than the first

    The solution provided also aligns with the second column being three times larger than the first column.

  • 9

    04-chaining-selectors: Exercise is solvable without selector chaining.

    The "original" photos in this exercise have hyphenated class values (original-proportioned/original-distorted).

    This makes it so that the exercise is solvable by only selecting the unique classes in the "avatar" photos. There's no need to chain the avatar class, since "proportioned" and "distorted" are not actually shared between the elements.

    Solution: Remove hyphens from the second set of photos.

  • 10

    CSS Exercises 2 - Font Recommendations Don't Match Screenshot

    The screenshot in the README.md file (https://user-images.githubusercontent.com/70952936/131268858-5360bb32-27ba-4ce0-be59-5fda97f5eb12.png) shows all text as sans-serif (potentially Verdana).

    The instructions state to only make the odd-numbered elements Verdana: "* All odd numbered elements: a light red/pink background, and a list of fonts containing Verdana as the first option and sans-serif as a fallback"

    When the solutions HTML file is previewed, the even-numbered elements are indeed in a serif (default) font.

    This mismatch between screenshot, instructions, and the solution file might cause an issue to people working based on the screenshot file as they will think their output doesn't match the provided screenshot.

  • 11

    Changes make my [email protected]

    Because

    This PR

    Issue

    Closes #XXXXX

    Additional Information

    Pull Request Requirements

    • [x] I have thoroughly read and understand The Odin Project Contributing Guide
    • [x] The title of this PR follows the location of change: brief description of change format, e.g. 01-flex-center: Update self check
    • [x] The Because section summarizes the reason for this PR
    • [x] The This PR section has a bullet point list describing the changes in this PR
    • [x] If this PR addresses an open issue, it is linked in the Issue section
    • [x] If applicable, I have ensured that the TOP solution files match the Desired Outcome image
  • 12

    CSS FONDATIONS EXERCICES

    Because

    This PR

    Issue

    Closes #XXXXX

    Additional Information

    Pull Request Requirements

    • [x] I have thoroughly read and understand The Odin Project Contributing Guide
    • [x] The title of this PR follows the location of change: brief description of change format, e.g. 01-flex-center: Update self check
    • [x] The Because section summarizes the reason for this PR
    • [x] The This PR section has a bullet point list describing the changes in this PR
    • [x] If this PR addresses an open issue, it is linked in the Issue section
    • [x] If applicable, I have ensured that the TOP solution files match the Desired Outcome image
  • 13

    Bug - flex/07-flex-layout-2: README.md and solution.css inconsistency (Holy Grail)

    Complete the following REQUIRED checkboxes:

    • [x] I have thoroughly read and understand The Odin Project Contributing Guide
    • [x] The title of this issue follows the Bug - location of bug: brief description of bug format, e.g. Bug - Grid exercises: CSS not properly linked to HTML files

    The following checkbox is OPTIONAL:

    • [ ] I would like to be assigned this issue to work on it

    1. Description of the Bug:

    README.md states the sidebar should be 300px wide (Line 29). When opening solution.html file in browser and inspecting the sidebar, it is 332px wide. solution.css does not include:

    .sidebar {
box-sizing: border-box;

*other style declarations*
}

    If this isn't intended then box-sizing should be included in the solution.

    sidebar

    2. How To Reproduce:

    1. Open solution.html file in browser
    2. Inspect sidebar element (332px)

    3. Expected Behavior:

    1. Open solution.html file in brower
    2. Inspect sidebar element (300px)
    3. solution.css file includes box-sizing declaration under sidebar class

    4. Desktop/Device:

    • Device:
    • OS:
    • Browser:
    • Version:

    5. Additional Information:

  • 14

    Gitcheck

    Because

    This PR

    Issue

    Closes #XXXXX

    Additional Information

    Pull Request Requirements

    • [ ] I have thoroughly read and understand The Odin Project Contributing Guide
    • [ ] The title of this PR follows the location of change: brief description of change format, e.g. 01-flex-center: Update self check
    • [ ] The Because section summarizes the reason for this PR
    • [ ] The This PR section has a bullet point list describing the changes in this PR
    • [ ] If this PR addresses an open issue, it is linked in the Issue section
    • [ ] If applicable, I have ensured that the TOP solution files match the Desired Outcome image
  • 15

    first taks

    Because

    This PR

    Issue

    Closes #XXXXX

    Additional Information

    Pull Request Requirements

    • [ ] I have thoroughly read and understand The Odin Project Contributing Guide
    • [ ] The title of this PR follows the location of change: brief description of change format, e.g. 01-flex-center: Update self check
    • [ ] The Because section summarizes the reason for this PR
    • [ ] The This PR section has a bullet point list describing the changes in this PR
    • [ ] If this PR addresses an open issue, it is linked in the Issue section
    • [ ] If applicable, I have ensured that the TOP solution files match the Desired Outcome image
  • 16

    Brett branch

    Because

    This PR

    Issue

    Closes #XXXXX

    Additional Information

    Pull Request Requirements

    • [ ] I have thoroughly read and understand The Odin Project Contributing Guide
    • [ ] The title of this PR follows the location of change: brief description of change format, e.g. 01-flex-center: Update self check
    • [ ] The Because section summarizes the reason for this PR
    • [ ] The This PR section has a bullet point list describing the changes in this PR
    • [ ] If this PR addresses an open issue, it is linked in the Issue section
    • [ ] If applicable, I have ensured that the TOP solution files match the Desired Outcome image
  • 17

    Update style.css

    Because

    This PR

    Issue

    Closes #XXXXX

    Additional Information

    Pull Request Requirements

    • [x] I have thoroughly read and understand The Odin Project Contributing Guide
    • [x] The title of this PR follows the location of change: brief description of change format, e.g. 01-flex-center: Update self check
    • [x] The Because section summarizes the reason for this PR
    • [x] The This PR section has a bullet point list describing the changes in this PR
    • [x] If this PR addresses an open issue, it is linked in the Issue section
    • [x] If applicable, I have ensured that the TOP solution files match the Desired Outcome image

Popular Tag

Related