Zero to Zenith Static Web Development
This article is to inspire anyone who may want to have a career change and find things difficult. I am using myself as a case study in this write-up. A journey of a thousand miles begins with a step. To make progress in your web development world, you must keep improving day in day out no matter how small the growth may seem to be. Martin Luther King Jr. once said, “We must keep moving; we must keep going. If you can’t fly, run, if you can’t run, walk. If you can’t walk, crawl, but by all means, keep moving!” That is the story of every great programmer in summary. Do not compare your speed with others who have been programming for ages before you; every day, compare yourself to your older self and see if you have improved yourself; that is what I call progress.
In your journey as a programmer through HTML and CSS, you would come across a lot of concepts for making a website look awesome. I would be giving a list of useful HTML and CSS resources in general and then wrap up by focusing on the axes’ concept to lay a foundation for CSS flexible box and CSS grid system.
Diversity In Web Development
From my experience at Microverse and my background, I can confidently tell you it is never too late to start web development as a career. Whatever background you are coming from, you will always have a niche in the web development world. I have had pleasurable experiences from a diverse community here at Microverse and would encourage anyone trying to learn HTML and CSS also to try my method.
I would encourage anyone trying to master HTML and CSS to focus on using CSS flexible box, CSS grid and understand how the interaction of the flexible box and grid systems interplay with the various basic default positioning in HTML. To understand a great deal of positioning, I would recommend you visit W3School and CSS tricks.
Like most people say, positioning elements in CSS could prove difficult most times. Someone jokingly said, and I quote, “the problem of CSS is getting the f..cking element where you want it to be” I should not be using the F-word here, but permit me to say the joke the way it was presented. I had this pain myself positioning elements until I met some two great instructors known as Brad Traversy and Jonas Schmedtmann. I call these two guys magical when breaking hard concepts to make it understandable to a five-year-old. Yes, you heard me well, anybody can become good at web development if they are willing to get these guys materials on Udemy, watch, practice and be patient while learning.
Understanding The Concept of Axis
I would be talking about axes in CSS, thereby laying a foundation for understanding CSS flexible box and CSS grid systems style commands. We can create a full-fledged website with either CSS flexible box or the CSS grid systems, but combining the two concepts makes the design even more exciting.
To understand both flex and grid systems, one would have to know the concept of the axis. Axes signifies direction, allowing us to understand some styling command lines and how the elements behave when we give specific commands.
The Main Axis And The Cross Axis
When talking about CSS’s main-axis, it all boils down to which styling command we are using because this axis changes with certain styling command lines, and if you do not know these axes, you will find it difficult positioning elements in CSS.
By default, in the CSS flexible box, the main-axis is from left to right, and the flex-direction is set to the row-axis. When the command “display: flex” is activated on a container with items, the cross axis is from top to bottom. But the command flex-direction, once it is changed to “column,” reverses the main-axis and cross-axis. In this scenario, the main-axis is from top to bottom, and the cross axis is from left to right. Below is a pictorial explanation of these concepts.
Style command:
.container {
display: flex;
flex-direction: row;
}
By default, flex-direction is the row, but for proper documentation, it would be good to declare the flex-direction.
Styling command:
.container {
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex-direction: row-reverse
}
.container {
display: flex;
flex-direction: column-reverse;
}
In conclusion, understanding axes’ is the necessary foundation for exploring the magical powers of CSS flexible box and the CSS grid systems. To become grounded in HTML and CSS, I would advise one to consult the following resources to gain deeper insights.
1. W3Schools (Free)
2. SoloLearn (Free)
3. Codecademy (Free)
4. MDN Web Docs (Free)
5. freeCodeCamp (Free)
6. Dash by General Assembly
7. Udemy (Paid)
8. Lynda.com (Paid)
9. Treehouse (Paid)
10. CSS Tricks (Free)
