User:ZUZU/Study/Web02

I find that sorting by week isn't very logical.Next, I will organize it by days.


Contents
1 Day 01
1.1 Header
1.2 Sidebar

2 Day 02
2.1 Article flow

3 Day 03
3.1 Add font to webpage
3.2 DOM

4 Day 04
4.1 events

Day 01
practice web page
Header
<!DOCTYPE html>
  <header class="header">
    <div class="left-section">
      <div class="logo">logoooo</div>
    </div>
    <div class="middle-section">
      <input class="search-bar" type="text" placeholder=" ">
      <button class="search-button">
        <img class="search-icon" src="icons/search-icon.svg">
      </button>
    </div>
    <div class="right-section">
      <div class="button1-container">
        <img src="icons/Star.svg">
        <div class="tooltip">i dont know what is this</div>
      </div>
      <div class="button2-container"><img src="icons/Polygon.svg"></div>
      <div class="button3-container"><img src="icons/Ellipse.svg"></div>

    </div>
  </header>
.header {
  height: 15vh; /* 15% of the viewport's height */
  min-height: 160px; 
  display: flex; /* Turns the header into a flex container */
  flex-direction: row; /* Sets the direction of the flex items to be in a row (horizontal) */
  justify-content: space-between; /* justify-content used to style elements according to the main axis*/

  position: fixed; 
  top: 0; /* there is default gap between header and edge ,so it need to set them to 0 */
  left: 0;
  right: 0; 
  z-index: 100; 

}
Sidebar
Day 02
Article flow 
Day 03
Add font to webpage 
upload font files to web server or a CDN
define @font-face rules in css
@font-face {
    font-family: 'CentSchbook BT';
    src: url('path/to/CentSchbook-BT.woff2') format('woff2'),
         url('path/to/CentSchbook-BT.woff') format('woff');
  
}
DOM 
Day 04
events 