DEV Community

Code_Regina
Code_Regina

Posted on • Updated on

Web Dev Week 1: HTML5 and CSS3

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Alt Text

Resources:
https://developer.mozilla.org/en-US/
https://www.w3schools.com/

This week projects include:

GitHub logo CodeRegina / dogUnleashed

Basic HTML only web page

GitHub logo CodeRegina / dogUnleashedForm

Basic HTML webpage with a simple form

GitHub logo CodeRegina / List

Basic HTML and CSS To do list

Top comments (0)