Day 22
Cleanup CSS and add a links in the nav.
Day 15-21
HTML is finished and have been working on basics of CSS. Although not much for course work is completed the last week. I had been spending much time styling the cards on the home page.
Today i'm back to the course work on freecodecamp. Working through the "Styling lists and links" lesson.
style of list-style-position: inside
- Item 1
- Item 2
- Item 3
style of list-style-position: outside
- Item 4
- Item 5
- Item 6
You will notice as styling is added to this portion of the web page the further back you go to the beginning. The likelihood it will be all kinds of messed up will be noticeable.
This is neat addition to styling a list.
I tried adding an img in place of the circle or square. Styling from the head of the .index and the .css sheet. Neither would work. The styling However I left the inline styling in case I come back to test this.
- Item 1
- Item 2
- Item 3
After working I continued in freecodecamp
After finishing the previous styling lab. I am now on the backgrounds and borders
I watched a video from Coding2go on YouTube about CSS and flexbox. That will be a game changer once I get a little further in understanding a few of the basics.
Day 14, adding CSS
Today I'm adding styling. It's been a messy couple days as I'm getting back into routine. Hotel stays are a way of life now. Atleast I have an air fryer to cook up some of my own meals.
Day 13
missed a lesson to complete the HTML in freecodecamp so I went back and finished it.
You will also notice at this stage that I am now making the newest entry at the top of the blog. I may or may not fix that 😉
Finished the HTML labs. Couple quizs left and the review. Then on to CSS. WOOT!
Day 1 in learning how to code... again.
freeCodeCamp is a great resource. I'm ripping through the basic HTML as I've done this type of course work several times over, over the years. Can I dedicate the next year to continuing to learn web development so I can work form anywhere?
Random Check box
Day 2
Continuing through HTML basics. Went through the Build a Cat Photo App workshop. Covered headings, paragraphs images, links and list both ordered and unordered and more. Sections were covered briefly in this workshop.
I also completed the Lab which was building a Recipe page. Took roughly an hour. Could have been quicker for me if I didn't have to click on the check code button twice for everyline of code
I am going to start the next lecture on HTML Fundamentals while I'm waiting for 9am to get here. In which case I'll be heading out the door for breakfast and head out for the day to begin knocking on doors and signing people up for a fibre optic drop to there house. Gotta pay the bills. Thought, maybe after a year of traveling selling fibre to homeowners. There could be oppurtunity to sell from home for someone like Jobber I don't remember learning about OG in meta descriptions before. Facebook introduced this in 2010.
Day 3
working on a lab. short on time today. Booked customers to early in the morning. I'm suppose to work later into the evening 7-8 pm. This is going to make for a very long day indeed. Touched on Figure and figcaption today as we built a travel webpage.
Day 4
Today is to be audio, audio player, loop, boolean. Source elements will help the browswers basically work. Poster attribute only works with the vidio element. Start using file formats with WEBP or AVIF rather than JPG and PNG. Never compress a JPG. Gotta comment that the internet speeds in this hotel are poor. They remind me of the days of dialup. Click on link, walk away, hope it loads before you get back to your computer. Matter of fact, as I'm typing I'm still waiting for this short video to download enough to see the player. I just read the transcript instead. Yeesh. Lesson continues from images and video formats. And has landed on SVG. Lesson suggests opening an SVG with a text editor and play with the code. Continuing on to replaced element is an element whose content is determined by an external resource rather than by CSS itself. img, iframe, video elements are examples.
A freeCodeCamp YouTube Video Embedded with the iframe Element
Day 5
Working with state of the link. :link - default, :visited - visited, :hover - hovering over and :active - activated. There is a fifth freecode camp did not go into detail about in the video :focused - used on elements like a form input to be focused typically triggers when the user clicks or taps on an element or selects it with the keyboard's Tab key.
The MDN docs reference these links as CSS pseudo-class elements. Matching every unvisted anchor or image map area element
< !--This is an HTML comment.-- > For future reference. I forgot how to use the comment - remove spaces to close < --
p>freeCodeCamp HTML basic reference pageFinished the basic HTML in freeCodeCamp by writing the test. Hit 100% first try through. I did look at the MDN Docs about Open Graph Data. So I coompleted 85 steps in 5 days. Moving on to Semantic HTML.
Day 6
Todays course work starts with the difference between i with lang attribute versus using the emphasis element.Quoting freecodecamp you should use the strong element in stead b element as it is a semantic element the emphasizes text that is crucial or urgent.
Moving into description lists.
- HTML
- Hypertext Markup Language
- CSS
- Cascading Style Sheets
Simple enough, terms with definitions would be a good use case. Recipes would be able to use this as well.
Day 7
Block and inline quotes
When to use them. Block quotes are for long quotes. Inline are for short quotes.
Here is the example of a blockquote.
Build your projects. Show them to your friends. Build projects for your friends.
Build your network. Help the people you meet along the way. What goes around comes around. You'll get what's coming to you.
It is not too late. Life is long.
You will look back on this moment years from now and be glad you made a move.
This is the example of an inline quote.
Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?
—Quincy Larson, How to Learn to Code and Get a Developer Job [Full Book].
The last example for inline quote.
As Quincy Larson said,
Momentum is everything.
Displaying abbreviations
You can use the title attribute to acronyms. For example HTML is the foundation of the web. -freeCodeCamp
Address and Time
Here's the address
The address element will be very handy when building business websites
Company Name
1234 Elm Street
Springfield, IL 62701
United States
Phone: +1 (555) 555-5555
Email: contact@company.com
And remembering to the place br/ at the end of the line to force the line break to the next line
Here's the TIME
The graduation will be on
Day 12
Covering the six main categories of ARIA roles:
- Document structure roles
- Widget roles
- Landmark roles
- Live region roles
- Window roles
- Abstract roles