3 Ideas and 6 Steps You Need to Leapfrog Careers Into html/Css

Carlos Anriquez
Feb 7 · 15 min read
Image for post
Image for post

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 the first stage of my learning path. You will also find HTML/CSS vital and ordered learning steps. These are the steps I wish someone would have suggested to me from the very beginning. I offer you ‘Career-change friendly’ ideas that will help you survive through 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.

I developed my career in a big telecom corporation as an Electronics engineer. Passionate about technology, I started as a mobile network RF planning engineer. Then I moved to management positions. I was running big projects in 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.

I took a year off to focus on family and our children. Then I decided to do freelance work in business consultancy until a web project came to my desk. From that moment, curiosity and unconsciousness did their job.

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.

Image for post
Image for post
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 a software developer can I be??

Image for post
Image for post

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?. The first idea, create structure in your learning process.

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 big truth in my view.

Image for post
Image for post

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 build a robust process, which in turn, helps me form 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 critical while rising from the unconscious competence level. There is a significant risk of stalling in your learning when you don’t execute this idea from 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 level of commitment is the right one for you. With your learning process ready, the next steps come by default.

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. When I start a new project, I come back to each foundational concept in my notebook time and again. In this way, I am sure I use all the current documented aspects to apply such an idea. It is a living document. It grows daily and helps me go faster.

A good foundation is everything. It simplifies the way we build new information. 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.

Image for post
Image for post

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:

Image for post
Image for post
w3shcools.com: link

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.

Image for post
Image for post
A Simple code pen example. A PEN by Ryan Young

In the image above, CSS code applies different style properties to the body, <h1>, <p>, and <button> tags (right side). Again, the concept is simple to understand, but the execution is not so smooth. The Odin Project curriculum helps through most of these properties. You will practice in each challenge how they apply and look.

Learning these concepts helped me climb above my original conscious incompetence. Take your time, practice, and feel comfortable 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 each box has on the general page behavior. The block elements take all available width in the viewport. Inline elements render and take only the space required by their content.

Image for post
Image for post
HTML Block vs. Inline Element: a PEN my Mathijs

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.

Image for post
Image for post
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. Nonetheless, it requires practice to get a robust thinking approach. You will need this thinking approach when solving positioning challenges.

Image for post
Image for post
What is the box model? example — shyhowe.com

Positioning

The ‘normal flow’ display refers to the static rendering positioning. Unless CSS specifies something different, everything will flow to the left. Block elements would display on top of each other, always ‘flowing’ to the left. To define other than the standard type of positioning, we can use the CSS properties float, flex, and grid. These properties will help us to organize beautiful layouts. Below there is a summary description for each positioning type in an attempt to make it more clear.

Positioning using float

In theory, float is a display property that enables an element to be “taken” out of the normal page’s render flow. Once it is out, 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. Shockingly, siblings would locate immediately after a floated container. In this way, the expected flow breaks. There is a CSS hack called clear-fix, that will help you to clear the required container fixing the bug. 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.

Image for post
Image for post
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 three alternative options, we can “take” the element away from the normal flow. In ‘relative’ positioning, content elements flow relative to its regular render box. With ‘absolute’ positioning, we fit the content relative to its parent positioned container. In ‘fix’ positioning, elements render relative to the viewport browser. Get this positioning superpower practicing different positioning problems.

Image for post
Image for post
internetishard.com — advanced positioning

Flexbox

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

Flexbox defines the type of display for a container. Once you set the box 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 render in a single or many rows. A ‘column’ main axis direction organizes elements in 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.

Image for post
Image for post
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 superpower for you.

Grid

It is a modern alternative to build simple and complex layouts. Like Flexbox, 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.

Image for post
Image for post
Simple grid definition example — Carlos Anriquez PEN

To get the most of this solution, I recommend taking Wes Bos free Course ‘CSS Grid.’ Wes covers the content in great depth, offering detailed practice. In this step, the grid becomes your next superpower.

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

  • Adding images and media
  • Setting Background and gradients.
  • Creating beautiful forms
  • Creating 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 has a great depth to cover. They are more fun and easy to learn after you mastered steps 1 and 2.

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.

Image for post
Image for post
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. Nonetheless, start with Ethan Marcotte’s article about responsive web design.

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.

Image for post
Image for post
sitepoint.com — Chris Poteet

Leave 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 with becoming fast and consistent.

For comparison purposes, let us build a login button:

Image for post
Image for post
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.

Image for post
Image for post
Bootstrap button — Carlos Anriquez PEN

The more popular the framework, the more “alike” implemented designs are.

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 :

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 going 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 can be challenging for specific designs.

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, the content grows as technology evolves. It is alive.

If you want to become a software developer, I can summarise for you the three 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 additional knowledge. You can learn anything after becoming competent in its concepts and their 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, 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.

Image for post
Image for post

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 now proud of my “banging my head against the wall” and frustration moments. Getting here is a small but essential step in my journey, and you can do it too — no questions about that.

The Startup

Medium's largest active publication, followed by +720K people. Follow to join our community.

Carlos Anriquez

Written by

Full Stack Developer. Electronics Engineering. GM MBA

The Startup

Medium's largest active publication, followed by +720K people. Follow to join our community.

Carlos Anriquez

Written by

Full Stack Developer. Electronics Engineering. GM MBA

The Startup

Medium's largest active publication, followed by +720K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store