Section 09: Designing Beautiful Websites - Some Helpful Tricks

The goals

💪🏻Project Example: Tips & Tricks to Create Beautiful Websites

✌🏻CSS Custom Properties, Transitions & SVG Basics

 

3 Things to Remember

Add different features step-by-step

Think about the core information that should be transferred

Less is more - Don't overstyle your website

 

CSS tips

fonts

We shouldn't choose too many fonts for one website and also not many size options.

 

color

Use similar color tones for one website to feel unified.

Choose one primary color and the other side colors which can go well with a primary color.

Core color - Coordinate color

 

CSS variables & CSS custom properties

e.g.

html {
  --color-grey-100: rgb(236, 236, 236);
  /* we define a variable here and use it next time */
  background-color: var(--color-grey-100);
  font-family: 'Krub', sans-serif;
  font-weight: 400;
}

e.g.

html {
  --color-grey-100: rgb(236, 236, 236);
  --color-grey-400: rgb(139, 139, 139);
  --color-grey-600: rgb(58, 58, 58);
  --color-grey-900: rgb(41, 41, 41);

  --color-primary-300: rgb(115, 208, 255);
  --color-primary-700: rgb(0, 170, 255);

  --size-1: 18px;
  --size-5: 50px;

  background-color: var(--color-grey-100);
  font-family: "Krub", sans-serif;
  font-weight: 400;
}

.card-container {
  background-color: rgb(255, 255, 255);
  width: 350px;
  margin: 50px auto;
  box-shadow: 3px 3px 10px rgb(201, 200, 200);
  transition: transform 0.5s ease-out;

}

.card-container:hover {
  transform: scale(1.05);
}

h1 {
  color: var(--color-grey-600);
  text-align: left;
  padding: 30px 50px 0px 50px;
  margin: 10px 0;
  font-family: "Zilla Slab", serif;
  font-weight: 600;
}

.card-info {
  color: var(--color-grey-400);
  text-align: left;
  padding: 0 50px;
  margin: 10px 0 30px 0;
}

.price {
  color: var(--color-grey-900);
  background-color: var(--color-primary-300);
  text-align: center;
  margin: 30px auto 10px auto;
  font-size: var(--size-5);
  font-weight: 600;
}

.price-info {
  color: var(--color-grey-400);
  text-align: center;
  margin: 10px 0 30px 0;
  padding: 0 50px;
}

.sub-details {
  width: 300px;
  margin: 30px 50px;
}

.sub-feature {
  display: flex;
}

.icon {
  display: flex;
  width: 15px;
}

.sub-feature-text {
  color: var(--color-grey-600);
  padding: 2px;
  margin: 5px;
}

.button-container {
  text-align: center;
  margin: 30px 0 0 0;
}

.button {
  color: var(--color-primary-700);
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  width: 70%;
  padding: 10px;
  margin: 0 0 30px 0;
  border: 2px solid rgb(224, 224, 224);
  font-size: var(--size-1);
  font-weight: 600;
  transition: background-color 0.5s ease-out;
}

.button:hover {
  color: white;
  background-color: var(--color-primary-700);
  border: 2px solid rgb(255, 255, 255);
}

 

 

More About Selectors

html: Selects html element (=root element of a html file)

CSS rules are applied to html element & inherited to nested elements inside the html element

 

:root (pseudo-selector): Selects element which is the root of the document

CSS rules are applied to root element & inherited to nested elements inside the root element

 

* : Selects all elements of the html document

CSS rules are applied to all elements (specificity must be considered though)

 

CSS Transformations & Transitions

Transformation: Move / Change appearance of element, e.g. when hovering

Transition: Smooth transition from initial to transformed state, applied to 'initial state' of the element, not on event                                 triggering the transition

 

.card-container {
  background-color: rgb(255, 255, 255);
  width: 350px;
  margin: 50px auto;
  box-shadow: 3px 3px 10px rgb(201, 200, 200);
  transition: transform 0.5s ease-out;

}

.card-container:hover {
  transform: scale(1.05);
}

 

 

Using SVGs

Scalable Vector Graphics

XML based mark up language to describe teo-demensional vector graphics.

Text based description of scalable images that can be rendered by the browser.

 

https://heroicons.dev/

Heroicons – Free Open Source SVG Icon Library