1. visibility

    Exploring HTML Attributes

  2. h1 element: give content "Challenge for < Date >"
  3. h1 element: add inline "style" attribute and change the following css properties: "font-family" to "sans-serif", "text-align" to "center", "color" to "red"
  4. p element: give content "Learn about the basics of web development - specifically dive into HTML & CSS"
  5. p element: add inline "style" attribute and change the following css properties: "font-family" to "sans-serif", "text-align" to "center", "color" to "#4c4747"
  6. p element: give content "A'll achieve this goal by diving into more learning resources."
  7. p element: add inline "style" attribute and change the following css properties: "font-family" to "sans-serif", "text-align" to "center", "color" to "#4c4747"
  8. a element: wrap "more learning resources" text of the paragraph that is created at step 6 in anchor tag to turn it into a link.
  9. a element: add inline 'href' attribute and set the taget destination to "https://www.google.com".
  1. visibility

    CSS Fundamentals Project

  2. create folder (css-fundamentals)
  3. create index.html
  4. give it a title (css fundamentals)
  5. create css file (main, styles etc)
  6. link to css file in html (head element)
  7. div with class of 'container'
  8. inside the div created at step 6 create span with class of 'icon' and number value
  9. inside the div created at step 6 create heading with the title id, and text value
  10. inside the div created at step 6 create p with lorem text (lorem10)
  11. select icon class and add red color and font-size (font-size:40px)
  12. select heading id and add blue color
  13. select all paragraphs inside container and color grey
  1. visibility

    Percent Units

  2. create parent div with class of 'parent'
  3. inside the div created at step 1 create child div with class of 'child'
  4. select parent class, add blue background color and equal width and height in pixel (e.g 200px)
  5. select child class, add red background color and such width and height in percent that it always takes 50% of the parent
  1. visibility

    Coffee Junkie Project | Home

  2. create folder "coffee-junkie"
  3. inside the folder "coffee-junkie" created at step 1 create subfolder "img"
  4. download all images from the example website cloud_download and place them in the folder "img" created at step 2
  5. inside the root folder "coffee-junkie" created at step 1 create "index.html", "about.html", "numbers.html" and "contact.html" files
  6. create the basic html structure of the "index.html" created at step 4 and give a title "Coffee Junkie"
  7. create "img" tag, specify the path to the image "logo.png" (src attribute) and provide an alternate text "coffee logo" (alt attribute)
  8. create h1 with text "Coffee Junkie"
  9. create an unordered list with the following link items (ul > li > a) "Home", "About", "Numbers", "Contact" and connect them with the appropriate "index.html", "about.html", "numbers.html" and "contact.html" files created at step 4
  10. create "img" tag, specify the path to the image "background.jpeg" (src attribute) and provide an alternate text "coffee beans" (alt attribute), set the width to 100% (width attribute)
  11. create 2 line breaks (br tag)
  12. between the line breaks created at step 10 create h2 with the text "Featured Products"
  13. create a section (section tag) and give him heading "House Bend Codfee" using h3 tag
  14. create img tag, connect with the image "house-blend.jpeg" and provide "house blend" as an alternate text (src and alt attributes)
  15. create a paragraph (p tag) with lorem50 dummy text
  16. make paragraph (created at step step 14) width 50% using inline css style attribute
  17. create h4 and within the heading create a link (a tag) with "Details" text that opens a new browser tab (target="_blank" attribute) to wikipedia (href attribute, https://en.wikipedia.org/wiki/Coffee)
  18. create a section (section tag) and give him heading "French Roast" using h3 tag
  19. create img tag, connect with the image "french-roast.jpeg" and provide "french roast" as an alternate text (src and alt attributes)
  20. repeat steps 14, 15, 16
  21. create a section (section tag) and give him heading "Columbian Roast" using h3 tag
  22. create img tag, connect with the image "columbian-roast.jpeg" and provide "columbian roast" as an alternate text (src and alt attributes)
  23. repeat steps 14, 15, 16
  24. create some line breaks (br)
  25. create a footer (footer tag) with a paragraph (p tag) inside and provide text "copyrigth ©2022"
  26. create the link "Back to Top" (a tag) that navigates to top (href="#logo"). To be able to navigate to top provide your logo image created at step 6 id with the value logo (id="logo")
expand_less