Day 4

Local Setup STEPS:

  1. Create an account on CodeSandbox.io
    www.codesandbox.io
  2. Create an account on GitHub
    www.github.com
  3. ​Create an account WebMasters Portal
    www.bewebmasters.com

The problem with having background images, with CSS:

  • they need to be scaled properly (without losses)
  • they need to be styled

Solution:
the HTML's <img> tag

<img 
     class="image" 
     src="https://framerusercontent.com/images/gPrYLwg38BGyWaAHDpE9nIvAa1Y.jpeg" 
     alt="MDN Logo" 
/>

<img> tag is an inline tag

margin and padding in CSS:

.demo {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  
  margin-top: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  
  /* margin shorthand */
  margin: 5px 5px 5px 5px;
  
  
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  
  /*   padding shorthand */
  padding: 5px 5px 5px 5px;
  
  
}

Pseudo Classes in CSS

a {
  background-color: lightblue;
  color: black;
}


a:hover {
  border: 5px dotted gray;
}

a:first-child {
  background: floralwhite;
}

Conditional CSS:

:hover,

:focus,

:link,

:visited,

:active,

:nth-child(),

transitions in CSS:

p {
  transition-property: background-color;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
/*   transition: background-color 300ms ease-in-out 0s; */
}

p:hover {
  background-color: skyblue;
}

when value of a property changes on some user action, we can enrich the path to that change and make it visibly appealing for user.