Say Hi to Web Development!

Web development is a broad field that encompasses the creation and maintenance of websites and web applications. It involves a variety of disciplines, including web design, web programming, content creation, and network security configuration. The goal of web development is to build dynamic and interactive websites that are both functional and visually appealing. This field is constantly evolving with new technologies and best practices, making it a dynamic and exciting area to work in.

Central to web development are HTML (HyperText Markup Language) and CSS (Cascading Style Sheets), which are foundational technologies used to create and style web pages. HTML provides the structure of a webpage, while CSS controls the layout and appearance. Here are some key uses of HTML and CSS in web development:

#### HTML:

- Structuring content with elements like headings, paragraphs, and lists.
- Embedding images, videos, and other media.
- Creating forms for user input.

#### CSS:

- Styling text and fonts.
- Adjusting layout with the box model, flexbox, and grid systems.
- Implementing responsive design for different devices and screen sizes.

These technologies work together to ensure that web pages are well-organized, aesthetically pleasing, and accessible across various devices.

HTML Basics

HTML (HyperText Markup Language) is a markup language that tells web browsers how to structure the web pages you visit. It can be as complicated or as simple as the web developer wants it to be. HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way. The enclosing tags can make content into a hyperlink to connect to another page, italicize words, and so on. For example, consider the following line of text:

`My cat is very grumpy`

If we wanted the text to stand by itself, we could specify that it is a paragraph by enclosing it in a paragraph (<p>) element:

`<p>My cat is very grumpy<p>`

Note: Tags in HTML are not case-sensitive. This means they can be written in uppercase or lowercase. For example, a <title> tag could be written as <title>, <TITLE>, <Title>, <TiTlE>, etc., and it will work. However, it is best practice to write all tags in lowercase for consistency and readability.

### Anatomy of an HTML element

Let's further explore our paragraph element from the previous section:

The anatomy of our element is:

- The opening tag: This consists of the name of the element (in this example, p for paragraph), wrapped in opening and closing angle brackets. This opening tag marks where the element begins or starts to take effect. In this example, it precedes the start of the paragraph text.
- The content: This is the content of the element. In this example, it is the paragraph text.
- The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This marks where the element ends. Failing to include a closing tag is a common beginner error that can produce peculiar results.

The element is the opening tag, followed by content, followed by the closing tag.

### Attributes

Elements can also have attributes. Attributes look like this:

Attributes contain extra information about the element that won't appear in the content. In this example, the class attribute is an identifying name used to target the element with style information.

HTML Cheatsheet

While using HTML it can be very handy to have an easy way to remember how to use HTML tags properly and how to apply them. However, in many cases we just need some quick hints as we go. That's the whole purpose of the cheat sheet, to give you some quick accurate ready to use code snippets for common usages.

### Inline Elements

An "element" is a single part of a webpage. Some elements are large and hold smaller elements like containers. Some elements are small and are "nested" inside larger ones. By default, "inline elements" appear next to one another in a webpage. They take up only as much width as they need in a page and fit together horizontally like words in a sentence or books shelved side-by-side in a row. All inline elements can be placed within the <body> element.

### Block Elements

"Block elements," on the other hand, take up the entire width of a webpage. They also take up a full line of a webpage; they do not fit together side-by-side. Instead, they stack like paragraphs in an essay or toy blocks in a tower.

CSS Basics

CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.

A document is usually a text file structured using a markup language — HTML is the most common markup language, but you may also come across other markup languages such as SVG or XML.

Presenting a document to a user means converting it into a form usable by your audience. Browsers, like Firefox, Chrome, or Edge, are designed to present documents visually, for example, on a computer screen, projector, or printer.

CSS can be used for very basic document text styling — for example, for changing the color and size of headings and links. It can be used to create a layout — for example, turning a single column of text into a layout with a main content area and a sidebar for related information. It can even be used for effects such as animation. Have a look at the links in this paragraph for specific examples.

### CSS Syntax

CSS is a rule-based language — you define the rules by specifying groups of styles that should be applied to particular elements or groups of elements on your web page.

For example, you can decide to have the main heading on your page to be shown as large red text. The following code shows a very simple CSS rule that would achieve the styling described above:

`h1 { color: red; font-size: 5em; }`

- In the above example, the CSS rule opens with a selector. This selects the HTML element that we are going to style. In this case, we are styling level one headings (h1).
- We then have a set of curly braces { }.
- Inside the braces will be one or more declarations, which take the form of property and value pairs. We specify the property (color in the above example) before the colon, and we specify the value of the property after the colon (red in this example).
- This example contains two declarations, one for color and the other for font-size. Each pair specifies a property of the element(s) we are selecting (h1 in this case), then a value that we'd like to give the property.

CSS properties have different allowable values, depending on which property is being specified. In our example, we have the color property, which can take various color values. We also have the font-size property. This property can take various size units as a value.

CSS Cheatsheet

Use this CSS cheatsheet to browse all of the standard CSS properties, pseudo-classes, pseudo-elements, data types, functional notations and at-rules.

### Font Properties

- Font-Family

  Changes the font family of certain words, sentences, paragraphs, etc. See the example below.

  `p { font-family: Helvetica, sans-serif; }`
- Font-Style

  Changes text: normal, oblique, and italics. See the example code below.

  `p { font-style: normal; }`
- Font-Variant

  Used to display font in normal or small-caps.

  `span { font-variant: small-caps; }`
- Font-Weight

  Used to specify the weight of the font. See the example code below.

  `h1 { font-weight: 800; }`
- Font-Size

  Used to modify the size of the displayed font. See some example codes below.

  `h1 { font-size: large; }` `li { font-size: 90%; }`
- Font

  Used to combine all properties of fonts. See some example below.

  `p { font: italic bold 12pt/14pt Times, serif; }`

### Color & Background Properties

- Color

  Changes the color of text. See the example below.

  `h1 { color: blue; }` `h1 { color: #09ABFF; }` `h1 { color: rgb(0,127,255); }`
- Background-Color

  Sets the background color of an element. See the code below as an example.

  `body { background-color: white; }`
- Background-Image

  Sets the background image of an element. See below for example.

  `body { background-image: url(/images/foo.gif); }` `p { background-image: url(http://www.htmlhelp.com/bg.png); }`
- Background

  Used to combine all properties of background. See the example below.

  `body { background: white url(http://www.htmlhelp.com/foo.gif); }`

### Text Properties

- Word-Spacing

  Defines an additional amount of space between words.

- Letter Spacing

  Defines an additional amount of space between characters.

- Text-Decoration

  Allows text to be decorated through one of five properties: underline, overline, line-through, blink, none.

- Vertical-Align

  Used to alter the vertical positioning of an inline element, relative to its parent element or to the element's line.

- Text-Transform

  Allows for capitalizing the first letter of each word (capitalize), capitalizing all letters of a word (uppercase), using all small letters in each word(lowercase), and the inital value(none).

- Text-Align

  Used to justify text: left, center, right, and justify.

- Text-Indent

  Used to specify the amount of indentation prior to the first line of text.

- Line-Height

  Used to control the spacing between baselines of text.

### Classification Properties

- List-Style-Type
- List-Style-Image
- List-Style-Position

### Box Properties

- Margin-Top
- Margin-Right
- Margin-Bottom
- Margin-Left
- Margin
- Padding-Top
- Padding-Right
- Padding-Bottom
- Padding-Left
- Padding
- Border-Top-Width
- Border-Right-Width
- Border-Bottom-Width
- Border-Left-Width
- Border-Width
- Border-Color
- Border-Style
- Border-Top
- Border-Right
- Border-Bottom
- Border-Left
- Border
- Width
- Height
- Float
- Clear