Blog/post2.html at main · amad00/Blog · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Semantic HTML</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,500,700|Muli:400,500,700&display=swap"
        rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>

<body>
    <header>
        <h1><a href="index.html">Ama's Blog</a></h1>
        <nav id="mainnav">
            <ul>
                <li><a href="#">Archives</a>
                    <ul class="submenu">
                        <li><a href="post1.html">01. History </a></li>
                        <li><a href="post2.html">02. Semantic</a></li>
                        <li><a href="post3.html">03. Typeface</a></li>
                        <li><a href="post4.html">04. Web vs App </a></li>
                        <li><a href="post5.html">05. Core Model</a></li>
                        <li><a href="post6.html">06. Web Design</a></li>
                    </ul>
                </li>
            </ul>

        </nav>
    </header>

    <section class="blog">
        <nav>
            <ul>
                <li><a href="post1.html"><i class="fas fa-chevron-left"></i> Internet History</a></li>
                <li><a href="post3.html">Cormorant Typeface <i class="fas fa-chevron-right"></i></a></li>
            </ul>

        </nav>


        <article class="blogpost" alt="laptop">
            <h2>Semantic HTML</h2>
            <time datetime="2020-02-11">February 11th, 2020</time>
            <img src="images/semantic.jpg">
            <p>Reading about Semantic HTML, I’ve learned about using tags that have a specific purpose and breaks down
                your page into different contents. I’ve never really thought about it much, but I think when styling I
                start forming ideas about how I want my page to look and then also think about the elements I want; I
                decide that I want a header and a footer, that I'll have sections. When I’m styling I break down the
                parts of my page based on what content I want to go where and then decide what tags would best fits the
                role.</p>
            <p>I chose the elements that I did because all the elements are ones that have a purpose for what I want to
                do with my blog. I have a section with articles nested because they are little sample teasers to read
                more about the blog. The elements help structure the content in a way that makes it easy to navigate to
                different parts of the page and to identify what is the header, or the main content, or the footer.
            </p>
            <p>For the style of my blog post, the look I’m trying to achieve is simple, minimalist but not keep it to
                plain. I like to keep my work simple; I don’t like to have a lot going on on the page, but sometimes it
                works. It depends on what I’m styling. I’m not using many colors. I think because of the way I want to
                style my blog post, it would disrupt the flow too much. I would like to design the links in my
                navigation bar, but I don’t quite know how I would like to style them.
            </p>
            <p>I think the most challenging in terms of visual design is trying to arrange everything I want on the page
                in a way that all works together. I like the gradient header I have, but I’m not sure how to go about
                making the links that are in the navigation on the gradient stand out. Also the footer is challenging.
                Not much goes in it, and I have the space for it at the bottom of the home screen but I don’t want to
                place it somewhere where it would look out of place.
            </p>
        </article>
    </section>
    <footer>
        <p>Ama Dadzie</p>
        <p>Contact: <a
                href="mailto:&#097;&#115;&#100;&#097;&#100;&#122;&#105;&#101;&#064;&#117;&#099;&#100;&#097;&#118;&#105;&#115;&#046;&#101;&#100;&#117;">&#097;&#115;&#100;&#097;&#100;&#122;&#105;&#101;&#064;&#117;&#099;&#100;&#097;&#118;&#105;&#115;&#046;&#101;&#100;&#117;</a>
        </p>
        <p><a href="http://validator.w3.org/check?uri=referer">Valid HTML5</a></p>
    </footer>
</body>

</html>