Skip to content

Instantly share code, notes, and snippets.

@daaimah123

daaimah123/HTML & Basic CSS

Last active July 2, 2021 17:42
Show Gist options
  • Save daaimah123/95629f838be7e9647f1739fd6b1c6391 to your computer and use it in GitHub Desktop.
Save daaimah123/95629f838be7e9647f1739fd6b1c6391 to your computer and use it in GitHub Desktop.
Download ZIP
Notes for Jonas Schmedtmann's lecture on HTML & CSS Basics https://udemy.com/course/the-complete-javascript-course/learn/lecture/22648441#overview
Raw
HTML & Basic CSS
==================================== Hyper Text Markup Language (HTML) ===============================
==> Opening and Closing Tags
each tag typically comes with a paired ending tag that begins with a forward-slash
<tag_example></tag_example>
some tags are self closing and will only have one tag which does or does not ends with a forward-slash
<tag_example/>
<tag_element>
==> Comments
<!-- HTML comments are similar to tags because they start and end with the same characters, but the
comments starting character is followed by an exclaimation point. HTML comments can span several
lines. -->
==> Elements
<!DOCTYPE html>
<html>
<meta>
<head>
<title>
<body>
<h1> to <h6>
<p>
<a>
<img />
<div>
<input>
<form>
<style>
<link>
==> Nesting
placing a tag within two other tags (i.e. the same way you make a sandwhich with bread on the outside
and lettuce on the inside; the lettuce is nested inside the bread)
<tag_example>
<nested_element>
<tag_example>
==> Attributes
Some elements have attributes that are used to "describe" elements
lang
href
alt
src
width
height
type
rel
==> Classes
group naming of multiple elements in order to select and style in css; can be used repeatedly
class="class_name"
==> IDs
unique naming of a single element in order to select and style in css; can only be used once
id="id_name"
==================================== Connecting CSS to HTML =====================================
In document styling using the style tags or connecting the external css file using the link tag.
<style>
selector {
attribute: value;
}
</style>
OR
<head>
<link href="css_file_name" rel="stylesheet">
</head>
==================================== Cascading Style Sheet (CSS) ===============================
Structure of CSS includes a selector, attribute, and value, the value is concluded with a semi-colon.
Forgetting the semi-colon will make the css invalid and it will not execute.
selector {
attribute: value;
}
==> Comments
/* CSS comments begin with a forward-slash, an asterick and end with an aterick and forward-slash.
CSS comments can span several lines. */
==> Classes
group name used to style multiple elements, is preceeded with a period
.class_name {
attribute: value;
}
==> IDs
unique name used to style a single element, is preceeded with a hashtag
#id_name {
attribute: value;
}
==> Box Model
styling the spacing in relation to content (HTML: text, videos, images, etc) on the page
padding ==> transparent area around the content; left, top, right, bottom
width ==> side to side; horizontal
height ==> top to bottom; veritical
border ==> outside of the padding
margin ==> space between boxes; left, top, right, bottom
fill area ==> are that gets filled with background color or background image
text-align ==> aligns the text to the page centered, left,or right
---------------------------border-------------------------
| ___________________________________________ |
| margin | padding | |
| | ___________________ | |
| | | <-- fill area --> | | |
| | padding | content | | |
| | |___________________| | |
| |___________________________________________| |
___________________________border________________________|
Raw
index.html
<!DOCTYPE html> <!-- this tag identifies the document as being HTML -->
<html lang="en"> <!-- the lang attribute tells the browser that the page is in the English language -->
<head> <!-- anything nested within the setting of the page such as tab icons, search engine optimization (SEO), visible area of page, and browser details-->
<meta charset="UTF-8"> <!-- meta tags supply information about the data on the page -->
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS">
<meta name="author" content="Daaimah Tibrey">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & CSS</title> <!-- tab / page title information -->
<style> /* styles page using css directly in the html file */
body {
background-color: lavender;
}
</style>
<link href="style.css" rel="stylesheet">
</head>
<body> <!-- anything nested within this tag is visible on the page -->
<h1>HTML & CSS are fun!</h1> <!-- there are siz of these tags, each has their own predefined font-size -->
<p>HTML is the text that you will see on the page. It is referred to as page content and structure.</p>
<h2>Another heading.</h2>
<p>This is another paragraph section. It looks the same as the previous paragraph when there are no formatting elements or css to change the text.</p>
<p>This next paragraph will contain a nested link within the paragraph.
<a href="https://www.linkedin.com/in/daaimah123/">Daaimah's Linkedin Profile</a> <!-- href attribute is used to provide the url link for the provided words within the tag -->
You can see that it is apart of the paragraph and is not on its own line.
</p>
<div class="image">
<img src="http://4.bp.blogspot.com/-a2ADYMu0TSo/UZGYNURy4wI/AAAAAAAADdk/r8LUpQx3z1o/s1600/Cute-puppies+(1).jpg" alt="newborn brown and white puppies piled into a basket" width="500" height="500"/> <!-- alt attribute is used to provide a description of the image for accessibility purpose (i.e. people who may use screen readers if they cannot see the web with their eyes); the width and height attributes can be in pixels (as provided in this example) or percents (i.e. width="50%" height="50%") to fit the image to the page in a specific way, without these attributes the image will span the page in its original height and width; if you only specify height or weight the respective weight or height will scale proportionately -->
</div>
<p class="diff-paragraph" id="diff-font">How much wood could a woodchuck chuck if a woodchuck could chuck wood? Why does this paragraph not have the same font as the next paragraph.</p>
<p class="diff-paragraph">She sells seashells by the seashore. This paragraph shares the same color as the above paragraph. Can you determine why?</p>
<form id="your-name">
<h2>Your Name Here</h2>
<p>Please fill in this form</p>
<input type="text" placeholder="Your name"> <!-- type of input can be many things (i.e. email, button, text, date, password, time, etc); placeholder is the default text that you see in the input box before typing -->
<button>OK</button>
</form>
</body>
</html>
Raw
style.css
* {/* selects all selectors on page */
margin: 0; /* resets all margins for every selector to 0 */
padding: 0; /* resets all paddings for every selector to 0 */
}
body {
padding: 50px;
box-sizing: border-box;
}
form {
border: red solid 5px;
width: 400px;
padding: 10px;
}
h1, h3 {
margin-bottom: 25px;
}
h1 {
text-align: center;
}
h3 {
margin-top: 25px;
}
p, a {
margin-top: 10px;
}
input, button {
padding: 10px;
font-size: 16px;
}
.diff-paragraph {
color: blue;
}
.img {
background-color: teal;
margin-bottom: 25px;
margin-top: 25px;
text-align: center;
}
#diff-font {
font-family: 'Courier New';
margin-bottom: 10px;
}
#your-name {
margin-top: 50px;
}
#your-name h2 {
color: orange;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment