WEBSITE
Link for css link
<link rel="stylesheet" href="CSS/general.css">
<a></a> - anchor(a), hyperlink to a webiste
<a href="https://www.youtube.com/" target="_blank">link to YouTube
</a>
href-modifies were the link goes
target-modifies were the link open weather in the current page or new page
HOVERS ,TRANSITIONS AND SHADOWS
shadows have value- vertical show, horizontal shadow , blur , color
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
a in rgb means how see through is the color
transition require 2 values-what you want to transition, duration(how fast)
transition: background-color 0.15s,
hover- when a cursor is hovering on the button
active-when the button is pressed
background-color: rgb(200, 0, 0);
color: white;
border: none;
height: 36px;
width: 105px;
border-radius: 2px;
cursor: pointer;
margin-right: 8px;
transition: opacity 0.15s;
}.subscribe-button:hover{
opacity: 0.8;
}.subscribe-button:active{
opacity: 0.5;
}
ELEMENTS
<span></span> - doesn’t add a feature in the text . makes it easy to class it without default
feature text. And doesn’t affect other text.
<strong></strong> - make the text bold
<u></u> - underlines the text
<br> - line break used in poems written at the end of the text
Block elements take up all the space In the line
<p></p> - paragraphs by default are block elements
In-Line elements are text element, appear in texts like <strong> or <u>, appear within the text
In-block element take up all the space it need to does not take the entire line
display: inline-block;
<div></div> - it is a block( like container) that contain other elements including other <div>
<div class="video-preview">
<img src="jpn.jpg" class="thumbnail">
<p class="video-title">Talking Tech and AI with Google CEO
Sundar Pichai!</p>
<p>Marques Brownlee</p>
<p>3.4M views · 6 months ago</p>
</div>
Create a box around the elements within div
o Block elements(<p>) no longer take up all the space in the line, they only take
up all the space in the container(<div>)
· – html entity for greater than(>),use an entity to avoid
browser of making a mistake of thinking it’s a html tag.
o We also use it for characters that are not in the desktop like tick()
To separate text in the same paragraph we use margin(left or right) in the css(style)
class=””
.video-preview{
width: 300px;
display: inline-block;
vertical-align: top;
margin-right: 15px;
}
Aligning two pictures from side to side we use vertical-align (css for 2 div)
o It has complications that cause the margins to not fully align and take up the
next margin to avoid the place between the remaining space we use (1Fr) which
takes up the remaining margin called css grids
.video-info-grid{
display: grid;
grid-template-columns: 50px 1fr;
}
o channel-picture{} It will take 50px then video-info{} will take up the rest(100px)
Csss grid
.video-grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 16px;
grid-row-gap: 40px;
}
.video-info-grid{
display: grid;
grid-template-columns: 50px 1fr;
Columns will be dived equally into 3 columns
Nested lay-out technique
There are two types of layouts 1. Vertical layout (items are top on one another)
2. horizontal layout (items are next to each other)
To creates both type of layers in the frame you must have to <div>
<div class="video-preview">
<div class="thumbnail-row">
<img src="thumbnail-1.webp" class="thumbnail">
</div>
<div>
<div class="channel-picture">
<img src="channel-1.jpg" class="profile-picture">
</div>
<div class="video-info">
<p class="video-title">Talking Tech and AI with Google CEO
Sundar Pichai!</p>
<p class="video-author">Marques Brownlee</p>
<p class="video-stats">3.4M views · 6 months ago</p>
</div>
</div>
</div>
Flexbox
we are going to use to create the header
similar to css grids but more flexibile
can also use flex box for alignment
flex: 1 in flexbox is similar to 1fr
difference with flex box and grids –
elements keep their width even if you change the position of one whereas grid doesn’t
o grids- are rigid layout
o flexbox- are flexible layout
flexbox elements-
justify-content: start/center/end/space between – align the elements to be layout in the
start, middle, end or even space between them.
Align-item: stretch/start/end/center -element stretch to fill out vertical space, align
vertical on top of the layout, align vertical in the bottom, align vertical in the middle
Youtube header
.header{
height: 55px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left-section{
background-color: lightblue;
width: 150px; //controlled width(doesn’t resize
}
.middle-section{
background-color: lightpink;
flex: 1; //width flexible
margin-left: 70px;
margin-right: 35px;
max-width: 500px; //limits the flexibility of the width
}
.right-section{
background-color: lightblue;
width: 200px; //controlled wid th(doesn’t resize)
}
We use flexbox when we focus on content size(header) and we use css grids when we want to
grids. You can also use both when you want to create nested layout
To stretch the search-bar we also use flex to make it fit in
To change font for a placeholder
.search-bar::placeholder{
font-family: Roboto, Arial;
font-size: 16px;
To remove 1 margin from two icon you use a negative 1px(-1px)
flex-shrink: 0;
Disable the width(right section) from shrinking when resizing resolution
width: 0;
Enables the width(search bar) from shrinking
Css position
Helps keep the header on top while you scroll
Keep the side bar on side of the page
An element on top of another element(e.g video time on top of thumbnail)
position: static;
It is a default, not needed to be written
position: fixed;
makes the header stick to the top
position property has 4 properties
o top(0px - top edge of the browser window)
o bottom
o left(0px- left edge of the window)
o right
If you set the properties in opposite position the header will stretch
o If you want a fixed position that doesn’t get resized you use height
height: 50px
o Works the same way with width
If you want space between the header and the thumbnail/ you want the header to
hover on top you use padding instead of margin
padding-top: 60px; //<body></body> use it in body
style>
Youtube header
.header{
height: 55px;
display: flex;
flex-direction: row;
justify-content: space-between;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
background-color: white; //bottom border line
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(228, 228, 228)
body{
margin: 0;
padding-top: 80px;
}
Youtube sidebar
.sidebar{
position: fixed;
left: 0px;
bottom: 0px;
top: 55px;
background-color: white;
width: 72px;
}
body{
margin: 0;
padding-top: 80px;
padding-left: 80px;
}
position: absolute;
placed on the page, moves when scrolling through browser
o position: fixed – placed on the browser doesn’t move when scrolling
if an element appears on top of a position: fixed element when scrolling you can use
z-index: 100;
element with a higher z-index(1) will appear on top of another elements
o the default z-index of all elements is 0
position: relative;
position: relative display the element normally but if I put it in an another element
(position: absolute) it will be relative to that element
.video-time{
background-color: black;
color: white;
position: absolute;
bottom: 8px;
right: 5px;
.thumbnail-row{
margin-bottom: 10px ;
position: relative;
<div class="thumbnail-row">
<img src="P/thumbnail-1.webp" class="thumbnail">
<div class="video-time">14:20</div>
</div>
Sidebar icon
.sidebar-link{
background-color: lightgrey;
height: 76px; //the amount of space the icons take
display: flex;
justify-content: center;
align-items: center;
}
.sidebar-link:hover{
background-color: rgb(235, 235, 235);
}
.sidebar-link img{ //is called css selector
height: 24px;
css selector tells the computer which elements are being styled .eg
the dot(.) shows that we are targeting the class
we already learned the class name selector(.sidebar-link) and the element name
selector(body{}) –no dot
also combine different selectors together by separating with a comma(,)
another selector you can use is to use space for different selectors
e.g(.sidebar-link img).
o Every image in the sidebar-link will be selected
Tooltip
When hovering on the button a tooltip must appear then when not hovering the tooltip
disappear
.search-button .tooltip{
position: absolute;
background-color: gray;
color: white;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 8px;
border-radius: 2px;
font-size: 12px;
bottom: -30px;
opacity: 0; //0 –the text will not be seen but be there
transition: 0.15s; //how long it appears before disappearing when
hovering
pointer-events: none; //when pointing at the text direction it will
still
disappear
white-space: nowrap; //prevent the text from covering the icon
}
.search-button:hover .tooltip{
opacity: 1; //1-text appears when hovering
Responsive design
Making the website as good as possible In any screen size
@media (max-width: 750px){ //resizing(decreasing)
.video-grid{
grid-template-columns: 1fr 1fr; 2 column will show
}
}
@media (min-width: 751px) and (max-width: 999px) { //
.video-grid{
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (min-width: 1000px){
.video-grid{
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
Shortcut
/*border-width: 1px;
border-style: solid;
border-color: rgb(192, 192, 192); */
border: 1px solid rgb(192, 192, 192);
inheritance
If you set a style on the outer element all the element if be affected
.video-grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 16px;
grid-row-gap: 40px;
text-decoration: underline;
}
Video-grid is the outer element all the paragraph in youtube wiil be underlined
Semantic element
Header, dev ,main,section they work the same as a div element but having different meaning to
screen readers
Header
nav - helps navigating a website
main- main content of the website
section- video grid
