Digging Up Ghosts: Returning to HTML and CSS

Ten years is a long time. Flora grows, people change, buildings decay, mountains weather, and memory fades — all things bow to the relentless deluge of time. This is not the case, however, with the foundational bedrock of the web: HTML and CSS. Hypertext Markup Language and Cascading Style Sheets work like Butch and Sundance to allow the user not only to see information, but also to interact with any information a programmer wishes to display. For my second class project with the Flatiron School for Software Development, I was required to build a web application using Sinatra, which is essentially a Ruby gem designed to interact with databases and modify the information through methods contained within Active Record — high concept practice. A programmer could write the most sophisticated application utilizing these abstractions, but they would still need to show it. After toiling with the difficult part of the project as mentioned above, it was time to make my web application look as promising as it ran. I had a brief introduction to both HTML and CSS in college. While I remembered the excitement of being able to write in a language that allowed computers to render visual representations of that language, this was different because I had also written the part that made it function. And yes, it had been ten years.

For my project I wanted to develop a web application that could store users’ vinyl record collections and I wanted it to look like something I would actually use. Through the implementation of a Ruby gem called “corneal,” our project files, directories, HTML landing page, and CSS stylesheets come preloaded as a template. Upon creating a new Corneal project a welcome.erb file is generated and serves as the programmer’s possible landing page, or home page.

Corneal’s welcome.erb page rendered with Shotgun gem.

While incredibly helpful to basically hand the programmer a project structure, the views rendered weren’t exactly what I saw in my mind’s eye for a web application based on old, worn out vinyl. So I had to trawl through all that time to remember that HTML (in very basic terms) works like a text editor, but instead of just typing what you want to show or say you must enclose information you would like to display with an opening tag and a closing tag. For example, in the “Welcome to the Sinatra Template…” block of text, you would enclose it in <p></p> tags, or paragraph tags. When rendered, the <p> tag allows the browser to display the text with single blank lines above and below said text. With this minimal remembrance, I had my work cut out for me. I would need to make both insertions and deletions to get my landing page to look anything like I wanted it to.

Example code of the <p> tag.

The first thing I wanted to do was change the template image at the top of the welcome.erb file. I signed up for an app called Canva, which acts as web-based, lighter version of Photoshop, and created a site logo that I would insert into the code in the Corneal template. In order to do this, I needed to grab my downloaded image and place it in my project directory under the file path /app/public/images/your-image-name.png. Then in the Corneal template code, right after img src= you place the name of your image file.

Code for the template image using the Corneal gem.
Code for implementation of my image.

Once you run the included Ruby gem “shotgun” to set up a local server, you will be able will see your image. Just like magic. There were also some other pieces on the template I wanted to change. I didn’t feel I needed a “sidebar” which is the little gray box on the right side of the template page. This is rendered from the Corneal welcome.erb file as seen below. It’s as simple as just deleting the code.

Corneal template code for sidebar.

Once I deleted the “sidebar” code, I wrote my own code to display my image and also a tagline for the site that could be displayed under the image. This is also where CSS comes in, or rather the styling of the pages you are rendering.

My code for my image and my “tagline.”

Here we have a <div> or division of the HTML document called “container” and within that an image with the HTML <header> tag. Under this, I wrote a <br> or page break so the image could have some breathing room for my site tagline. Then, within the next Corneal provided<div> with a class of “col-md-8 col-md-offset-2,” I created my <div> for my tagline with a class of “site-tagline” and some <h6> tags which is the smallest of the header tags. With the addition of my custom class, it made it possible for me to go into my “stylesheets” directory, located under the same “public” directory where I had inserted my image file, and alter the tagline by calling on its class. I centered the text with the “text-align” attribute and selected a font with the “font-family” attribute.

My site-tagline class called and modified in main.css file.

So now that I had that part finished I had a my own image with centered text below it to give the web app a more minimalist feel.

Image and site tagline for the wax attic.

I still needed to add links to the home page in order for it to direct a user anywhere. There is an excellent front end framework tool called Materialize which allows you to paste one line of code within your layout.erb file. This file renders the look of all pages within your web application.

The Materialize link pasted directly below your given link to the Corneal stylesheets template.

Now I had access Materialize’s powerful, yet simple stylings . I created a <div> with a class of “landing-buttons” with three links to different pages of my app. With Materialzie, the class for these links only requires “btn” and a color that matches one of the names from their color palette.

My “landing-buttons” <div> with styled button links to navigate my web application.

Then in my main.css file I added the class of “landing-buttons” to be able to center these links.

CSS styling of the class “landing-buttons”

Next I went to the main.css file and changed the background color of the website to have a similar black color to my buttons. Below you can see the background-color attribute as having a black square representing the “rgb” values in parentheses.

The body attributes in main.css

Finally, I ran “shotgun” in my terminal to render my prospective landing page. With the help of Materialize and some old ghosts from long ago, I had constructed a web application that not only worked, but also displayed a sleek, modern design that mirrored the functionality of the back end.

Final rendering of the landing page for the wax attic. web app

Ten years may be a long time. But in the almost two months of studying software development, I believe it safe to say digging up some seemingly ancient tricks of yore will be necessary for further success.

Links

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store