A Beginner's Guide to Making a Career As an HTML/CSS Developer

Change is hard, and as a goal, software development is not easy at all. After working 17 years in Telecoms, I am now in the middle of a career change. 

At the end of November 2019, I started my 8-month journey to become a full-stack software developer. This article builds my experience to this date in the online school Microverse.

In the next paragraphs, I describe three main ideas that help me succeed in my learning’s path first stage. You will also find HTML/CSS vital and ordered learning steps. These are the steps I wish someone would have proposed to from the beginning. I know now, these are ‘career change friendly’ ideas and steps that will help you survive hours of frustration. 

I don’t pretend to be exhaustive in the technical details included here. My aim is to give a brief description and pointers where you can find the full content. I want to share this information, in case it helps somebody else going through a similar path.

The beginning

I developed my career in a big telecom corporation as an Electronics engineer. I got into this field because of my passion about technology. I started as mobile networks RF planing engineer. Then I moved to management positions. I was running big projects on multicultural environments and managing big teams. I was far from technology. After 17 years, I took the chance and left my previous professional life. Almost without noticing it, I was circling back to making technology stuff with my hands. 

It all started when after a year focusing on family and children, I decided to do freelance work in business consultancy. A web project came to my desk, and from there, curiosity did its job. 

Learning something new

When we learn a new skill, we go through a series of steps that help us move forward. In the beginning, we run out of pure motivation while not paying attention to every issue in front of us. Sometimes we find ourselves inside a proper mess. Then we say: “what was I thinking about when I went into this project …?”. And that is ok. Motivation is doing its job, bringing emotion into the equation, and promoting change.

Conscious Competence Ladder, by Melanie Richens, based on Gordon Training International work — 1970. (ukcpd.net)

We go through the Conscious Competence Ladder when learning a new skill. In the first stage or “unconscious incompetence” level, we realize we don’t have a clue. We don’t even know what we do not know, but we are going to make it work for us. So, we push a little harder.

Soon you start studying the subject. You are still having fun, and you become aware of what you do not know. You then reach for help as you arrive at the “conscious incompetence” level. At this stage, I enrolled in FreeCodeCamp. I took a couple of Udemy courses, and I was able to deliver an acceptable product in line with customer needs. This successful delivery showed me that although I enjoyed the project, I did not know what I was doing.

Moreover, I was not able to replicate any web design from scratch. This realization showed me two possible ways. Collect my profits and fold, or go bold, becoming a software developer. I chose to start a career change at 44 years old. In the end, I circled back to technology. It was a great surprise. My fundamental question was, how good of a software developer can I be?

How does it look when you are competent in HTML/CSS?

In the journey to becoming a great full-stack software developer, the first step is to master HTML/CSS. You need to evolve from conscious incompetence to a conscious competence level. Once aware and competent, you can build stuff. You create any front-end web design to a detailed specification. You can deliver quality while achieving deadlines. Most of the vital web design implementation issues look solvable to you. You keep learning in every step of your progress. You continue getting help from stack-overflow and google to find solutions. Still, you can solve the structural positioning and responsiveness problems by yourself. You will excel at using all the tools available to you (text editors, Git, Github, google). So, how do we get there?. First idea, create structure in your learning process.

Idea 1: Get an excellent learning process in place

In my humble experience, this idea applies to anything. In learning new stuff, what works for me -and many others- is to have a great support structure and process. We need to form the right habits to become the software developers we want to be. As James Clear explains in his book Atomic Habits, “you don’t rise to the level of your goals. You fall to the level of your systems”, and that my friend is a significant truth in my view.

And so, it does not matter how great your goals are. If you don’t do what the best do, and you don’t put in place high work ethics and processes, you won’t get far. It would be better if you have structure, discipline, and grit. Microverse helps me building a robust process that I repeat day in and day out. This process helps forming my consistent developer habits.

A good process and support system are fundamental, as motivation helps you get far. But, when you feel like an imposter, it is your processes and support systems that come to the rescue. This idea is key to step up from the unconscious competence level. There is a big risk of stalling in your learning, when you don’t execute this idea at the start.

“At some point it comes down to who can handle the boredom of training every day, doing the same lifts over and over and over.” quote from the book Atomic Habits by James Clear.

If you agree with having a great learning process, signup in the Odin Project Community. The OP community curates excellent content that helps you moving ahead step by step. If you want to have a more structured online school, I would recommend having a look at microverse.org. Find out if the program commitment is the right one for you. With your learning process ready, the next steps come by default.

Idea 2: While learning, keep a journal

I keep an electronic notebook in my learning process. I record the most important things that I have learned in every unit of study. Also, I open a new notebook section for every new project. I document step by step what decisions I’ve made to solve critical issues. Journaling is a central learning idea in my experience.

Every time I create a new notebook record, I am helping my future self. And it is true. Every project I start, I would come back time and time again to each foundational concept in my notes book. In this way, I am sure I use all the current documented aspects for applying such a concept. It is a living document. It grows daily and helps me go faster. 

Idea 3: Build a Strong foundational knowledge for HTML/CSS

A good foundation is everything. It simplifies the way we build additional information. The Steps 1, 2 in the next section are what I call HTML/CSS foundational knowledge. Get to the conscious competence level for these steps. Then you go ahead and enjoy learning the rest of the concepts.

Step 1: Get to know HTML and CSS

Start by learning the basic components of HTML5. Understand semantics, divisions <div>,<spans>, text-based elements and how to create hyperlinks. The beauty of HTML resides in simplicity. We use HTML code to build the blocks of our page. 

Any page you want to build needs to have the following basic building blocks:

First there are the tags that identify the HTML page start <html></html> and end. Tags are keywords that help your browser, find the content to render. Tags must have an opening and a closing mark. As in the image, the HTML tag contains the header tag and the body tag. In the example, we could see several other tags. These tags define how the browser renders content inside them. So that is it. We need to learn how to use those tags, and we are ready to go. Yes, it is that simple, but not that easy.

Get to know CSS

The second essential part of every webpage is the styling code. CSS stands for Cascading Style Sheets. It helps to manage the layout and display of any HTML tag element. You specify the way CSS controls the design using a plain text file (.css). You then define each element’s tag and describe actual values for a set of properties. These properties create a concrete styling action over each HTML tag described.

In the example above, Ryan Young uses codepen.io site to show an HTML (left) and CSS (right) simple application. You can see in the right column the CSS code applying different style properties to the body, <h1>, <p>, and <button> tags. Again, the concept is simple to understand, but the execution is not easy. The Odin Project curriculum helps through most of these properties. You will practice in each challenge how they apply and look.

Step 2: Understand Display, Box Model, Positioning, Floats, Flexbox, and Grid, in that order.

Learning these concepts helped me claim above my original conscious incompetence. Take your time, practice, and feel conformable with these concepts. When you see a layout challenge, and you see a solution, then you are at the conscious competence level. You want to get there.

Display

The display property defines whether elements will display as block or inline elements. It will determine what kind of effect has each element on the general page behavior. As you can see in the example below by Matthijs, block elements take all available width in the viewport. Inline elements render and take only the space required by their content.

Box model

The box model is simple and powerful. This model assists you throughout your initial steps and has to become second nature to you. My recipe to get to second nature is to read it 2 or 3 times and practice 10x more times.

Internetishard.com — box model

The model includes a set of concentric boxes around the content. We can adjust these boxes in size, color, pattern, to name a few. In this way, they allow you to organize content across the viewport display. We do this customization using CSS. The Box model is a simple concept to grasp. None the less it requires practice to get a robust thinking approach. You will need this thinking approach when solving positioning challenges.

Positioning

The normal flow display refers to the static rendering positioning. In the static positioning, we have at our disposal, every property within the box model to use. These include, among others adjusting borders, padding, margins. The static display also includes float and Flexbox. Below there is a summary description of each positioning type in an attempt to make it more clear.

Positioning using float

In theory, a float is a display property that enables an element to be “taken” out of the normal page’s render flow. Once it is out of the flow, it renders to the left or the right of the parent element. Its original design intention was to wrap content around images. We use it also to create layouts and positioning solutions. A bug occurs when floated elements get render before static sibling elements. Siblings would render immediately after a floated container. In this way, the intentional normal flow breaks. There is a CSS hack called clear-fix, that will help you to clear the required container. In this way, we avoid this side effect. Take full attention to learn the clear-fix hack. This great css-tricks.com article, shows all about clear-fix solution evolution.

Float has helped original web developers to create great layout solutions. You must learn and practice how to use it. Today, you have better options to achieve the same positioning result. Still, go through the process of using float solution in a couple of projects, at least. Lesson 5 in the learn to code HTML & CSS course, has excellent content to review about this property. Sometimes a little float and clear-fix would do the trick to save the day.

positioning content — learn to code HTML/CSS PEN

Advanced positioning

Take your time and review different sources about positioning. This lesson was crucial for me and is the one I rely upon over and over when thinking about layout problems.

Advanced positioning goes beyond the normal static positioning. It allows placing the contents in the viewport in a relative, absolute and fixed fashion. With these 3 alternative options, we can “take” the element away from the normal flow. In relative positioning, we can place elements relative to its regular render box. With absolute positioning, we fit the content relative to its parent positioned container. In fix positioning, we implement elements relative to the viewport browser. These 3 alternative positioning ways, enable extra options to build great solutions. Get this super power practicing different positioning problems.

internetishard.com — advanced positioning

Flexbox

Flexbox is a modern way to solve most of the layout challenges. It is best to learn and practiced Flexbox in this step. Make sure you learn and practice float and the advanced positioning options before.

Flexbox defines the type of display for a container. Once you define the container as flex, you have the freedom to organize inside items. You use specific properties to adjust each item to your required need. A flex container has a main default axis direction defined as “row.” Per default, all items inside the container render in a single or many rows. A flex with a “column” main axis direction organizes all its elements in single or multiple columns. In the flex container you can define the order and also the size (width or height) each item could take. Flexbox would solve, for each item, how it uses the available space.

internetishard.com — flexbox

For a great material to learn about this topic, I recommend the Wes Bos course — What the Flex. The course is free with videos. You will learn, practice, and get comfortable with this great tool. After this course, Flexbox becomes a new super for you.

Grid

It is a modern alternative to build simple and complex layouts. Also, with a grid, you can define a container and organize content inside. By using rows and columns, we create specific cells or areas. We usually first draw the grid on paper, and then we define the required grid specifications. Grid offers significant flexibility to fit the information in rows, columns, and cells. It gives full control of the horizontal and vertical axis. We can also define grid areas. Id and class specification is enough to place the HTML content in the identified areas.

Simple grid definition example — Carlos Anriquez PEN

Grid is a reliable content positioning solution with lots of flexibility. It requires specific practice to get aware of all its implementation possibilities. To get the most of this solution, I recommend taking Web Bos free Course ‘CSS Grid’. Wes covers the content in great depth, offering detailed practice. In this step, the grid becomes your next superpower.

Step 3: Understand more HTML elements

After you have learned the key concepts in steps 1 and 2, you can in a more relaxed way, got through the following points:

• Adding images and media
• Setting Background and gradients.
• Creating beautiful formsCreating sorted and unsorted lists.

The list above includes some of the main topics you should cover at this stage. All this content gets delivered in the Odin Project. These concepts are essential and each of them have a great depth to cover. They are more fun and easy to learn after you mastered steps 1 and 2.

Step 4: Understand responsiveness.

A responsive web design should be able to adapt and adjust its content to every required screen size. After working the markup code (HTML code), CSS styling is in charge of make it respond and shine on every screen size.

Responsive design — belatrixf.com — Alberto Castelao

To achieve responsiveness, we have at our disposal the popular ‘media queries’. W3C defined media queries inside the CSS3 specification. Media queries are segments of CSS code that apply to specific screen sizes. We will specify not only screen type but also the printing layout’s styling. There is an excellent content in The Odin Project about media queries. None the less, start with Ethan Marcotte’s article about responsive web design.

Step 5: Go mobile-first

Take the time and explore the “mobile-first” design concept. This concept considers the smallest viewport sizes first when building our responsive solution. Chris Poteet goes into the mobile-first framework in his great Sitepoint.com article. You want to work on the full implementation (markup and CSS) from a mobile standpoint first. In my experience, going in this way ensures you solve problems from the bottom up. Granted, you will make early significant engineering efforts optimizing your tag elements. But this avoids going against the flow later while trying to fit an elephant in a shoe as you go mobile-last. Practice the mobile-last and mobile-first approach. Then decide which one is more comfortable and efficient for you. For me, it was a simple choice after attempting both.

sitepoint.com — Chris PoteetStep 6: Get to know CSS frameworks.

Let CSS framework concepts for the end.

Frameworks are a collection of CSS pre-coded properties organized in generic classes. You can link them to your HTML page and then apply them to your HTML tags. With frameworks, you speed-up and create great layout designs. It helps becoming fast and consistent.

For comparison purposes, let us build a login button:

Plain vanilla button — Carlos Anriquez PEN

In the code above, we use an HTML tag <button>, and we use some CSS to give the button style.

Adding a couple of classes to your HTML tag, we get similar results in the example below. (the example does not show how to include the style-sheet <link> required to work with bootstrap). 

Bootstrap button — Carlos Anriquez PEN

The more popular the framework, the more “alike” implemented designs are. This popularity, in my view, is one of the major drawbacks when trying to be ‘different’ using CSS frameworks.

There are many great CSS frameworks, and in all honesty, I have tried and worked so far with a couple of them. If you talk about CSS frameworks, we cannot ignore these big ones :

• Bootstrap
• Foundation
• Materialize

In the Odin Project, you learn about the first two. As we go along with the HTML/CSS technology, many others have appeared. Read this article by Ankush Thakur. It shows several note-wordy options like Bulma, Ulkit, and Semantic, among others.

When you have a conscious awareness of steps 1 to 4, HTML/CSS look easy for you. You are then able to work with any framework. A solid foundation helps when you need to change the native framework’s classes. You want this superpower too.

I don’t recommend is to go backward and start learning a CSS framework from the get-go. This approach will, in my experience, bring you pain. You will get too tied up to a framework. Not knowing what is under the hood is challenging while designing ideas at the early stages.

Conclusion

You have reached this far. Yep, you’ll make it!

Still, HTML and CSS are not concepts and ideas that you can learn only from a book or course. You cannot absorb by heart every tag, property, and the rest. Even if you do, it will not make sense. The content is too extensive and in-depth, and although it is simple, it is not easy. Also, content grows as technology evolves. It is alive.

If you want to become a software developer, I can summarise for you the 3 main ideas that will assist you:

Idea 1: Get an excellent process in place to help your learning activities. Learn and apply day in and day out a robust work ethics process.

Idea 2: Build a Strong foundational knowledge for HTML/CSS. Steps 1 to 4 are the base you need to build the rest of the knowledge. You can learn anything after becoming consciously aware of concepts and applications.

Idea 3: While learning, keep a journal. A journal will help to build momentum and speed while you work hard on steps 1 through 6.

Some tips to remember:

Practice through projects. If you commit to a formal program like The Odin Project, you will practice many projects. In the beginning, projects like cloning google.com and youtube.com pages are tough but fun.

Be resilient: As you code, pretty quick, you will start failing. You will make mistake after mistake. That is all good. Right then and there is when you start your learning journey. When you reach that frustration point, take it as a signal. In those moments, stand up, drink water, take a walk, and come back to it. With practice, you will get to say, I did it!

Pretty obvious, right?. Don’t give up on your quest until you get to the conscious awareness level for all recommended steps.

Finally, in my journey, and after 115 documented hours of reading, studying, and doing projects, I got it!. I was able to submit and approve my HTML/CSS capstone project at Microverse. And yes, it is incredible for me. I am proud of my “banging my head against the wall” moments, as well as my little achievements challenge after challenge. Getting here is a small but important step in my journey, and you can do it too — no questions about that.

Previously published at https://medium.com/swlh/3-ideas-and-6-steps-you-need-to-leapfrog-careers-into-html-css-ba9db2a4588b?_branch_match_id=670411185610532277