Today I Learned

Today I learned is my attempt at learning something new everyday and recording it daily for future references.

January 2025

January 5, 2025

Today, I learned about essential git commands

January 6, 2025

Today, I learned about basic CSS and built expanding cards which is part of the 50 projects in 50 days tutorials on Oreily by Brad Traversy and Florin Pop. I plan to use it for creating a calendar for my daily learning schedule.Here's the Codepen link.

#50projectsin50days

January 7, 2025

Today, I learned that you can use variable like methods in CSS. For e.g.,

we first define a root item:


	  :root{
    	--line-border-fill: #3498db;
    	--line-border-empty: #e0e0e0;
		}

and then we refer it to it when we are defining attributes for individual items such as


		.progress-container::before{
    	content: '';
    	background-color: var(--line-border-empty)};

This means we can refer line-border-fill and line-border-empty in any place in the entire CSS file. This and other points led me to create a progress tracker in HTML/JS/CSS which can be used for tracking multi-step forms. Here's the Codepen link.

#50projectsin50days

January 8, 2025

Today, I learned that you can create some cool animations which are not dependent on libraries like JQuery etc. You can use vanilla javascript with a mix of CSS and HTML to create effects that were previously only possible via JQuery or other such helper libraries. This and other points led me to create a search widget that opens when in focused or remains shrunk when inactive. Here's the Codepen link.

#50projectsin50days

January 9, 2025

Today, I learned that we can use calc() functions in CSS. This helped me in creating a blurry loading background page.Here's the Codepen link.

#50projectsin50days

January 10, 2025

Today, I learned how to implement animation in your web pages using simple CSS methods and keeping things attractive. Maybe, this example can be used for creating dates in my web app.Here's the Codepen link.

#50projectsin50days

January 11, 2025

Today, I learned how to use CSS to style your forms and how to dynamically add span via JavaScript in the HTML to create some dynamic effect. The result is the form below. When a user focuses on the email /password field, the label moves upwards. Here's the Codepen link.

#50projectsin50days

January 12, 2025

Today, I learned how to use the Fetch API with a config variable to pass the headers. I also learnt how to use the Async/Await operator and how to display the data fetched into HTML. The API here is available for free at 'Dad Jokes' . Here's the Codepen link.

#50projectsin50days

January 13, 2025

Today, I learned how to use the Ternary operator in HTML and how it essentially simplifies the logic and makes it more terse. For e.g. If I need to pass an 'if...then' condition, I can write it traditionally as


	  		if()
	  			then{
					//condition to pass if true
	  		}
				else {
					//condition to pass if false
			}

Using the `ternary` operator, we can rewrite the condition as


	  	${event.key === ' '? 'condition to pass if true' : 'condition to pass if false'}

Here's the Codepen link.

#50projectsin50days

January 14, 2025

Today, I learned how to make an FAQ box with dynamic interactivity. #50projectsin50days

</body>