Front-End Development Tips and Tricks

1. Did you know you could make a form (Html Tag) a parent of different other divs and then make an input inside the form tag of type submit? This solved my problem when I needed to style the Html page as normal but then make a click of a button submit a form with only one input text box. How neat is that!! 

When developing using Javascript, you might need to click a link programmatically
  - $('#id')[0].click() //will do the trick.
2. When testing your code in Internet Explorer 11 and would like to see fresh content from the server instead of cached JavaScript
  - Press Ctrl + Refresh button from IE Browser
3. Ternary Operators in Javascript
  - var valueObj = (valueB == someValue?)SomeFunction():SomeOtherFunction()

CSS
1. If you want to animate the background of a button based on YouTube.com

button{
background-color: blue;
animation: btn 5s ease forward infinit;
}
//animation has to have keyframes this can be used animating svg's as well
@keyframes btn{
from {
opacity:0;
}
to {
opacity: 100
}
}

//If you want to make the first later of paragraph big
p::first-letter{fontsizeInHere}
//if you want to click on a link and then navigate to div with an id specified in an href
<a href="#IdInHere"></a>
<div id="IdInHere">SomeText</div>
//If you want to implement smooth scrowling
html{
scroll-behaviour:smooth;
}
//If you want to invate the background color with text color
filter: invate(1), hue-rotate(180degress)
[NB] When you use pixels in your styling user does not have controller when they want to increase font size so use rem
html{font-size:68%}
h2{font-size:2rem;} //This way user can change font size in their browser and the page will adopt.
//If you want to add gradient to the background
btn{
background:linear-gradient(to left, rgb(),rgb())
//you can also clip the background to the text so that the text have gradient effect
web-kit-bacground-clip:text;
web-kit-fill-color:transperant;
}

[NB] When I was Developing during my personal time. I thought of writing my own HTML element. Considering the (Do not repeat yourself) Development pattern, creating your own HTML elements like CheckBoxes, Grid and Inputs will save you a tremendous amount of time and it will show your style in the application.

3. To start a brand new HTML template in VS Code just type "!" the exclamation point and HTML Boiler Plate will be generated for you.

4. I noticed when coding that, I code really well and think thoroughly when there is airflow in the room. This might not work for you, but when there is fresh air flowing in the room, solving problems becomes easy.

5. Bootstrap 4: There is a difference between class="container" and class="container-fluid", what am saying is that when you need content to align to body content while in the footer, you better use class="container" to wrap the content to align to the body content. For the footer, you could then style the background to match the background of the container so it does not show that there are two different divs. 

6. TextArea in Asp.Net Core does not post data to the Server: When this happens try removing row="Number" and column="Number"

7. How to remove a highlight that appears when the user clicks on a button:
- style= outline=0 # do this on a button or link

Resources

1. HtmlDog