Introduction – HTML is the standard markup language for creating Web pages

Editors – A simple text editor is all you need to learn HTML

Elements – An HTML element is defined by a start tag, some content, and an end tag

Attributes – HTML attributes provide additional information about HTML elements

Headings – HTML headings are titles or subtitles that you want to display on a webpage

Paragraphs – A paragraph always starts on a new line, and is usually a block of text

Styles – The HTML style attribute is used to add styles to an element, such as color, font, size, and more

Formatting – HTML contains several elements for defining text with a special meaning

Quotations – In this chapter we will go through the <blockquote>,<q><abbr><address><cite>, and <bdo> HTML elements

Comments – HTML comments are not displayed in the browser, but they can help document your HTML source code

Colors – HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values

CSS – Stands for Cascading Style Sheets. CSS saves a lot of work. It can control the layout of multiple web pages all at once.

Links – Links are found in nearly all web pages. Links allow users to click their way from page to page.

Images – Images can improve the design and the appearance of a web page.

Favicon – A favicon is a small image displayed next to the page title in the browser tab.

Tables – HTML tables allow web developers to arrange data into rows and columns.

Lists – HTML lists allow web developers to group a set of related items in lists.

Block and Inline – Every HTML element has a default display value, depending on what type of element it is.

Classes – The HTML class attribute is used to specify a class for an HTML element.

Id – The HTML id attribute is used to specify a unique id for an HTML element.

IFrames – An HTML iframe is used to display a web page within a web page.

JavaScript – JavaScript makes HTML pages more dynamic and interactive.

File Paths – A file path describes the location of a file in a web site’s folder structure.

Head – The HTML <head> element is a container for the following elements: <title><style><meta>, <link><script>, and <base>.

Layout – Websites often display content in multiple columns (like a magazine or a newspaper).

Responsive – Responsive web design is about creating web pages that look good on all devices!

Computer Code – HTML contains several elements for defining user input and computer code.

Semantics – Semantic elements = elements with a meaning.

Style Guide – A consistent, clean, and tidy HTML code makes it easier for others to read and understand your code.

Entities – Reserved characters in HTML must be replaced with character entities.

Symbols – Symbols that are not present on your keyboard can also be added by using entities.

Emojis – Emojis are characters from the UTF-8 character set: ? ? ?

Charset – To display an HTML page correctly, a web browser must know which character set to use.

URL Encode – A URL is another word for a web address.

HTML vs. XHTML – XHTML is a stricter, more XML-based version of HTML.


Introduction – CSS is the language we use to style a Web page.

Syntax – A CSS rule consists of a selector and a declaration block.

Selectors – A CSS selector selects the HTML element(s) you want to style.

How to Add CSS – Adding CSS Styles to your project.

Comments – CSS comments are not displayed in the browser, but they can help document your source code.

Colors – Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

Backgrounds – The CSS background properties are used to add background effects for elements.

Borders – The CSS border properties allow you to specify the style, width, and color of an element’s border.

Margins – Margins are used to create space around elements, outside of any defined borders.

Padding – Padding is used to create space around an element’s content, inside of any defined borders.

Height, Width and Max-width – The CSS Height and Width properties

Box Model – All HTML elements can be considered as boxes.

Outline – An outline is a line drawn outside the element’s border.

Text – CSS has a lot of properties for formatting text.

Fonts – Choosing the right font for your website is important!

Icons – Icons can easily be added to your HTML page, by using an icon library.

Links – With CSS, links can be styled in many different ways.

Lists – HTML Lists and CSS List Properties

Tables – The look of an HTML table can be greatly improved with CSS.

Display – The Display property is the most important CSS property for controlling layout.

Max-width – Using width, max-width and margin: auto.

Position – The Position property specifies the type of positioning method.

Z-Index – The Z-Index property specifies the stack order of an element.

Overflow – The CSS Overflow property controls what happens to content that is too big to fit into an area.

Float – The CSS Float property specifies how an element should float.

Inline-block – The display: inline-block Value.

Align – Horizontal & Vertical Align.

Combinators – A combinator is something that explains the relationship between the selectors.

Pseudo-class – A pseudo-class is used to define a special state of an element.

Pseudo-element – A CSS pseudo-element is used to style specified parts of an element.

Opacity – The Opacity property specifies the opacity/transparency of an element.

Navigation Bar – Having easy-to-use navigation is important for any web site.

Dropdowns – Create a hoverable dropdown with CSS.

Image Gallery – The following image gallery is created with CSS.

Image Sprites – An image sprite is a collection of images put into a single image.

Attr Selectors – It is possible to style HTML elements that have specific attributes or attribute values.

Forms – The look of an HTML form can be greatly improved with CSS.

Counters – CSS counters are “variables” maintained by CSS whose values can be incremented by CSS rules.

Website Layout – A website is often divided into headers, menus, content and a footer.

Units – CSS has several different units for expressing a length.

Specificity – If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will “win”.

!Important – The !important rule in CSS is used to add more importance to a property/value than normal.

Math Functions – The CSS math functions allow mathematical expressions to be used as property values.

Rounded Corners – With the CSS border-radius property, you can give any element “rounded corners”.

Border Images – With the CSS border-image property, you can set an image to be used as the border around an element.

Multiple Backgrounds – In this chapter you will learn how to add multiple background images to one element.

Colors – CSS supports 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity.

Color Keywords – This page will explain the transparentcurrentcolor, and inherit keywords.

Gradients – CSS gradients let you display smooth transitions between two or more specified colors.

Shadow Effects – With CSS you can add shadow to text and to elements.

Text Effects – Text Overflow, Word Wrap, Line Breaking Rules, and Writing Modes.

Web Fonts – Web fonts allow Web designers to use fonts that are not installed on the user’s computer.

2D Transforms – CSS transforms allow you to move, rotate, scale, and skew elements.

3D Transforms – CSS also supports 3D transformations.

Transitions – CSS transitions allows you to change property values smoothly, over a given duration.

Animations – CSS allows animation of HTML elements without using JavaScript or Flash!

Tooltips – Create tooltips with CSS.

Style Images – Learn how to style images using CSS.

Image Reflection – In this chapter you will learn how to reflect an image.

Object-fit – The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.

Object-position – The CSS object-position property is used to specify how an <img> or <video> should be positioned within its container.

Masking – With CSS masking you create a mask layer to place over an element to partially or fully hide portions of the element.

Buttons – Learn how to style buttons using CSS.

Pagination – Learn how to create a responsive pagination using CSS.

Multiple Columns – The CSS multi-column layout allows easy definition of multiple columns of text – just like in newspapers.

User Interface

In this chapter you will learn about the following CSS user interface properties:

  • resize
  • outline-offset

Variables – The var() function is used to insert the value of a CSS variable.

Box Sizing – The CSS box-sizing property allows us to include the padding and border in an element’s total width and height.

Media Queries – The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

MQ Examples – Let us look at some more examples of using media queries.

Flexbox – The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Responsive Web Design – Responsive web design makes your web page look good on all devices.