HTML TUTORIAL
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.
CSS TUTORIAL
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 transparent, currentcolor, 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:
resizeoutline-offset