My motivation to become a frontend engineer stemmed from my inability to draw. I always admired people that could throw colors on a blank piece of paper and make something beautiful, because nothing about colors on my blank papers looked good. I can actually say I envied them; I loved drawing but drawing didn't love me so it was a very toxic relationship from the start. That, coupled with quotes like Believe in yourself and You can do anything you set your mind to, really gave me the hope that one day I'd be able to draw a circle.

After a while and various low grades in art classes (I only excelled in Calligraphy), I accepted that the only way to channel my artistic side was to watch other people draw. So you can imagine my excitement when I watched my first tutorial on "How to create a web page" and saw someone use code to draw on a blank page. I was IMMEDIATELY drawn in.

The Zero

I started out with changing fonts, font colors, sizes and alignment. Very trivial yet very life changing for me. I couldn't wait for buttons and nav bars and interactions and all the good stuff.

But the thing about learning as a beginner is that we always want to start no matter what. We rarely start by learning the founding principles before going all in, which is a trait I have learned to do away with whenever I'm learning something new. If you rush, you definitely will crash.

My earliest road block easily cropped up because I had no knowledge on using display models. All I'd done at the time was learn how to create a web page and display text on it. I didn't even know the differences in HTML tags and when each is used. I just wanted to display these two divs in the same line and at either side of the page.

What came to mind

My initial resolve was to use margin pixels to get the lower div on the same line with the top div and space it out i.e.

margin-top: -20px, margin-left: 200px (Yuck!)

But immediately I typed that, I knew it was poor implementation. There was no way developers were creating these robust designs with so much hard work. So I made a quick google search and found the MDN Web Docs which hit me with so much information that I wondered how I'd be able to learn all of it.

The quick learning I'd previously done showed me what could be done but not why or how that was possible. If I'd started by learning about HTML tags and how they respond to styling, then I'd know that the span tag is used to display in-line elements which I could float on either side of the page to achieve my want before introducing any display model.

What I learned

That road block was the building block for my appreciation of documentations. All your answers are in there if you're willing to be patient enough to read and practice. With time, I learned how to plan for a page's design through:

1. The HTML tags structure and how they are used
2. Robustness of classes created
3. Individuality of elements using IDs
4. Consistency of element design by styling tags
5. Naming conventions.

Planning creates a great foundation that eases the styling of various pages and the scalability of designs as well as the ability to create a design language to be followed by other engineers.

Ultimate CSS Debugger ~ border: 1px solid red;

The Style-Hero

As a style hero, my top non-functional requirements before styling are:

1. Scalability of the design
2. Reusability of the design

I really enjoy styling from scratch and it's probably due to my drawing ego and love of maths. It's like piecing together a puzzle that depends on how well you pieced the previous puzzle.

But in this day and age, time is a huge cost; which implores us to outsource as much of the styling as possible in order to ship products faster. This will introduce you to the styling libraries and frameworks that do a lot of the heavy lifting, though in my opinion a Zero should not start here. You'll spend a lot of your time mixing and matching styles and components without the principles of CSS. Which means that you'll just be happy that it works and not why it works.

What I've learned

1. The CSS grid is unmatched and is a foundation that should never be skipped. Flex-box model is important but the Grid model is a must.
2. CSS frameworks and libraries are good for you. Some designs require custom CSS but a lot of the boilerplate styles should be handled for you.
3. Learn how to debug CSS using the inspection tools. This will save you a lot of time and improve your styling process.
4. A web design is not complete unless it's responsive. It should be criminal to ship unresponsive designs.
5. Test design changes in design prototypes, not code.
6. Use wireframes to map out the elements that are creating the design. This helps you curve out relationships and dependencies.

For me it was very easy to decide on a career in frontend development, but I did start out by learning the development aspects as a whole i.e frontend, backend, documentation, deployment and maintenance.

More than 4 years ago, styling through code was alien to me but right now I can't imagine myself doing anything else.

My Advice

1. The secret to enjoying web design is understanding it's grounding principles. A poor HTML structure will have you writing CSS for thrice as long (and it won't be scalable).
2. Styling is not meant to be difficult so if you're having trouble, take time off to read through documentations and go through styling templates. These will teach you to achieve more with less, as well as train you on envisioning how to achieve the designs before any typing.
3. Once you look at a design, you should be able to immediately break it down in terms of the CSS attributes required to make it look that way. That helps you cognitively train and prove if your theory is correct.
4. Learning is not possible without practice. Involve yourself in the material you're studying in order to know when to use it. Most CSS concepts make sense practically.

And that's it for this read. Cheers!

Thank you to all Developers that are avid Documenters.