HTML & CSS

Hyper Text Markup Language

1. HTML4 VS XHTML VS HTML5

https://www.youtube.com/watch?v=xzLYaR70SnE&ab_channel=FrameworkTechMediawww.youtube.com

2. What is <!Doctype>

Tells the browser about the version of HTML used

3. How to open a link in the new page?

4. How many ways you can write CSS?

3 ways

5. How to link the CSS file to HTML?

<head>
  <link rel="stylesheet" type="text/css" href="style.css">  // no closing tag 
</head>

6. How to group the css?

Content-box (default )

Border-box

8. CSS properties on all elements (presets we can follow)

*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}

9. Out of two paragraphs, how do you change the color of the first paragraph?

p:first-of-type{
    color:red
}

10. How do you select all p tags inside div tag in a simple way?

Using class or id you can also select like this

11. How to select only direct span children elements of a div tag?

12. How to arrange elements side by side or in any layout in CSS?

3 ways to arrange elements

Using floats (old way and require hacks like clearfix)
Flex-box (2D layouts)
Grid (3D layouts)

13. Which is the default CSS position?

static position is the default. If you want to specify top, bottom, and so on then use position relative or absolute.

14. What are floats and how to clear floats?

15. How do you make the two paras appear side by side without using flexbox or grid?

Using float as done above

16. Set background image in CSS.

17. CSS Selector - nth-of-type vs. nth-child

Both do the same thing sometimes so might get confused. Please watch this

18. The easiest way to align the container/ block-level element horizontally

margin: 0 auto; //works only horizontally but not vertically


// for text within a container, it is 
text-align : center

19. The easiest way to align the block-level element vertically

// HTML

<div class="container">
	<p class="center-me">I'm perfectly centered </p>
</div>



// CSS

.container {
	background-color: #ccc;
	width: 70%;
	margin: auto;
	text-align: center;
	padding: 5rem;
}

// HTML


<div class="container">
	<p class="center-me">I'm perfectly centered </p>
</div>


//CSS - Note that the default position is static
div {
	background-color: #ccc;
	width: 70%;
	margin: auto;
	text-align: center;
	height: 75vh;
}

.center-me{
	position:relative; /*static is the default*/
	top:50%; /*the text's head will now position center but we want center of the text to be centered*/
	transform:translateY(-50%) /*moves the text'head to 50% of its height above*/
}

20. When to use `vertical-align:middle`?

We can use this when working with inline or inline-block elements in two contexts.

Center content in a table cell
Center an image or icon placed along with the text

vertical-align - CSS | MDNMDN Web Docs

21. And condition css

This is a part of Expanding cards project. Checkout my git repo

@media (max-width: 900px) {
  //this works like and condition. If both the conditions are true then the display:none applies
  // condtion 1 - .panel:not(.panel--active)
  // condition 2 - .panel:nth-of-type(1)

  // I'm basically saying, if my 1st panel is not active then hide it
  // To say first panel -> Its second condition, to say 'not active' it's condition 1
  .panel:not(.panel--active).panel:nth-of-type(1) {
    display: none;
  }
}

22. ::before and ::after pseudo elements

Note that we can't apply pseudo elements on images as they don't have the content. In other words, we can apply for an element like p because it has the content or text and we can apply ::after after the text and ::before before the text, but not for images.

23. Can you modify :: pseudo class with JS?

No, you can't. You could do it with Jquery but not with Vanilla JavaScript. Define another class which can do it instead of ::before or ::after pseudo class.

24. CSS Selectors

W3Schools.comwww.w3schools.com

5 type of selectors

Simple selectors(select elements based on name, id, class)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)

25. On hovering on an element, can I change the style on some other element?

https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling

26. CSS Grid

You should know all grid properties by heart

// grid properties

// CONTAINER

1. set display:grid on container
2.   
  grid-template-columns: repeat(2, 1fr); /* items must splitup into 2 cols */
  grid-template-rows: repeat(1, 100px); /* 1st row is 100px*/
  grid-auto-rows: 300px; /* after 1st row, every row is 300px*/
  
3. To center the items inside it's grid cell, give this in grid container
justify-items:'center' 

4. To center all the items inside the grid container horizontally
justify-content:'center' // this can be 'space-around' and so on

5. To center all the items inside the grid container vertically
align-content:'center' // this can be 'space-around' and so on

6. To set gaps between rows 
grid-row-gaps : 10px;

7. To set gaps between columns
grid-column-gaps:20px;

6 and 7 can be combined into 
grid-gap : 10px 20px; //rowgap columngap

// ITEMS

Note: Lines are the lines starting at each cell (for both rows and columns)

8. To make first item to consume two spaces horizontally

.item-1{

  grid-column-start:1; // beginning of 1st line
  grid-column-end: 3; // beginning of 3rd line
  
  
  // same as writing
  grid-column : 1 / 3;
}
9. To make 2nd item consumes two rows in the same position
.item-2 {
  grid-row-start: 1;
  grid-row-end: 3;  
  grid-column-start: 3; // to tell the starting point of column
  grid-column-end: 4;
  
  
  //same as writing
  grid-row : 1/3;
  grid-column:3/4;
}

10. Using the above properties we can make it consume an item an area (2 rows and 2columns)

.item-3 {
  grid-row: 2/4; // start at 2 and end at 4
  grid-column: 1/3; // start at 1 and end at 3
  
  // instead of specifying the ending, we can tell it to consume the desired rows
  grid-row : 2 / span 2; // span means occupy 2
  grid-column: 1 / span 2;  
}

// instead of doing above to define area, we can use grid-area
.item-3 {
  //grid-area : row-start / column-start / row-end / column-end
  
  grid-area : 2 / 1/ 4/ 3
  
  which is same as 
  grid-row: 2/4; 
  grid-column: 1/3; 
  
  
  which is same as 
  grid-area : 2 / 1/ span 2/ span 2;
  
  
}

NOTE: You can also overlap two or more items by making it occupy same rows or cols
and then play with their z-index to create required layouts

11. To align all individual items to center or start or end you know to use justify-items 
and align-items. 

To position all the elements horizontally or vertically you do 
justify-content and align-content

To justify and align one single item you can do this

.item-1 {
  justify-self: start;
  align-self: center;
  
  // which is same as 
  place-self : center start; // vertical horizontal, keep in mind (vh) not hv
}

Till now we learned basics of grid like how to align container and items. There is another way of doing things in grid where we specify a name to each item and then place it in the container (literally saying how this item should be and where it should be placed in the container). The below video timestamp for this one is 18.48

// defining names of the grid items so that we can align them in the container using 
// grid-template-areas


.grid-container {
  height: 100vh;
  border: 10px solid #14a76c;
  display: grid;
  
  
  
  -----------------------------
  grid-template-areas:
    "header header header"
    "nav main ads"
    "footer footer footer";
    
  //after setting the layout, we can define the sizes using,
  
  grid-template-rows: 60px 1fr 60px;
  grid-template-columns: 20% 1fr 15%;
  
  
  
  // three statements above can be written in one statement using
    grid-template:
    "header header header" 60px
    "nav main ads" 1fr
    "footer footer footer" 60px
    / 20% 1fr 15%;
    
    
    // creating empty space using a dot
    
    grid-template:
    "header header header header" 60px
    "nav main . ads" 1fr
    "footer footer footer footer" 60px
    / 20% 1fr 10% 15%;
}


.item-1 {
  grid-area: header;
}
.item-2 {
  grid-area: nav;
}
.item-3 {
  grid-area: main;
}
.item-4 {
  grid-area: ads;
}
.item-5 {
  grid-area: footer;
}

27. Border vs Outline

The CSS border properties allow you to specify the style and color of an element's border.

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

PreviousNode Js (John Smilga - Udemy)NextE-commerce Project (React)

Last updated 4 years ago

hashtag1. HTML4 VS XHTML VS HTML5

hashtag2. What is <!Doctype>

hashtag3. How to open a link in the new page?

hashtag4. How many ways you can write CSS?

hashtag5. How to link the CSS file to HTML?

hashtag6. How to group the css?

hashtag7. Box-Modal

hashtag8. CSS properties on all elements (presets we can follow)

hashtag9. Out of two paragraphs, how do you change the color of the first paragraph?

hashtag10. How do you select all p tags inside div tag in a simple way?

hashtag11. How to select only direct span children elements of a div tag?

hashtag12. How to arrange elements side by side or in any layout in CSS?

hashtag13. Which is the default CSS position?

hashtag14. What are floats and how to clear floats?

hashtag15. How do you make the two paras appear side by side without using flexbox or grid?

hashtag16. Set background image in CSS.

hashtag17. CSS Selector - nth-of-type vs. nth-child

hashtag18. The easiest way to align the container/ block-level element horizontally

hashtag19. The easiest way to align the block-level element vertically

hashtag20. When to use vertical-align:middle?

hashtag21. And condition css

hashtag22. ::before and ::after pseudo elements

hashtag23. Can you modify :: pseudo class with JS?

hashtag24. CSS Selectors

hashtag25. On hovering on an element, can I change the style on some other element?

hashtag26. CSS Grid

hashtag27. Border vs Outline