Learn HTML and CSS

/Learn HTML and CSS
­

What is HTML and CSS

Introduction to HTML and CSS, the two major languages that are used to build web pages.

June 20th, 2016|Categories: HTML and CSS Intro, Learn HTML and CSS|Tags: , |

Build the first webpage

A basic example of HTML code and how it looks like on browsers.

June 21st, 2016|Categories: HTML and CSS Intro, Learn HTML and CSS|Tags: , |

Let’s add some CSS

How CSS can change the appearance of an HTML page?

July 1st, 2016|Categories: HTML and CSS Intro, Learn HTML and CSS|Tags: , |

HTML declarations

HTML declarations from old HTML versions to the latest HTML 5

June 21st, 2016|Categories: HTML and CSS Intro, Learn HTML and CSS|Tags: , |

HTML elements

Introduce what are starting elements, ending elements, nested elements and empty elements.

June 21st, 2016|Categories: HTML and CSS Intro, Learn HTML and CSS|Tags: , |

HTML attributes

Introduce what HTML attributes are and some common attributes

June 21st, 2016|Categories: HTML and CSS Intro, Learn HTML and CSS|Tags: , |

Different ways to add CSS

Three different ways to add CSS: Separate style sheets, Inline styles, internal style sheets

July 2nd, 2016|Categories: HTML and CSS Intro, Learn HTML and CSS|Tags: , |

Type, Class and ID selectors

Basic selectors such as tag, id and class selectors

July 2nd, 2016|Categories: CSS Selectors, HTML and CSS Intro, Learn HTML and CSS|Tags: , |

Block vs Inline elements

Introduce the difference between block element and inline element and the two container elements (div and span) as an example of each.

July 3rd, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , |

Semantics Overview

What is semantics and why it is important

July 2nd, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , |

HTML5 Structurally based elements

Introduce the new HTML5 structurally based elements (header, section, article, aside, footer, etc)

July 3rd, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , |

Text-based elements

Introduce the text-based elements such as headings, paragraph, bold, italic, etc

July 3rd, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , |

Table

Describe HTML table and related elements, like th, tr, td, thead, tbody and tfooter.

July 3rd, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , |

List

Describe ordered list (ol), unordered list (ul) and description list (dl).

July 5th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , |

Hyperlinks

Introduce hyperlinks, important elements that allow users to jump from one page to other web resources.

July 7th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , |

Images

Introduce how to create images in HTML pages.

July 8th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , |

Attribute selectors

Introduce the attribute selector.

July 17th, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , |

Combining Selectors

Introduce how to combine different selectors to select elements with more flexibility.

July 18th, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , |

Pseudo-classes

Change the style based on element states using pseudo-classes.

July 23rd, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , |

The first HTML document

Pure hello world HTML page

June 5th, 2016|Categories: HTML and CSS Intro, Learn HTML and CSS|Tags: , , |

Simple HTML page with some CSS

Simple HTML example that changes the position of text and background color with CSS

July 1st, 2016|Categories: HTML and CSS Intro, Learn HTML and CSS|Tags: , , |

Empty HTML elements

Examples of empty HTML elements (br, button input and text input).

July 2nd, 2016|Categories: HTML and CSS Intro, Learn HTML and CSS|Tags: , , |

HTML element attribute examples

Examples of some common HTML element attributes, such as lang, description and href.

July 2nd, 2016|Categories: HTML and CSS Intro, Learn HTML and CSS|Tags: , , |

External CSS file

Put CSS in a separate file and let's HTML use the styles via reference.

July 2nd, 2016|Categories: HTML and CSS Intro, Learn HTML and CSS|Tags: , , |

Internal style sheet

Example of how to put internal CSS in the HTML document.

July 3rd, 2016|Categories: HTML and CSS Intro, Learn HTML and CSS|Tags: , , |

Inline style example

Specify CSS as the style attribute of an HTML element.

July 3rd, 2016|Categories: HTML and CSS Intro, Learn HTML and CSS|Tags: , , |

Type, Class and ID selectors

Introduce the three common CSS selectors

July 3rd, 2016|Categories: CSS Selectors, HTML and CSS Intro, Learn HTML and CSS|Tags: , , |

Div vs Span

Describe inline element (span) and block element (block)

July 3rd, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

A HTML5 structurally based elements example

Example of HTML5 structurally based elements (header, nav, section, aside and footer).

July 4th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |

Examples of headings

Different levels of headings (h1, h2, h3, h4, h5, h6)

July 4th, 2016|Categories: Common HTML elements, Learn HTML and CSS|Tags: , , |