{"id":3716,"date":"2023-07-18T00:35:28","date_gmt":"2023-07-18T00:35:28","guid":{"rendered":"https:\/\/nmi.cool\/advweb\/?page_id=3716"},"modified":"2025-06-19T19:53:27","modified_gmt":"2025-06-19T19:53:27","slug":"exercise-lists-links-fonts","status":"publish","type":"page","link":"https:\/\/nmi.cool\/advweb\/unit-one-html-css\/week-one\/exercise-lists-links-fonts\/","title":{"rendered":"Exercise: Lists, Links & Fonts"},"content":{"rendered":"\n

Create a new html and a new css document, save and connect them. Complete the following four exercises on the same document<\/strong>.<\/p>\n\n\n\n

Exercise 1: Custom bullet list<\/strong>.<\/h2>\n\n\n\n
    \n
  1. Create a 3 item unordered list (ul).<\/li>\n\n\n\n
  2. Locate an image and resize it to approximately 15px.<\/li>\n\n\n\n
  3. Use the image to create a custom bullet for your list, by following the example in the\u00a0custom bullet lesson<\/a>. Note: include quotations around the link to your image in CSS. Ex: url(“cloud.svg”) <\/em><\/li>\n<\/ol>\n\n\n\n

    Exercise 2: Ordered list<\/h2>\n\n\n\n

    Now create an ordered list of  that begins at a number other than 1.<\/p>\n\n\n\n

    Exercise 3: Link styles<\/h2>\n\n\n\n

    Show your understanding of link styles by creating 6 links that utilize the CSS elements of :active<\/code>, :hover<\/code>, :focus<\/code>, :visited<\/code>, border-radius<\/code>, text-decoration<\/code>, and border<\/code><\/p>\n\n\n\n

    Feel free to make some funky looking links! BTW, if you use border-radius along with width and height, it\u2019s easy to create \u2018pill style\u2019 buttons.<\/p>\n\n\n\n

    Exercise 4: Web fonts<\/h2>\n\n\n\n

    This exercise comes from the web font reading\u00a0\u00a0\u201cActive learning: A web font example\u201d .<\/a><\/p>\n\n\n\n

      \n
    1. Go to\u00a0https:\/\/fontsquirrel.com<\/a>\u00a0to browse hundreds of fonts. Note: Don’t choose a font that requires you to go “offsite.”<\/em><\/li>\n\n\n\n
    2. Select at least one font, download it into the same directory as this lesson\u2019s html file, and unzip it. The font files will appear in a folder. In order to use one you will need to follow the example in the next step.<\/li>\n\n\n\n
    3. Take a look at the\u00a0short example here\u00a0<\/a>for basic information on how to put the font to use (and also this screen capture).\"\"<\/li>\n\n\n\n
    4. As the screen capture shows, the first step is to name and link to the font file via @font-face. Step 2 is apply the new font family to a class, id, or some other element such as p, body, article, etc. in your css.  For example,
      body {font-family: myFont;}. This would set all of your document’s otherwise un-styled text to the new font.<\/li>\n\n\n\n
    5. You could also create a new class or id to the font-family.
      Example: #teams {font-family: myFont};<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

      Create a new html and a new css document, save and connect them. Complete the following four exercises on the same document. Exercise 1: Custom bullet list. Exercise 2: Ordered list Now create an ordered list of  that begins at a number other than 1. Exercise 3: Link styles Show your understanding of link styles … Continue reading Exercise: Lists, Links & Fonts<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3682,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3716","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/comments?post=3716"}],"version-history":[{"count":5,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3716\/revisions"}],"predecessor-version":[{"id":4290,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3716\/revisions\/4290"}],"up":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3682"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/media?parent=3716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}