The Backend Developer Roadmap: Part 2: Basic Frontend Knowledge vol. 2
In vol. 1 of part 2 of The Backend Developer Roadmap, we went over HTML, it’s history, and an example of a static HTML only webpage. In vol. 2 of part 2, we’re going to go over CSS and add some styling to our webpage. I will follow the same format as vol. 1 where I will provide a brief history of CSS and then we will dive right into some code and how to style using CSS. As always, I will accredit any articles or blogs that helped me along my way. Bibliography will be found at the bottom.
CSS
CSS was developed in 1994 by a Norwegian web developer named Håkon Wium Lie. It was used as a solution to the problem of not being able to apply design and style to an HTML webpage. Once CSS became the official recommendation of the W3C and began making its way into the dominant browsers of the time, an obstacle was faced. Sites would look completely different depending on which browser you were using. It was around this time that the Web Standards Project, or WaSP, created the CSS Action Committee. Members of this committee included Todd Fahrner, John Allsopp, and Eric Meyer. The goal, to create consistency among the browsers when rendering CSS.
It starts with Todd Fahrner and his webpage called “Box Acid Test.” The Box Acid Test, when rendered properly, would contain multiple boxes that would be positioned in a certain way. If the browser could not render the page properly, it would fall apart, and you could begin to see where the errors were while rendering. This greatly helped give browser implementers an example to begin building off of. Then, slowly but surely, CSS became more consistently supported by all browsers.
During the years that CSS had mixed support from different browsers, it began to lose popularity. One of the reasons for this is that there were not enough web pages that had used CSS for design and style. Enter Dave Shea and the CSS Zen Garden. Dave Shea created this Zen Garden to solve this problem by collecting web pages that used CSS for designing and styling, then putting them all in one place to show off. It was like a virtual art show. First of its kind! The first 5 examples within the Zen Garden came from Shea himself and were webpages that contained identical HTML markup but with different CSS stylings. This helped show the capabilities of CSS in a way that had yet to really be done. Once these examples were employed, Shea turned to the community and began having people from all over submit their web pages that had been styled using CSS. Adding to the community art gallery.
After some time, people began using Zen Garden to show their employers and clients the powers of CSS. Their combined efforts resulted in CSS becoming the leading language in designing and styling web pages. The current version is CSS3.
The Project
Before we start styling our webpage, there are some topics I need to cover real quick. These explanations will be fast, but I will provide links to more in-depth articles for those who want to learn more.
Ids & Classes
ids & classes are HTML attributes that can be assigned to elements, and they are super helpful when it comes to styling and adding functionality.
- ids link: https://www.w3schools.com/html/html_id.asp
- classes link: https://www.w3schools.com/html/html_classes.asp
CSS Selectors & Properties
CSS selectors are used to ultimately “select” either a single or group of HTML elements. CSS properties are used to specify what to style on the selected element.
- CSS selectors: https://www.w3schools.com/cssref/css_selectors.asp
- CSS properties: https://www.w3schools.com/cssref/
Divs
The “div” tag is an element in HTML typically used as a container for other elements. If you put some leftover steak in a Tupperware, then put that Tupperware in the fridge, the fridge may be the “body” tag, the Tupperware may be the “div” tag, and the steak may be an “h1” tag.
Flexbox
Flexbox is a CSS3 web layout model. It is used to help place elements around on the webpage. Keep in mind; Flexbox only affects the elements held inside the element it is assigned to. This is where “divs” are very handy. Flexbox uses another layout model under the hood called Box Model. It is important to understand Box Model as it helps you understand why Flexbox is doing what it is doing. I won’t be going into Box Model here very much. But I will leave a link so you can learn about it. There are multiple games that can help you to understand Flexbox.
- Box Model: https://www.w3schools.com/css/css_boxmodel.asp
- Flexbox: https://www.w3schools.com/css/css3_flexbox.asp
- Flexbox Zombies: https://mastery.games/flexboxzombies/
- Flexbox Defense: http://www.flexboxdefense.com/
Alright, now that that’s out of the way, I want to give a quick warning. I did kind of, sort of, change the entire project up once I started styling it. I will, eventually, update the HTML blog post to reflect these changes. But, for now, I’ll leave it so you can all see my thought process throughout this journey. And who knows… Maybe I’ll turn this into an actual project one day… I have ideas. I digress; let’s jump into it.
I started by assigning classes to all of my HTML elements.
<body class="container">
<div class="platform">
<img class="htmlImage" ... />
<img class="downArrow" ... />
<div class="descriptionContainer>
<h1 class="header">...</h1>
<div class="job">
<img class="icons" ... />
<p class="iconDescription>...</p>
</div>
<div class="school>
<img class="icons" ... />
<p class="iconDescription>...</p>
</div>
<div class="distanceAway">
<img class="icons" ... />
<p class="iconDescription>...</p>
</div>
<p class="description">...</p>
</div>
</div>
</body>Next, I began styling the “container” class by assigning Flexbox to it and coloring the web page's background.
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: linear-gradient(#717786, #000000)
}“flex-direction” is used to point which way we want the elements to go. Setting it to “column” means we want the elements to stack from top to bottom. “justify-content” is used to style along the x-axis… usually. Since we have our “flex-direction” set to “column,” “justify-content” will style along the y-axis. “align-items” is the opposite of “justify-content.” Usually styles along the y-axis but here styles along the x-axis. Finally, because I wanted a linear-gradient coloring for the background, I had to use the “background-image” property. There is also a “background-color” property you can use for solid color backgrounds.
Next, I styled the “platform” class.
.platform {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
box-shadow: 0.5rem 0.5rem 0.5rem #000000;
}“width” and “height” style exactly what you think they do, the width and height of whatever element is selected. When given a percentage value, these attributes are sized to the percentage indicated based on the container they are held in. So, imagine we have an image that is inside of a “div.” Now, imagine that the “div” element takes up 50% of the screen. If you assign that image to have a 50% width, it will take up 50% of that “div,” or 25% of the screen.
The “box-shadow” property will place a shadow underneath the element it is assigned to. This helps give the element a nice 3D effect.
A “rem” is a unit of measurement much like a pixel. What is special about a “rem” is that it is responsive to the screen size.
Once the “platform” class has its stylings, I styled the “p” tags with the “description” class.
.description {
color: #8e8e8e;
font-family: "M PLUS Rounded 1c", sans-serif;
font-size: 2.5rem;
}After that, I styled the “iconDescription” class.
.iconDescription {
color: #8e8e8e;
font-family: "M PLUS Rounded 1c", sans-serif;
font-size: 2rem;
}Then I applied a width to the “htmlImage” class.
.htmlImage {
width: 100%;
}I did this because the image was too big for the “platform div.” So, setting it to have a width of 100% meant that it would take up 100% of the “platform div’s” width, shrinking it to fit.
Then I moved onto the “downArrow” class.
.downArrow {
position: absolute;
left: 70rem;
bottom: 9rem;
width: 5%;
}The “position” property allows you to position an element on the screen. Setting it to “absolute” allows you to position relative to its first positioned ancestor element. The “left” and “bottom” properties, in tandem with the “position” property, is what allowed me to position the element where I wanted.
Next, I applied a width to the “descriptionContainer.”
.descriptionContainer {
width: 88%;
}Then I styled the “header” class.
.header {
align-self: flex-start;
color: #686868;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: bold;
font-size: 3rem;
}Next, I styled the “distanceAway” class.
.distanceAway {
height: 5vh;
align-self: flex-start;
display: flex;
align-items: center;
padding-bottom: 4.5%;
border-bottom: 2px solid #e6e4e5;
border-radius: 1%;
}The “padding” is a property of the Box Model. It is the space between the content and a border. However, if there is no border, “padding” can give some space between different elements.
“border-radius” is used to give a curved edge to borders. A “border-radius” of 50% will result in a circle border.
That “vh” that you see in the “height” property is also a unit of measurement. There is also a “vw” unit, and they are measured relative to 1% of the height, or width, viewport.
Now, I styled the “job” and “school” class identically. You can achieve this by putting one selector right after the other, separated by a comma. Like so.
.job,
.school {
height: 5vh;
align-self: flex-start;
display: flex;
align-items: center;
}Finally, I went ahead and styled the “icons” class.
.icons {
width: 4%;
margin-right: 1%;
}And that will do it for our styling. The final result?
Well, that’s it for this post. Thank you for hanging in there with me. The next post will be about JavaScript and adding functionality to our webpage. I hope to see you all next time!
Bibliography
- Hoffman, Jay. “The Rise Of CSS — The History Of The Web.” The History Of The Web, 2017, https://thehistoryoftheweb.com/the-rise-of-css/. Accessed 20 Apr 2021.
- “Web Standards Project: CSS: Members Of The CSS Samurai.” Archive.Webstandards.Org, 1999, https://archive.webstandards.org/css/members.html. Accessed 20 Apr 2021.