frontend-stuff

Useful HTML tags

1. target="_blank"
   insert this in anchor element to open the redirection in new tab
   

2. href="#"
   for creating dead links

3. <input type="text">
   input element that accepts text as input

4. <input type="text" placeholder="Something you wanna display in placeholder">
   to display text in placeholder

5. <form action="/url-where-you-want-to-submit-form-data"></form>
   

6. <button type="submit"> Submit </button>"
   to submit the form to the url in the action

7. <input type="text" placeholder="placeholder text" required>
   to make the input feld mandatory to fill before submitting
   

8. <label for="indoor"><input type="radio" id="indoor" name="outdoor-indoor">Indoor</label>
<label for="outdoor"><input type="radio" id="outdoor" name="indoor-outdoor">Outdoor</label>
   Syntax of a radio button
   

9. <label for="loving"><input type="checkbox" id="loving" name="personality">Loving</label>
<label for="caring"><input type="checkbox" id="caring" name="personality">Caring</label>
<label for="chutiya"><input type="checkbox" id="chutiya" name="personality">Chutiya</label>
   Syntax of Checkbox
   

10. value="WhateverTheNameOfYourOption"
    This is to be kept inside the input element of your radio/checkbox
    

11. <input type="radio" name="outdoor-indoor" checked>
    For Making a Button checked by deafault if the user doesn't click on any option
    

Useful CSS info

1. <style> Here goes your css </style> To Write css inside html file , just write the css in this block. Remeber to keep it inside the header of the page
   

2. .small-font {
font-size: 16px
font-family: monospace;
}
   For defining a specific font and font-size in css

3. CSS borders have properties like style, color and width, Here's how to use them.
   .thick-pink-border {
border-width: 10px;
border-color: pink;
border-style: solid;
}
   

4. border-radius: 50%;
   For making the photo/element circular put border-radius as 50%
   

5. background-color: silver;
   For changing background color to silver/desired color
   

6. An id has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the id will be applied.
   

7. Using an id Attribute to Style an Element
   #cat-photo-form {
background-color: green
}
   

8. An element's margin controls the amount of space between an element's border and surrounding elements.
   

9. An element's padding controls the amount of space between the element's content and its border.