Code Academy may be one of the most accessible, and easily understood online resources for those with little to no experience in any type of computer science education to understand a rudimentary version of HTML and CSS It provides a step by step guidance and instruction on what lines of code to change within its coding sandbox, and then, allows you to run the code you were prompted to provide, and then immediately displays a preview of what elements you were changed with your code lines. Obviously, as a student of Digital History, there are going to be instances where, specifically within our final projects, we may have to do some rudimentary coding at the base level in order to flesh out a digital project in the historiography of our choosing, and these introductory articles on the basis level of HTML and CSS were easy to understand, now that I have done these courses, I have a better understanding the interworking of these concepts in order to flesh out my blog, and any other coding adjacent projects in my future as a historian.
Of the two lessons, between HTML and CSS, I felt HTML was the most useful. Mostly, because this is the backbone of coding, and CSS is simply just the aesthetics of their original code. I think, the HTML program was easily followed, and I especially enjoyed the display box to the side, where you could see your exact changes as you went. However, I still struggled throughout the tutorial, specifically with the structure of the code, and keeping things separate and organized was incredibly difficult for me. When I struggled, however, there was a box at the bottom of the code making sandbox to show your original code, and the differences between what was the correct coding, which was much more helpful than a simple correction of my code. Below is my original code for the HTML Tutorial, followed by the “website” I created through the tutorial.
<body>
<h1>The Brown Bear</h1>
<div id="introduction">
<h2>About Brown Bears</h2>
<p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
<h3>Species</h3>
<ul>
<li>Arctos</li>
<li>Collarus</li>
<li>Horribilis</li>
<li>Nelsoni (extinct)</li>
</ul>
<h3>Features</h3>
<p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<ol>
<li>Russia</li>
<li>United States</li>
<li>Canada</li>
</ol>
<h3>Countries with Small Brown Bear Populations</h3>
<p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
<img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg" alt="A Brown Bear"/>
<video src="https://content.codecademy.com/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" width="320" height="240" controls>Video not supported</video>
</div>
</body>
Below is the HTML code that has been modified with CSS Language, and below that is the “website” created within the CSS tutorial of CodeAcademy. This tutorial was helpful in the face that I have always loved the aesthetics of websites, which I address further down in the article. CSS language is definitely something I have more experience with, over HTML.
<!DOCTYPE html>
<html>
<head>
<title>Vacation World</title>
<link href='style.css' rel='stylesheet'>
</head>
<body>
<img src='https://content.codecademy.com/courses/freelance-1/unit-2/explorer.jpeg' />
<h1 class='title'>Top Vacation Spots</h1>
<h5>By: Stacy Gray</h5>
<h6>Published: 2 Days Ago</h6>
<p>The world is full of fascinating places. Planning the perfect vacation involves packing up, leaving home, and experiencing something new.</p>
<h2 class='destination'>1. Florence, Italy</h2>
<div class='description'>A city-size shrine to the Renaissance, Florence offers frescoes, sculptures, churches, palaces, and other monuments from the richest cultural flowering the world has known. Names from its dazzling historical past; Dante, Michelangelo, Galileo, Machiavelliare are some of the most resonant of the medieval age. <a href='https://www.nationalgeographic.com/travel/destination/florence' target='_blank'>Learn More</a>.
<h5>Top Attractions</h5>
<ul>
<li>Museums</li>
<li>Bike Tours</li>
<li>Historical Monuments</li>
</ul>
</div>
<h2 class='destination'>2. Beijing, China</h2>
<div class='description'>A city in the midst of reinventing itself and continuing to build on the success of the 2008 Summer Olympics, Beijing is a place of frenzied construction. New housing, new roads, and new sports venues seem to spring up overnight. At the same time, the capital of the Peoples Republic of China remains an epicenter of tradition, with the treasures of nearly 2,000 years as the imperial capital still on view in the famed Forbidden City and in the luxuriant pavilions and gardens of the Summer Palace.
<a href='https://www.nationalgeographic.com/travel/destination/beijing' target='_blank'>Learn More</a>.
<h5>Top Attractions</h5>
<ul>
<li>Biking</li>
<li>Historical Sites</li>
<li>Restaurants and Dining</li>
</ul>
</div>
<h2 class='destination'>3. Seoul, South Korea</h2>
<div class='description'>The Korean capital is a city of contrasts. Fourteenth-century city gates squat in the shadow of 21st-century skyscrapers, while the broad Han River is back-dropped by granite mountains rising in the city center complete with alpine highways speeding around their contours and temples nestling among their crags. Fashionable, gadget-laden youths battle for sidewalk space with fortune-tellers and peddlers, while tiny neighborhoods of traditional cottages contrast with endless ranks of identical apartments.
<a href='https://www.nationalgeographic.com/travel/destination/seoul' target='_blank'>Learn More</a>.
<h5>Top Attractions</h5>
<ul>
<li>Parasailing</li>
<li>Segway Tours</li>
<li>Spas and Resorts</li>
</ul>
</div>
<h2> More Destinations </h2>
<ul>
<li><h4 class='destination'>Jackson Hole, Wyoming</h4></li>
<li><h4 class='destination'>Cape Town, South Africa</h4></li>
<li><h4 class='destination'>La Paz, Bolivia</h4></li>
</ul>
<p>—Best of luck with your travels, and be sure to send pictures and stories. We'd love to hear them!</p>
</body>
</html>
Prior to the assigned Code Academy lessons, I wasn’t entirely familiar with HTML and CSS. I had been acquainted with them once before, when I was around 12 or 13 when I decided I wanted to create a tumblr blog that matched all of my aesthetic requirements. This tumblr blog, however, was a fully copy-pasted HTML template that went immediately into tumblr’s pre-made interface. I later went behind to change the characteristics of small minute details of my blog overall. Looking back, I realize I never did any coding at all, just picking and choosing which attributes to change the colors, font, and height of. It was almost like I was trying to learn backwards, by changing something, previewing the page, seeing what attribute changes, and choosing another line of code and starting all over again until I had the correct attribute to change the color of. Below is an example of my blog, and the aesthetics of it, unfortunately I can no longer log into this blog to see fi I could further change the look and moving parts with my newfound HTML and CSS Knowledge. in the bottom right corner, where the red arrow is, is the link to the original coder’s property. Where they keep the original code and the linked many other blogs she has created the template of code for in the past.
In my career as a historian, I’m truly unsure where I will go. If I continue within academia, and onto a PhD program, I fully expect to be exposed again to HTML and CSS. As I am someone who values aesthetics on projects, and I continue keeping my online persona alive and well, I may have to fiddle around with HTML and CSS for that persona. depending on the projects I choose to complete during my studies, I may have to build and tweak a website for my projects in the future pertinent to my research choice.