github.io/playground.html at main · DeanAnderson-dev/github.io · 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Journey through the Basics of Web Design </title>

    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="app.js">
</head>
<main>
<header>
    <div  id="pageHead">
    <div id="header">
    <h1>From Basics to Front End Developer</h1>
    </div>
    <hr>
    <div class="host">
        <p>This page is hosted with <a href="https://pages.github.com/" target="_blank">Github Pages</a></p>
    </div>
    <nav>
        <ul>
            <li><a href="thelearningpath.html">Day by Day Blog</a></li>
            <li><a href="./links.html">Connect with Me!</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    </div>
</header>
<hr>
<body>

    <div class="main-story">
        <article>
    <h2>A Little Place To Mess Around</h2>
    <div class="startHere">
    <p class="helloWorld"><span class="firstLetter"> H</span>ello<span class="firstLetter">W</span>orld!</p>
    </div>
    <div class="storyTime">

            <p>My name is Dean and quite frankly have dabbled in all things tech since high school - graduating 1996.
            Now don't judge! 😉. As I'm looking to focus on web design as a career so I can be home with my family. You see I travel
            for work. So instead of doing that, another way is to learn while I'm on the road. I have built websites and ecommerce on my own over
            the last 15 years. However none from scratch, they've all been through drag drop builders. Ecommerce has been mainly Shopify.
            January 2025, I started a <a href="https://microbite.farm/" target="_blank"><span class="offLink">vertical farm</span></a> at home that we use Shopify for,
            recently having had to disable the ability for customers to purchase online since I have had to go back to work. They can still order through
            the form and my wife or kids step in and do the work. Planting, harvesting and deliveries. Are they not incredible! 👏</p>
            <p>Was going to post pictures, but in this moment I can't seem to figure that out. The svg i converted were super pixelated.</p>
            </div>
        </article>

    </div>
<div class="cards">
<div class="container">
    <div class="business-card container">
        <img class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="pretty flower">
        <p class="full-name">Dean Anderson</p>
        <p class="designation">Designer</p>
        <p class="company">Creatiful Design</p>
    <hr>
        <p>example@email.com</p>
        <p>555-555-5555</p>
        <a href="https://journeytobeawebdev.blog/"><span class="portfolio">Portfolio</span></a>
    <hr>
        <div id="social-media">
            <h3>Connect with me</h3>
            <a href="https://www.linkedin.com/in/deanbanderson/" target="_blank">LinkedIn</a>
            <a href="https://github.com/DeanAnderson-dev" target="_blank">GitHub</a>
        </div>
    </div>
</div>
<div class="container">
    <div class="business-card container">
        <img class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="pretty flower">
        <p class="full-name">Dean Anderson</p>
        <p class="designation">Designer</p>
        <p class="company">Creatiful Design</p>
    <hr>
        <p>example@email.com</p>
        <p>555-555-5555</p>
        <a href="https://journeytobeawebdev.blog/"><span class="portfolio">Portfolio</span></a>
    <hr>
        <div id="social-media">
            <h3>Connect with me</h3>
            <a href="https://www.linkedin.com/in/deanbanderson/" target="_blank">LinkedIn</a>
            <a href="https://github.com/DeanAnderson-dev" target="_blank">GitHub</a>
        </div>
    </div>
</div>
<div class="container">
    <div class="business-card container">
        <img class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="pretty flower">
        <p class="full-name">Dean Anderson</p>
        <p class="designation">Designer</p>
        <p class="company">Creatiful Design</p>
    <hr>
        <p>example@email.com</p>
        <p>555-555-5555</p>
        <a href="https://journeytobeawebdev.blog/"><span class="portfolio">Portfolio</span></a>
    <hr>
        <div id="social-media">
            <h3>Connect with me</h3>
            <a href="https://www.linkedin.com/in/deanbanderson/" target="_blank">LinkedIn</a>
            <a href="https://github.com/DeanAnderson-dev" target="_blank">GitHub</a>
        </div>
    </div>
</div>
</div>

<div class="contact" id="contact">


        <form action="" method="get" class="formBorder">
            <div>
                <h3 class="contactTitle">How Can I Help You?</h3>
            </div>
            <div class="form">
            <label for="name">Name</label>
            <input aria-label="Name" name="name" type="text" required aria-required="name" minlength="2" maxlength="20" placeholder="Name">
            </div>
            <div class="form">
            <label for="number">Number</label>
            <input aria-label="phone number" name="number" type="number" required aria-required="name" minlength="2" maxlength="20" placeholder="555-555-5555">
            </div>
            <div class="form">
            <label for="email">Email</label>
            <input aria-label="Name" name="email" type="email" required aria-required="name" minlength="2" maxlength="20" placeholder="example@email.com">
            </div>

            <div class="form formText">
                <textarea type="text" aria-readonly="text"> Additional Comments?</textarea>

            </div>
        </form>


</div>

</main>

<div id="pageFoot">
    <footer >
            <h4 id="contact">Contact</h4>
            <address>
                <p>Phone: <a href="tel:5555555555"><span class="contact">555-555-5555</span></a></p>
                <p>Email: <a href="mailto:fake@email.com"><span class="contact">fake@email.com</span></a></p>
            </address>

    </footer>
</div>


</body>
</html>