This week was HTML and CSS from Colt Steele The Web Developer Bootcamp.
HTML is short for Hypertext Markup Language
CSS is short for Cascading Style Sheets
HTML Topics included
-HTML syntax
-HTML Basic Tags
-List
-Divs and Spans
-Attributes
-Tables
-Forms
-Dropdowns and Radio Buttons
CSS Topics included
-CSS Basics
-CSS colors
-Background and Border
-Selectors
-Chrome Inspector
-Advanced Selectors
-Specificity and the Cascade
-Text and Fonts
-Google Fonts
-Box Model
Basic Tags
h1 is a heading tag that goes down in size to h6.
The heading h1 is the biggest and heading h6 is the smallest.
body is a tag where most of all the content will go for a webpage.
p is a paragraph tag that is used for a lot of text.
div is used to group related content together at the block level.
span is used to group related content together at the inline level.
form is used to get end user input.
Attributes give additional information to tags such as
tag name="value"
img src="pic.png"
List
HTML List are useful to order content that is either related or non-related. The list can be organized in either a ol tag or ul tag. The most common use for list is for navigation on a webpage.
Divs and Spans
Divs are one of the most commonly used HTML tags. Divs are used to create containers around related content and it can make styling blocks of content easier because it helps break up a lot of content into smaller manageable parts. Spans are different than divs in that they only help separate in-line level content. They are useful to group content together that are in the same aspect.
Attributes
There are several common attributes that are widely used such as alt, disabled, href, id, src, style, title among many others. Attributes are important because they provide additional information about an html element. The href is commonly used for links, src is used for images, and alt is for more text information. It is best practice to write attributes in lowercase.
Tables
Tables are a effective way to layout information that is data driven. HTML tables use additional tags such as tr, th, td. Tables are created with rows and columns. It is possible to create a table with or without borders, and captions depending on the information you need to distribute.
Forms
Forms are used to collect end user information with input fields. The information that the end user enters into the input field can be quickly sent to a server for processing. Forms use additional tags such as label, for, input, and id.
Dropdown and Radio Buttons
Dropdowns give an end user the ability to scroll through options, while radio buttons allow an end user to check or uncheck an option dialog box.
HTML Semantic Markup
Semantic is to give meaning to certain elements.
Divs and spans are not semantic tags while form, table, and article are semantic tags. It is important to make sure the end user data is valid with form validation.The required attributes validate that the end user input is not empty.
CSS Basics
CSS is Cascading Style Sheets which describes how the HTML is styled.
The syntax is rule based.
selector {
property:value;
anotherProperty:value;
}
CSS colors
CSS has special color names that can be used as well. Color by itself can be applied to change the color of text or background-color can be used to style the background of a button, heading, or background webpage. It is possible to style a border-color. Colors can be used with either RGB, HEX, HSL, RGBA, or HSLA values. RGB is red/green/blue scale to set a desired color. HEX is a value based that looks like #ff6347 which would be a red color. HSL colors is hue/saturation/lightness scale to choose a desired color.
Background and Border
Background-color, background-image, background-repeat, background-attachment, background-position are the options for styling an element.
Borders can be dotted, dashed, solid, double, inset, groove, ridge, outset, none, hidden as well as with a given width and color for an element. Specific border sides can be styled while other sides can be left alone or given a different style. It is common to round borders.
Selectors
Selectors are used to find html elements to change with CSS styles. There are simple, combination, pseudo-class, pseudo-elements, and attributes selectors. There is also an universal selector that will select everything on a html document and give it the same style. * is the universal selector.
Chrome Inspector
Is in the google browser it is used to look at the code of a given web site. The chrome inspector is a powerful tool that can be used for debugging, troubleshooting, and testing HTML/CSS/JavaScript code.
Specificity and the Cascade
Specificity is the deciding factor for which element will be styled when there are conflicting rules. The universal selector has low specificity while the id has high specify, therefore the id will always override any element that would be styled with the universal selector.
Text and Fonts
CSS has built-in fonts to use to style html pages. It is easy to access them with font-family. However, it is most common to use google fonts because of the wider selection that is available.
Box Model
The box model is used for design and layout. The box model is made from content, padding, border, and margin. The content is what the end user sees on their device displays. The padding is transparent and is around the content area. The border is what goes around the padding and content. The margins is outside of the border area and is transparent.
Resources:
https://developer.mozilla.org/en-US/
https://www.w3schools.com/
Top comments (0)