Reviewing HTML concepts and establishing a habit

 In my planner each week I write out three things automatically.

1. Some sort of motivational theme or (soon) a bible verse as my "theme of the week"
2. A task each day to exercise
3. 30 minutes of freeCodeCamp

Exercising is still something that I need to improve on the habit front. Last week was a bit of a downer, and I think partially it's because I didn't drink enough water, exercise, and eat healthy (hello popcorn for lunch twice).

But with freeCodeCamp, I've been able to establish a nice rhythm. Either in the mornings or during my lunch break, I'll set aside 30-45 minutes to work on the new full-stack developer content they recently released (linked in my previous blog post). I decided to just do everything in the cert, even though I've previously finished their HTML/CSS content and most of their vanilla JavaScript content. It's good review, and I'm a completionist I suppose.

And I'm glad I've taken time to review the HTML content. First off, it's been way more in depth than their previous courses. There is a much higher focus on accessibility and semantic HTML. A few things which have stood out:

• Presentational vs Semantic HTML: Presentational is older and includes elements that are no longer supported, and it's main focus is just on the look of the content on the screen. CSS has made most of these elements relatively pointless now. Semantic HTML involves using elements that are more descriptive in their purpose (as opposed to the older <div> element), and they are better for accessibility and website SEO.
  
  
• HTML Forms have four states:
• Default: which is editable
• Focused: when you're in one of the form inputs specifically (i.e. clicking into a text field and the box highlighting a blue border)
• Disabled
• Read-Only
• (The HTML Form states sort of mimic what I'm used to with Harness rules in Pega, so I found it interesting.)
  
  
• HTML Entities: these provide a way to write out certain symbols that are usually code in HTML. For example, if I want to write out <div> in HTML text, without HTML entities I cannot accomplish this because the browser will think I'm trying to start a new <div> container. With HTML Entities, I can use a combination of letters and/or numbers to have the browser render symbols like < and >. These combinations are called references:
• Named character references start with "&" and end with a ";"
• &lt; is the < symbol
• Decimal numeric references are similar but use numbers instead of letters
• Hexadecimal numeric references are similar but use hexadecimal instead

I'm currently going through the lecture video series for accessibility, which is a deeper dive into screen readers and tools that come native with operating systems to help with viewing or listening to content. Additionally freeCodeCamp is reviewing various peripherals like larger-text keyboards and different input devices like trackpads and mouse-balls and joysticks. All must be taken into consideration for modern development.

That's all I have for this week. I'm also glad I could sit down for 20 minutes or so and type this out this week. I want to blog (ideally) every week, so this week was a success!