Frontend introduction.

HTML/CSS
Created by:

Nazar Gorokhivskiy and Taras Chornyi,

Frontend developers and 4th year IoT
students
Oleh Ivaniuk
What is this all about?

The program was completely redeveloped and recreated according to

State of the current web and Ukrainian & Global Market.
The three main parts: 1. Lectures
A completely new set of unique lectures. Based on modern
requirements from Junior Frontend developer.

FYI, every lecture covers relevant and up-to-date part of Web

development. (No JQuery/Angular/Backbone etc.)
The three main parts: 2. Lab works

Three web projects (HTML & CSS, Pure

Javascript and React.js) as laboratory works
The three main parts: 3. Online coding

● Online coding sessions for each of three

projects, to support you during this
semester.

● During this sessions we will cover a lot of

Frontend Best Practises and explain how
to make beautiful websites without pain
and tears.
Short Q/A

What follows in a next hour:

Crash courses on HTML5 and CSS3

including some short live coding
examples! 🚀🤸‍♂️💻

Sooo…. Get ready!

HTML Agenda

● What we need to start ● Forms

● Tag syntax ● Buttons
● Page structure ● Images
● Hello World! ● Quotations
● Headings ● Semantic tags
● Paragraphs ● Links
● Tag attributes
● Lists
● Tables
Tag syntax

Element names surrounded by angle

brackets
Normally come in pairs (start tag and
end tag)
End tag is usually the same but with a
forward slash
Some tags close themselves (Remnant
of XHTML)
HTML-page structure
Headings

The HTML <h1> - <h6> elements represent six levels of section headings.
<h1> - is the highest level and <h6> - the lowest one.
Buttons

The <button> tag defines a clickable button.

Tip: Always specify the type attribute for a <button> element, to tell browsers what type of
button it is.

Available types in HTML5 are: button, submit, reset.

The <button> tag also supports both the Global Attributes and Event Attributes in HTML5
Paragraphs

A paragraph always starts on a new line, and

browsers automatically add some white space (a
margin) before and after a paragraph.

You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the display by adding extra spaces or extra lines in your
HTML code.
Lists

Unordered HTML List Ordered HTML List

An unordered list starts with the <ul> An ordered list starts with the <ol>
tag. Each list item starts with the <li> tag. Each list item starts with the
tag. <li> tag.

The list items will be marked with bullets The list items will be marked with
(small black circles) by default: numbers by default:
Forms
Links

The href attribute specifies the destination address, In our case it is a Google site!

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

● _blank - opens the linked document in a new window or tab

● _self - opens the linked document in the same window/tab as it was clicked( default case )
● _parent - opens the linked document in the parent frame
● _top - opens the linked document in the full body of the window
Quotation and Citation Elements

Short quoatations

Blockquote
Images

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag
creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:

● src - Specifies the path to the image

● alt - Specifies an alternate text for the image

More information on: https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/

Semantic tags
Semantic tags
Hello, CSS!

● What is CSS
● Ways to include css in your page
● CSS basic terms
● CSS selectors (priority levels)
● Font styles (font families)
● Sizes, units of measurement
● Background styles
● Box Model
● Flexbox
● Positioning CSS
● Pseudo Classes / Elements
What is CSS?

Adds website design and styling

without
and
with
CSS
CSS Terminology and example

Let’s code!
Ways to include css in html document
● Inline CSS ● External CSS
(used for most cases)

● Internal CSS

More information on: https://www.w3schools.com/css/css_howto.asp

CSS Font and text styles

CSS offers a rich set of properties for styling your text.

The most important (widely used) one are:

● color - can be in rgb / rgba / hex(#4412f1) / hsl

● font-family - should have multiple values
( for better UX )
● font-size - size, specified in px / em / rem
● font-weight - bold / normal / light ( or from 100 to
900)

● font-style - for making text italic

● text-decoration - adds to text
(under/over/through)
● text-transform - for UPPERCASE / lowercase /
Capitalized text
● text-align - for text positioning (left / center / right)
CSS Selectors
… and theirs priorities!

More information on: https://groupe-sii.github.io/cheat-sheets/css-selectors/index.html https://flukeout.github.io/

Units of measurement
Absolute ( fixed and doesn’t depend on any sizes of other elements )

● px - pixels are relative to the viewing device. For low-dpi devices, 1px is one device
pixel (dot) of the display. For high resolution screens 1px implies multiple device
pixels.

Relative ( depend on another length property )

● em - relative to the default font-size of the current element

● rem - (root em) relative to font-size of the root element
(in web -> html tag)
● vw, vh - relative to 1% of the width / height of the viewport
(browser window size)
● % - relative to the parent element

Info about other (almost never used) units can be found by the link below
More information on: https://www.w3schools.com/cssref/css_units.asp
Box model

● Content - The content of the box, where

text and images appear

● Padding - an area around the content. The

padding is transparent

● Border - a border that goes around the

padding and content

● Margin - an area outside the border. The

margin is transparent

More information on: https://hackernoon.com/the-box-model-44fc2c04a935

Box model: Shorthand properties

The following shema goes for both margins and

paddings e.g:

margin: 20px 30px 15px;

is the same as:

margin-top: 20px;

margin-bottom: 35px;

margin-left: 30px;

margin-right: 30px;
Box model: Border property

More information on: https://developer.mozilla.org/ru/docs/Web/CSS/border

Background styles

● background-color - specifies the background color

● background-image - specifies one(or more) background images
● background-repeat - specifies how to repeat the background images
● background-position - specifies the position of the background images
● background-size - specifies the size of the background images
● background-clip - specifies the painting area of the background images ( border-box |
padding-box | content-box )

Shorthand:

More information on: https://css-tricks.com/almanac/properties/b/background/

Border radius

● Four properties are set in the

clockwise order, starting from top-left

● The shorthand property exists and is

usually used the most (with one value)

● border-radius: 50% - an elegant way

to create a fully rounded shape for an
element
Flexbox
● The Flexbox Layout - aims at providing a
more efficient way to lay out, align and
distribute space among items in a container,
even when their size is unknown and/or
dynamic (thus the word “flex”).

● This technique solves almost all of your

item positioning process and is one of
the most important subject in CSS!

● P.S If you pass all levels of this amazing game you can
consider yourself as Flexbox Expert (no jokes, try it)
Flexbox Froggy - A game for learning CSS flexbox
https://yoksel.github.io/flex-cheatsheet/

More information on: https://tproger.ru/translations/how-css-flexbox-works/

Position property

The position allows you to arrange and place elements in a much more advanced way.

● positon: static - (default) not positioned in any special way

● positon: relative - positioned relative to its normal position (stays in document flow)
● positon: absolute - positioned relative to the nearest ancestor with custom position (taken
from document flow)

● positon: fixed - positioned relative to the viewport (taken from document flow)

● positon: sticky- toggles between relative and fixed, depending on the scroll position

More information on: https://www.w3schools.com/css/css_positioning.asp

CSS pseudo-elements and classes

● Pseudo-class - a keyword to css selector to define a special state of an element.

Denoted by one colon i.e :hover
The most notable are :hover :active :focus :nth-child(n) :first-child :last-child
:not(selector)

● Pseudo-element - a keyword to style a specific part of the selected element.

Nowadays, denoted by two colons i.e ::first-letter
The most notable are ::before ::after ::selection

More information on: https://www.w3schools.com/css/css_pseudo_classes.asp - all elements (at the bottom)

 Congrats!

Now you know the most important basic parts of HTML and CSS

See you on the first live coding ; )