Build Your First Website

You do not need fancy coding to blog. HTML works just fine. In fact we will use a microformats property called an h-feed.

Inside the h-feed we add an h-entry for every post

• First make a page by duplicating index.html
• You can decide if you want to keep the biographical header. Just make sure you include an h-card somewhere on the page
• Next add the h-feed property to the top div
<div class="h-feed wrapper">
• You can add an optional name to the feed by using the p-name property
<h1 class="p-name"< My Learning Journies </h1>
• Now you just add a blog entry and add the h-entry we learned about in the last module
<article class="h-entry">
<a class="u-author h-card" href="/"></a>
<time class="dt-published">2019-06-27 13:22</time>
<h3>
Day one: Digging In
</h3>
<p class="p-summary">
First day working in the field
</p>
<div class="e-content">
<img class="u-featured imgLeft" src="https://cdn.glitch.com/a1310c49-d469-4900-be48-bf31fa4223f3%2FScreenshot_20190804-160552.png?v=1564953983631" alt="screenshot of gps tracker"> <p>
I have long wanted to finish the trail I have been building. #CLMOOC gives me a good opportunity. Today I spent about anhours doing a round of just mapping the next steps. I only walked about 2,038 feet and took 1,226 steps
</p>
<p>
I am looking forward to sharing this journey on my new blog. You can remix this site by clicking on the fish above. There is even a step by step guide.
</p>
<p>
So I am using my field work to help my work in the field. As I dig through the under brush I want to help folks build blogs.
</p>
</div>
</article>

• In the example post above you see the h-entry on the article
• We included a link to your homepage in the author h-card
• thedt-published property is included with the timeelement
• We also added a "u-featured" to the image since the post is primarily about that walk
• We provided a brief summary with p-summary property
• The content of the post is contained in the element with the e-content property
• Now go and add more blog posts

Even though we put all of our posts on the same page we want each article to have it's own url. We will use the id attribute

• Any HTML element can use the ID attribute. You ad id="name" inside the opening tag
• <p>becomes < id="thenameigive">
• You can now make a link going to the paraggraph named "thenameigive" by adding a pound sign
• The url https://example.com#thenameigive would bring you directly to that paragraph
• On our blog we will add the id attribute to the article element. This is the same element that has the h-entry property
• Each article on our blog will now have it's own url. This is important for sharing
• We will use our day and time of publishing for the ID
• If you only publish once a day you can use just the date
• We will use date and time
• Go to your latest blog post. Copy the dt-published and then add the ID attribute
• So we take <time class="dt-published">2019-07-16 18:58</time> and add
• <article class="h-entry" id="2019-07-16-1858"<
• To go to an anchor link using the ID attribute you add a # sign
• <a href="https://jgmac1106.glitch.me/blog.html#2019-07-16-1858"> will now take you directly to the blog post. Try it

• Go back to your index
• Find your nav section
• Add a list item and have it go to your blog.