Here, I'm learning about HTML coding.
I am watching this video.
Day 1: Chapter 1: I downloaded Visual Studio Code and set up a file structure on my laptop. I created a file called "index.html". This took me from the beginning of the course to 5:00 in. Only 4 hours and 2 minutes left!
Day 2: first line of code is a element or tag... for html files, it's <html></html>. There are 2 sections of each page.... <head> (containing meta data) and <body>. I download Live Server extension. I learn <h1> header and <p> paragraph. I'm up to 13:00.
Day 3: Error finding validator.w3.org... you upload files and it checks and suggests fixes. There are things like <charset> and <lang> that I include. I'm up to 20:00
Day 4: Chapter 2: Head Element (stuff NOT seen in the webpage). I'm trying to get it to go to main.css to read style elements... but it's not working. Also trying to make an icon at the top.
Day 5: Chapter 3: Text elements: learn <h2> and <h3> as well as horizontal rule <hr>. I learn line break <br>. These are "block level" elements... there are "returns in the content. There are also "in line elements". Like <em> and <strong>. There are also html entity elements, like white space collapsers or ways to use symbols like <.... " " provides non-breaking space. Here are some other html entities: Here are some things I learned: abbreviation that expands the abbreviation <abbr title="definition"> and < & > and ©. I'm at 45:00 by the end.
Day 6: Comment <!-- Add notes to yourself in the html --> and <address> Chapter 4: List Types: ordered, unordered, description lists; <ol>, <ul> and <dl> and <dd> (description term and indented detail)
Day 7: Chapter 5: Adding Links. <a href="https://blah blah"> Anchor </a>. Absolute reference (out on the web) or relative reference (on the same server). (this is like: <a href="aboutme.html"> Dave </a>. I learn to type "lorem" to get a paragraph of fake text. (it expands when you write lorem). Third type of link is an "internal reference" -- references a portion of the same page. Here, you need to add sections, like <section id="books">. and then reference it with <a href="#books> Books </a> (ends at 1:15 minutes)
Day 8: More add links. <a href="#"> takes you to the top of the page. Added this in the 'about' page...Learn about download link. mailto link. dial link. and absolute link that opens in a new tab. Open <a href="https://www.google.com/" target=""_blank">Google</a> in a new tab. <a href="/">Back to home</a> takes you back to the root site. (ends at 1:30) what about <nav>?
Day 9: Chapter 6 Add Images. <img src="img/local photo" alt="name of photo" width="300" height="300" >. Also <figure> and <figurecaption>; also Loading="lazy" (or "eager"). you can also add a website for src="https//etc." Also <code> to show code elements. (end at 1:55)
Day 10: Image sources: Unsplash, Pexels, Placeholder Image Generators, Fill Murray, Irfaview (resizes images), Canva, tinypng.com (make it smaller)..... Chapter 7 Semantic Tags: <header> and <main> <footer>; you can label <nav> <nav aria-label="primary-navigation">; <section> and <article> (that are both OK); <mark> = highlight text in-line; chrome extension has "html outliner" that shows what the article looks like in outline form. Next chapter (2:24) will be "table elements.
No comments:
Post a Comment