HTML and CSS are two of the most popular tools used to create front-end designs for websites. As simple as they may seem from the outside looking in, they can prove to be quite a challenge at times, pulling one into a black hole of design thinking.
Learning With Microverse
As a software development student at Microverse software engineering bootcamp, one of the first things you learn is the fundamentals as well as advanced topics relating to HTML and CSS. Prior to my enrolment as a software development student at Microverse, I had worked with HTML for SEO and email newsletters. I had also used HTML and CSS to create websites. While these experiences prepared me in some ways to advance in the HTML and CSS curriculum at Microverse, I found myself learning new things which I had never known before. Like many new endeavours in life, this goes to show that there is always more to learn, even when it comes to the seemingly simple things.
Diving Deeper into HTML and CSS
With Microverse I dove deeper into the ins and outs of different subject areas of HTML and CSS, including flex, grid, and HTML validation. These were some of the core topics which I believe every developer can gain significantly from having an understanding of.
HTML is relatively straightforward. However, it requires understanding of the structure of pages, according to globally recognised standards. Not only can this be useful for search engine optimisation purposes but also for security purposes. Websites such as the W3C Markup Validation Service help to keep one’s code in check, spotting errors and red flags that can easily be avoided. Typically, a HTML page should have the following for starters:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<script src="js/scripts.js"></script>
</body>
</html>
A lot of IDEs make it possible to automate the development of a boilerplate, which can save a lot of time. Visual Studio Code and Atom are just a few examples of such IDEs.
CSS Fun with Flex and Grid
Flex and Grid are similar in that they offer quicker ways to carry out styling and positioning of HTML elements. One of the most significant differences between Flex and Grid lies in the fact that Grid is usually more suitable for styling more complex and larger pages for scale.
Flex can be used on an HTML element by referencing the tag in the CSS file. For example, if one wants to style and position an unordered list using flex, one could reference the class of the list or its container in the CSS file and use a "display:flex;" property to initiate the flex properties. There are different properties that could be included to style and position in this case:
.navigation {
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
}
.pictures {
display:flex;
flex-direction:column;
}Grid can also be used in similar ways to flex. Grid uses tracks to position tags. Items can be placed into grid cells, using tracks. It also has explicit features, allowing for the positioning of items to be defined even if we don’t explicitly define them. One can easily define a page using grid as follows:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
grid-gap: 20px;
}The Punchline
Whether you are building a prototype, sending out a newsletter for your side project, testing out an idea, or trying to automate some processes, understanding HTML and CSS can make it easier and faster to carry out tasks that relate to front-end development and design.
The best way to learn about HTML and CSS is by choosing what learning method works best for you. Everyone has different ways of learning. Personally, I like to learn by doing. Building clones of popular websites using HTML and CSS has helped me a lot to develop my understanding of front-end development. Also, watching how other developers use HTML and CSS to build websites has helped me improve upon my own methods of building websites with HTML and CSS.
Below are some of the resources you may find to be beneficial in your HTML and CSS journey. Happy coding!