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.
What are HTML Elements?
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 @ ##:##
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
<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 @ ##:##
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
<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 @ ##:##
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
<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 @ ##:##
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
<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 @ ##:##
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
Some Other Useful HTML Elements
<ul> <ol> <li> List Elements
Description
-
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
<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
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
<blockquote> Blockquote Element
CSS
What Is CSS?
-
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:
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 @ ##:##
Input
h1 {
color: rebeccapurple;
}
Output
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 @ ##:##
Input
h1 {
color: rebeccapurple;
font-family: sans-serif;
}
Output
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 @ ##:##
Input
h1 {
color: rebeccapurple;
font-family: sans-serif;
background-color: skyblue;
}
body {
background-color: dodgerblue;
}
Output
Input
h1 {
color: rebeccapurple;
font-family: sans-serif;
background-color: skyblue;
border: 5px dashed red;
}
body {
background-color: dodgerblue;
}
Output
