-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
167 lines (144 loc) · 10.8 KB
/
index.html
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
155
156
157
158
159
160
161
162
163
164
165
166
167
<!doctype html>
<!-- REMAKE: Use your bootstrap skills, classes, custom.css to make your homepage look better -->
<!-- Start righting reflection for Project 2-->
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atkinson Foudnation: New Media Production Projects</title>
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Concert+One&display=swap" rel="stylesheet">
</head>
<body>
<!-- ======= NavBar ======= -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Atkinson Foundation</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html">Directory</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="project-one/index.html">Project 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="project-two/panel-one/index.html">Project 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://atkinson-foundation.com/nmc/production/project-three/commerce/">Project 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://atkinson-foundation.com/nmc/fp">Final Project</a>
</li>
</li>
</ul>
</div>
</div>
</nav><!-- End of NabBar -->
<br>
<!-- ======= Header ======= -->
<header>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>New Media Production</h1>
<h2><a href="project-one/index.html">Project 1</a></h2>
<a href="project-one/index.html">
<img src="img/project-1.jpeg" alt="Screenshot of Project-one">
</a>
</div>
</div>
</div>
</header><!-- End Header -->
<br>
<!-- ======= Project 1 ======= -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>
In Project 1, I learned the basics of html and css. This project was so incredibly informative to what I am capable of once I take the initiative to act on my immense desire to learn. This is not the first time I learned how to code, however, it was a great refresher on the basics of coding and I also enjoyed seeing the differences between languages and how they can intertwine to affect each other!
</p>
<p>
One of the things that I struggled with was transferring my new knowledge of html and css coding that I learned on <em>freecodecamp.com</em> to my project that I made. The information on <em>freecodecamp.com</em> is a wonderful tool for individuals new or returning to learning code, however, the information is spread out throughout the lessons and it took me a little bit to find information and apply it. For example, I believe that the most time-consuming part of my project would be learning how to resize my images to automatically adjust to the screen width/size.
</p>
<p>
I am really proud of the fact that I learned html and css and applied that knowledge to build my own website and publicly host it with my original domain name. Along a similar line of thought, something I am proud of while designing my website is learning how to adjust my images. Some things about my design that I thoroughly like are that I included the "transform" element to allow the image to pop out when the user hovers their mouse over any image. In addition, I linked all the images to their respective sites, such as SZA's Ctrl album to the Spotify link of the Ctrl album. I am also very proud that I learned how to apply my newfound knowledge of the "hover" application to make the links in text form change color when the user hovers over them.
</p>
<p>
Going forward, I want to apply the knowledge that I learned from this project to streamline my coding experience while also making my abilities of coding html and css more efficient. I also want to use this knowledge and future knowledge that I will learn in this course to build my portfolio website that will document my creative work history.
</p>
</div>
</div>
</div><!-- End of Project 1 -->
<!-- ======= Project 2 ======= -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2><a href="project-two/panel-one/index.html">Project Two</a></h2>
<a href="project-two/panel-one/index.html"><h3>Panel One</h3></a>
<a href="project-two/panel-one/index.html"><img src="img/project-2-panel-1.png" alt="Panel One Screenshot"></a>
<br>
<p>
After learning the fundamentals of html and CSS coding and how they interact with front-end web development, I learned the operations of bootstraps and how it can revolutionize primitive, hard-coding web development. I used the fundamentals of bootstraps in Project 2 Panel 1 to build a "Concert Informational Page" that talks about popular hip-hop concerts in the US. In Panel 1, I utilized SVG images for the first time to create the topography-map-looking background of the web page. With the in-depth learning of bootstraps that we went over in class, I was able to build this part of my project with a few obstacles. The main problem that I faced was implementing the timed infographic that appears at the top of the screen, and allowing the user to interact with the pop-up so when they click the "x" it closes the notification.
</p>
<a href="project-two/panel-two/index.html"><h3>Panel Two</h3></a>
<a href="project-two/panel-two/index.html"><img src="img/project-2-panel-2.png" alt="Panel Two Screenshot"></a>
<br>
<p>
While developing the second part of my project, Panel 2, I found that it was a great exercise in learning about themes that I can use in the future to gather website ideas, as well as a good exercise in reproducing the information on Panel 1 onto Panel 2 without changing the theme's CSS. It allowed me to understand the functions of themes better and gave me the chance to explore the possibilities of html that were present in the theme already. Learning about using an image as a still background with an overlay on it while still being able to scroll was one of my favorite parts of Panel 2.
</p>
<a href="project-two/panel-three/index.html"><h3>Panel Three</h3></a>
<a href="project-two/panel-three/index.html"><img src="img/project-2-panel-3.png" alt="Panel Three Screenshot"></a>
<br>
<p>
Similar to many of my peers in this class, Panel 3 was the most challenging and most rewarding part of Project 2. All of the main content for my website was already present, but styling the CSS on a separate file proved to be a worthwhile challenge. I had to figure out what the existing CSS operated, how it worked, and then I applied that knowledge to tailor Panel 3 stylistically to my tastes. A great example on Panel 3 would be the Social media Icons located on each concert description panel. It took time for me to locate where each icon was in the existing CSS file, understand how each element and its modifier affected what was on the page, and reflect it onto my custom CSS file to match my taste. Going forward, I look forward to learning how to navigate the file structure of themes easily and use the future skills we will learn in this class to increase efficiency while doing front-end web development.
</p>
</div>
</div>
</div><!-- End Project 2 -->
<!-- ======= Project 3 ======= -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2><a href="http://atkinson-foundation.com/nmc/production/project-three/commerce/">Project Three</a></h2>
<a href="http://atkinson-foundation.com/nmc/production/project-three/commerce/"><h3>Commerce</h3></a>
<a href="http://atkinson-foundation.com/nmc/production/project-three/commerce/"><img src="img/project-3-commerce.png" alt="Commerce Wordpress website"></a>
<br>
<p>
Learning about the interworkings of Wordpress has pushed my limits for time-management, tenacity, and focusing. This project was fun, interactive, and worthwhile to learn as I challenged myself to interwind my previous knowledge of CSS custimization and design optimization. Figuring out how to tailor Woocommerce to my site and learn how to navigate its plethora of products was a really valuable experience, and I will carry this expereince throughout my future and apply it to any websites I build or simply use the fundamentals I learned to teach others.
</p>
<a href="http://atkinson-foundation.com/nmc/production/project-three/news/"><h3>News</h3></a>
<a href="http://atkinson-foundation.com/nmc/production/project-three/news/"><img src="img/project-3-news.png" alt="News Wordpress website"></a>
<br>
<p>
Similar to learning about the application of Wordpress to the Commerce site and selling things online, the dichotamy of learning the News site provided speciffic knowledge that I did not learn while building the Commerce site. While building this site, I specifically had challenges differenciating how to build a post and have it show up on multiple pages on my news site. In addition, I had an interesting time finding how to upload alternate text to all of my images and not just the individual picture.
</p>
</div>
</div>
</div><!-- End Project 3 -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="js/bootstrap.bundle.js"></script>
<!-- ======= Footer ======= -->
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12">
<p class="copyright">© 2022 John Atkinson NMI Production</p>
</div>
</div>
</div>
</footer><!-- End Footer -->
</body>
</html>