Kode With Klossy Coding Guide

Welcome to the Kode With Klossy Coding Guide page! We hope you enjoyed learning how to build a website and code in HTML and CSS through our YouTube video. You're likely here because you're eager to continue your coding journey and build a website showcasing one of your personal heroes. We have developed this guide as a reference point for you as you build your site. It includes some of the key HTML and CSS elements and syntax from the video. After finishing your website, we'd love to see what you've built!

We can't wait to see what you create!

 

HTML

What Is HTML?

HTML stands for HyperText Markup Language. We use HTML to create a content     skeleton for web pages and instruct web browsers on how to structure that content.

bone_1f9b4.png

What are HTML Elements?

package_1f4e6.png

An element consists of the entire code block, the tags and text inside them.

 

 HTML Elements From The Video 

<h1> <h6> Heading Elements

 Description 

HTML uses six different heading elements. Headings are ordered from largest <h1> to smallest <h6>.

See this explained @ ##:##

play-button_25b6-fe0f.png

 Input 

<h1> This is my biggest heading </h1>
<
h2> This is my 1st subheading </h2>
<
h3> This is my 2nd subheading </h3>
...
<
h6> This is my 6th subheading </h6>

 Output 

Untitled.png_X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-

<p> Paragraph Elements

 Description 

The <p> element, otherwise known as the paragraph element, is used to contain and display blocks of text.

See this explained @ ##:##

play-button_25b6-fe0f.png

 Input 

<p> This is my block of text! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Porttitor rhoncus dolor purus non. At augue eget arcu dictum varius duis at consectetur lorem. Varius duis at consectetur lorem donec. Sed ullamcorper morbi tincidunt ornare.</p>

 Output 

Screen Shot 2022-03-09 at 6.35.29 PM.png
 

<img> Image Elements

 Description 

The image <img> element allows you to add images. The src attribute needs to be given the value of the image URL, stored between double quotes. The alt attribute should be used to add a description of the image for screen readers and in case the asset fails to load. <img> is what is known as an empty element which means it should not have a closing tag.

See this explained @ ##:##

play-button_25b6-fe0f.png

 Input 

<img src= "https://blackinai.github.io/static/media/TimnitGebru.a5f821a3.jpg" alt= "Headshot of Timnit Gebru a computer scientist, andvocate for diversity in tech, and co-founder of Black in AI.">

 Output 

Untitled.png_X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-
 

<a> Anchor / Link Elements

 Description 

The <a> anchor element creates hyperlinks in HTML. The hyperlinks can direct to other webpages, files, a location on the same page, or any other URL. The href= attribute is used to determine the location the anchor element directs to.

See this explained @ ##:##

play-button_25b6-fe0f.png

 Input 

<!-- Using anchor tags for text links -->
<a href= "https://blackinai.github.io"> Visit the Black in AI site </a> <!-- Using a tags for image links --> <a href= "https://blackinai.github.io"> <img src= "https://blackinai.github.io/static/media/bai-logo.44f8f823.png"> </a>

 Output 

Screen Shot 2022-03-09 at 6.52.58 PM.png

<i> <b> <u> Elements for Emphasizing Text

 Description 

The <i> element when wrapped around other text italicizes the content. Similarly, <u> underlines the text, and <b> bolds the content it is wrapped around.

See this explained @ ##:##

play-button_25b6-fe0f.png

 Input 

<p>This <i>word</i> will be italicized.</p>

<
p>This <u>word</u> will be underlined.</p>

<
p>This <b>word</b> will be bolded.</p>

 Output 

Screen Shot 2022-03-09 at 6.59.11 PM.png
 
 

Some Other Useful HTML Elements

<ul> <ol> <li> List Elements

 

 Description 

  1. The <ol> element will create an ordered list (i.e a numbered list)

  • The <ul> element will create an unordered list (i.e. a bulleted list)

Regardless, both list types require the use of the <li> element to delineate each item within the list

 Input 

<ol>
  <
li> This is item number one
  </
li>
  <
li> This is item number two
  </
li>
</
ol>
<
ul>
  <
li> This is the first bullet
  </
li>
  <
li> This is the second bullet 
  </
li>
</
ul>

 Output 

Screen Shot 2022-03-17 at 8.34.38 PM.png

<marquee> Marquee Element

 Description 

The <marquee> element allows you to insert scrolling text. Using attributes you can control what happens when the text reaches the edges of its area.

Learn more about the <marquee> element and supported attributes here

 Input 

<marquee> This text will scroll from right to left </marquee>

<marquee direction="up">This text will scroll from bottom to top </marquee>

 Output 

2022-03-02_11.24.54.gif_X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAY
 

 Description 

The <blockquote> element indicates that the text wrapped between the opening and closing tag is a longer quote. Depending on the browser, default settings, and/or attributes used, this element is displayed visually by indentation of the text.

Learn more about the <blockquote> element and supported attributes here

 Input 

<blockquote> <p> I quickly came to understand that code is a superpower every young woman should be able to access. Understanding that code is the underlying (and invisible) framework of tech means that we do not have to be passive bystanders in our ever-changing digital world.</p> </blockquote> <p> —Karlie Kloss, <em>TeenVogue</em></p>

 Output 

Untitled.png_X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-

<blockquote> Blockquote Element

 

CSS

What Is CSS?

artist-palette_1f3a8.png
  • CSS stands for Cascading Style Sheets.

  • In CSS, we write a set of rules for how our document should look. The browser evaluates those rules and styles the page accordingly.

What Is A CSS Rule?

A CSS rule is made up of the following parts and defined as follows:

Untitled.png_X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-

Remember, selectors target specific HTML elements from your index.html file. You can try changing lots of different elements not just <body>

CSS Properties From The Video 

color: Change Your Font Color

 

 Description 

color: Is the CSS property that changes the color of your text. It accepts a wide range of values from Hex Codes to built in color names

See this explained @ ##:##

play-button_25b6-fe0f.png

 Input 

h1 {
 
color: rebeccapurple;
}

 Output 

Screen Shot 2022-03-17 at 9.21.25 PM.png

font-family: Change Your Font Style

 Description 

font-family: Is the CSS property that changes the font used to display your text. It accepts a number of built in values

See this explained @ ##:##

play-button_25b6-fe0f.png

 Input 

h1 {
 
color: rebeccapurple;
  font-family: sans-serif;
}

 Output 

Screen Shot 2022-03-17 at 9.26.40 PM.png
 

background-color: Change The Background Color

 Description 

background-color: Is the CSS property that changes the color of the background. It accepts the same values as color. It can be used to change the background of the entire page or just certain elements. 

See this explained @ ##:##

play-button_25b6-fe0f.png

 Input 

h1 {
 
color: rebeccapurple;
  font-family: sans-serif;
  background-color: skyblue;
}
body {
 
background-color: dodgerblue;
}

 Output 

Screen Shot 2022-03-17 at 9.35.58 PM.png
 

 Description 

border: Is the CSS property that allows you to add a border around elements. border: accepts 3 values: the width, style, and color. Learn more about borders here

See this explained @ ##:##

play-button_25b6-fe0f.png

 Input 

h1 {
 
color: rebeccapurple;
  font-family: sans-serif;
  background-color: skyblue;
 
border: 5px dashed red;
}
body {
 
background-color: dodgerblue;
}

 Output 

Screen Shot 2022-03-17 at 9.44.29 PM.png

border: Add a Border Around Elements