Build A Stylized To Do List

HTML-CSS
1

I want to try and copy the sample that the FCC gave me. I decided to add some iframe because I am not familiar on how to use the video element yet

Screenshot 2025-05-03 021658
Screenshot 2025-05-03 021658631×433 10 KB

this is what I have so far:

Screenshot 2025-05-03 022932
Screenshot 2025-05-03 0229321352×756 105 KB

Screenshot 2025-05-03 022944
Screenshot 2025-05-03 0229441356×350 68.9 KB

here is my code so far for html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="container">
    <h1>Pokedex</h1>
    <ul class="todo-list">
        <li class="item">
            <label for="music"><input type="checkbox" id="music"/>Practice Bass</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.youtube.com/watch?v=hjeFM4i8nwU&ab_channel=%ED%8F%AC%EB%8D%B0%EB%9D%BC%EB%93%A0%EC%B4%88%EB%B3%B4Fochobass" target="_blank">Check tutorial below:</a><iframe src="https://youtube.com/embed/hjeFM4i8nwU?si=MagOjgfWUBpYrl2Z"></iframe></li>
            </ul>
        </li>
        <li class="item">
            <label for="gym"><input type="checkbox" id="gym"/>Practice Working Out</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://docs.google.com/document/d/1UxFN7Konve47Vl7Qb-oSTSEC_CvA1gvhyh5cWqVq7gc/edit?usp=sharing" target="_blank">Check workout routine below:</a><iframe src=""></iframe></li>
            </ul>
        </li>
        <li class="item">
            <label for="art"><input type="checkbox" id="art"/>Practice Art</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.youtube.com/watch?v=1jjmOF1hQqI&ab_channel=DrawlikeaSir" target="_blank">Check workout routine below:</a><iframe src="https://youtube.com/embed/1jjmOF1hQqI?si=yf7WcSMO8NBxVCfV"></iframe></li>
            </ul>
        </li>
        <li class="item">
            <label for="music"><input type="checkbox" id="music"/>Practice Coding</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.freecodecamp.org/learn" target="_blank">Check tutorial below:</a><iframe src="https://www.freecodecamp.org/learn"></iframe></li>
            </ul>
        </li>
    </ul>
    </div>
</body>

</html>

and this is for CSS

body {
  background-color: lightgray;
}
* {
  font-family: sans-serif;
}

a {
  text-decoration: none;
}

div {
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 12px;
  max-width: 50%;
  margin: auto;
}

h1 {
  text-align: center;
}

.item {
  border-radius: 12px;
  background-color: #b0c6eb;
  list-style-position: inside;
  margin: 0;
  max-width: 90%;
}

How do you make it so that the bullet point from the first <li> will be gone?
General suggestions on how to improve the design of the page are also appreciated.

…
Why does the .item don’t align to the center when margin:auto but it does when margin: 0?

Thanks in advance!

2

are you familiar with “codepen/repl” environment? if so then make a project there and share that link with your latest code in there, that way it becomes more interactive and easier to offer any help whenever possible… happy coding :slight_smile:

3

You can use this CSS property to hide the list marker.

list-style-type:none;
4

HTML Codes:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Styled To-Do List</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="container">
      <h1>Pokedex</h1>
      <ul class="to-do-list">
        <li class="item">
          <label for="music"
            ><input type="checkbox" id="music" />Practice Bass</label
          >
          <ul class="sub-item">
            <li>
              <a
                class="sub-item-link"
                href="https://www.youtube.com/watch?v=hjeFM4i8nwU&ab_channel=%ED%8F%AC%EB%8D%B0%EB%9D%BC%EB%93%A0%EC%B4%88%EB%B3%B4Fochobass"
                target="_blank"
                >Check tutorial below:</a
              ><iframe
                src="https://youtube.com/embed/hjeFM4i8nwU?si=MagOjgfWUBpYrl2Z"
              ></iframe>
            </li>
          </ul>
        </li>
        <li class="item">
          <label for="gym"
            ><input type="checkbox" id="gym" />Practice Working Out</label
          >
          <ul class="sub-item">
            <li>
              <a
                class="sub-item-link"
                href="https://docs.google.com/document/d/1UxFN7Konve47Vl7Qb-oSTSEC_CvA1gvhyh5cWqVq7gc/edit?usp=sharing"
                target="_blank"
                >Check workout routine below:</a
              ><iframe
              src="https://youtube.com/embed/1jjmOF1hQqI?si=yf7WcSMO8NBxVCfV"
            ></iframe>
            </li>
          </ul>
        </li>
        <li class="item">
          <label for="art"
            ><input type="checkbox" id="art" />Practice Art</label
          >
          <ul class="sub-item">
            <li>
              <a
                class="sub-item-link"
                href="https://www.youtube.com/watch?v=1jjmOF1hQqI&ab_channel=DrawlikeaSir"
                target="_blank"
                >Check workout routine below:</a
              ><iframe
                src="https://youtube.com/embed/1jjmOF1hQqI?si=yf7WcSMO8NBxVCfV"
              ></iframe>
            </li>
          </ul>
        </li>
        <li class="item">
          <label for="music"
            ><input type="checkbox" id="music" />Practice Coding</label
          >
          <ul class="sub-item">
            <li>
              <a
                class="sub-item-link"
                href="https://www.freecodecamp.org/learn"
                target="_blank"
                >Check tutorial below:</a
              ><iframe
              src="https://youtube.com/embed/hjeFM4i8nwU?si=MagOjgfWUBpYrl2Z"
            ></iframe>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>

CSS Codes:

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: lightgray;
}

a {
  text-decoration: none;
}

.container {
  width: 50%;
  background-color: white;
  border-radius: 10px;
  padding: 3em;
  margin: 0 auto;
}

h1 {
  text-align: center;
}

.to-do-list {
  padding-left: 0;
  list-style-type: none;
}

.item {
  margin: 2em 0;
  min-height: 200px;
  border-radius: 10px;
  background-color: #b0c6eb;
  padding: 20px;
}

.sub-item {
  padding-top: 10px;
  list-style-type: square;
}

iframe {
  width: 100%;
  min-height: 200px;
}

Preview:

image
image1920×781 110 KB

I just simply rewrite your codes and keep your styles.I think you need to think more about the strutures and how to style.

The reason for this is not because of margins setting,you are actually cheated by setting the value of the list-style-type to inside and the max-width you set.Thus,inside value pushes the list markers inside the background and max-width limits the the width of the li elements which is 90% of its parent element,so you think it as a whole thing and it behaves as it is centered visually but actually it is not really centered correctly

Pic(without setting list-style-type:inside and max-width;)

image
image1920×781 97.7 KB

Pic(setting list-style-type:inside and max-width;)

image
image1920×781 98.3 KB

Hope this might help you!!!

5

Thanks! Ill try to do that next time!

6

ohhh… i didnt knew that one. Thanks!

7

What do you mean by this? Do you mean that learning how to properly structure lines in the editor might help? If that’s the case, do you have suggestions on that (I saw the image with the different indentations of tags… Do you mean that trying to follow that would help me in the long run?

8

I just mean you need to think more before styling elements.
You have to try to know what result your behaviors of styling will cause.So that,you can get a logical result instead of just the one that looks as you expected visually