Uncategorized

Day 25: More than Code

This blog is focused on my journey of growth as an individual. Currently my posts are centered around web developments because that is where I am spending majority of my time. As stated in my first blog post, I am indeed a multifaceted human being, my world doesn’t revolve around the computer. I make sure to interact with people who come from all walks of life and have interests in various areas. I am physically with my wonderful classmates three days a week and communicating with them seven days a week, that’s a lot of time. It is crucial for me to have balance in my life and not lose myself to anything. To my delight, a long time friend (from Cuba, to Florida, and finally California) informed me that she would be in New York City! I was excited to catch up on the new happenings in life, talk about new goals, and reminisce on shared memories. Before this could happen, I had to get through class. Tonights festivities did not take away from my focus in class. My future self would not welcome any slack on my part (or anyone else’s really).

In today’s class we worked on creating landing pages for our websites. A landing page is exactly that, it is where the user lands when loading a website. Most websites use landing pages a marketing strategy because that is what the user views first, it’s a focal point. When learning how to create landing pages I realized that I needed to make <div> my best friend. I needed to win it over however I could, intelligence, dazzling smile, humor, whatever it took. Luckily, my first plan of action was enough, intelligence. For my landing page all I had to do was put an image inside of a <div>, assign it a class, then customize it from there in CSS, simple enough.

<div class="screen-image">
</div>

The hard part for me was deciding what image I wanted to use as my landing page. When planning the framework of a website, I envision the content that will occupy the space I am essentially creating. What message or feeling do I, as a web developer, want to give the user that is symbiotic with the message and feelings the content will give the user? That may be the most important factor to me when bringing something to life. When giving this assignment in class, I couldn’t just slap any image onto my webpage. I needed the image to have some meaning. I wouldn’t put so much energy into learning something only to put zero energy into its execution. On Pexels, I came across a picture of a young man who seemed about my age and wanted to feature him on my page. After browsing the website a bit more, I found a picture of an older man. The picture of the young man could’ve been a picture of the older man decades prior, vice versa. This made me think of time, aging, and the thought of generations next to one another. As you can probably tell, I wanted them both on my landing page. What was there to stop me? I didn’t want them side by side. What was the solution? A hover media query. To have the two images share a screen, I created a media query that change one picture to the other when you hovered over the landing area.


.screen-image{
background-image: url("../images/youngmed.jpeg");
background-size: cover;
background-position: center;
height: calc(100vh - 60px);
}

.screen-image:hover{
background-image: url("../images/oldmd.jpeg");
background-position: center;
transition: 1s;
}

younger-man-generations

older-man-generations

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s