NSWI142: Web Applications
3. HTML & CSS
Štěpán Stenchlák, KSI
stepan.stenchlak@matfyz.cuni.cz
Agenda
Today's goal is to finish the HTML & CSS part of the course.
- CSS Reset
- Layout modes
- Flow & float
- Positioned
- Flexbox
- Grid
- Responsive design principles
- CSS transitions & animations
Exercise: Before we start
Download the HTML file we will work with: cats.html.
Familiarize yourself with it.
CSS Reset
Used to remove unwanted default behavior and to ensure consistency across browsers.
Can be highly opinionated, there is no one true reset.
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Inherit fonts for form controls */
input, button, textarea, select {
font: inherit;
}Example of more aggressive reset: Tailwind.
Why border-box
Easier sizing of elements because it includes their border and padding.
width: 100%; padding: 1em; border: .5em solid darkgoldenrod;
box-sizing: border-box;
margin: 0 1em;
Responsive design
Approach to web design that makes web pages render well on a variety of screen sizes (mobile, tablet, ultra wide monitors, ...).
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no, minimal-ui">Layout modes
Control how elements are arranged on the page.
There are different CSS properties that control which layout mode is used: position, display, float.
Flow layout & float
Row elements are placed one after another in the same style as a text in a paragraph.
Block elements, such as div or p, start on a new line and take the full width available.
Long lines are wrapped to the next line.
line-height plays a role.
Use only for text-like content.
Flow layout demo
Flow layout demo with wrapping
word-break: break-alloverflow-wrap: break-wordFlow layout demo with float
Exercise: Flow layout
- Make the image in the second article float right but do not break the third article.
- Make the images in the first article exactly one third of the article width.
You might need to modify HTML.
Positioned layout
position: relative- Element is rendered normally and then moved (relatively to itself).position: absolute- Element is rendered after the normal flow and then moved (relatively to its last positioned ancestor).position: fixed- Likeabsolute, but is moved relatively to the viewport.position: sticky- Likerelative, but is moved relatively to its last scrolling ancestor.
Relative position
(top, left)
Absolute position
(margin-top, margin-left)
Absolute position
(top, left)
Sticky position
(top)
Exercise: Apply positions
- Make the top header bar not scroll with the rest of the page.
- Make the subitems in the navbar appear only when hovering over the parent item and without breaking the layout. Ensure they are still clickable.
Flexbox layout
Positions elements in a one-dimensional way (row or column).
You can use it for:
- Full page layouts
- Layout small items like menus with buttons and texts
- Centering
- Column system (see later)
Check CSS Flexbox Layout Guide by CSS-Tricks.
Flexbox layout demo
flex-wrap: wrap; min-width: 7em; flex-grow: 1;
Exercise: Apply Flexbox
- Make the logo and the title in the header aligned in a row, vertically centered, with text in the center.
- Make the main section a flex container with three articles of equal width.
Grid layout
Positions elements in a 2D table.
You can use it for:
- Full page layouts
- Complex components (tables, calendars)
- Column system (see later)
Check CSS Grid Layout Guide by CSS-Tricks.
Grid layout demo
Exercise: Apply Grid layout
Download this HTML document and fix TODOs in the source code.
Responsive design using breakpoints
Apply different styles based on window width.
Order of statements matters!
/* Styles for the smallest devices */
@media (min-width: 576px) {
/* Overrides for sm devices */
}
@media (min-width: 768px) {
/* Overrides for md devices */
}
@media (min-width: 992px) {
/* Overrides for lg devices */
}
@media (min-width: 1200px) {
/* Overrides for xl devices */
}Exercise: Responsiveness
Modify the website to look good on mobile phones by:
- reverting the column layout back to a single column,
- reverting the fixed position of the header,
- making all images full width without without any unnecessary spacing.
Column system by Bootstrap
Page is split to 12 "virtual" columns. Each element in a row specifies how many columns it occupies on which device size.
col-12 col-lg-6(on large devices two columns, on small devices one column)col-12 col-md-6 col-xl-3(one column, two columns on wider and 4 columns on large)
<!-- Equal width -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<!-- Custom width based on 12 column system -->
<div class="row">
<div class="col-12 col-lg-6"></div>
<div class="col-12 col-lg-3"></div>
<div class="col-12 col-lg-3"></div>
</div>Exercise: Column system using flexbox
Download 03-columns.html and fix TODOs in the source code.
The idea is to implement column system for selected screens. Since we have limited time we implement support only for two breakpoints: 768px and 1200px. This leave us with three screens: xs < 768px, md ≥ 768px, and xl ≥ 1200px.
Try to resize the windows to see the change.
CSS transitions
CSS can animate changes of selected properties using a transition property.
Typically combined with something that changes the style of the property such as :hover.
.element {
transition: all 1s ease; /* The transition property must be applied here, not in :hover only! */
transform: rotate(0); /* You need to set the initial state! */
}
.element:hover {
transform: rotate(360deg);
}
CSS animations
More complex animations can be created using keyframes.
@keyframes bounce {
0% { left: 0; top: 0; }
25% { left: 2em; top: 0; }
50% { left: 2em; top: 2em; }
75% { left: 0; top: 2em; }
100% { left: 0; top: 0; }
}
.target-element {
position: relative;
animation: bounce 0.5s infinite alternate;
}
Bonus: Finish all cat-related exercises
Then add at least one animation (perpetual) and transtion (on hover).
Upload the file to your public_html directory on webik page as cats.html.