The final product that I made :p

What I intend to cover?

This post is aimed at mastering the skills using HTML and CSS. While this might sound vanilla/boring with today's tech stack support, believe mastering plain old HTML/CSS is the way to go for building your skills for frontend.

How I started with Frontend

To start with, I didn't have any inherent motivation for frontend to be honest 😅. I am a part of a college club where we conduct a winter long open source contribution program for new contributors. We had already completed our backend work, while a lot was pending for frontend. We had lot of volunteers for backend and stats-api( yes we made a server endpoint for managing data flow XD), but quite a few for frontend.

Shoutout to rakaar, sahil and ananya for sticking to frontend team 😂!

I was quite determined to make sure that the work is completed, because last year we had a lot of hiccups, and had a tough time managing the logistics. We had ample of time, and some volunteering would certainly help.

This was the motivation for me to get started with basics and start contributing with small tasks.

Tips for starting with frontend

I have curated 5 tips for starting with frontend development. I am not covering the use case of React and other popular frontend frameworks. I intend to cover the mastery/proficiency of basic HTML/CSS, before moving forward to anything.

Start slowly, start simply

I started with around in October, and I managed to complete the final iteration after 2 months. It is difficult to start with a new thing, get used to with the defaults. I was strugling to wrap my mind with options for flex-box in css, trying to make sense which change affects what.

The trick is to slow down, and in fact give yourself some time to come up with the idea. It is totally okay to not get the idea in the first instance, and sometimes you can try out playing with it, to get an idea of how to customise the idea.

For me, I started focussing on the simplest idea possible which I understood and started building from it. I started thinking about the divs to break down the page into multiple parts. Doodling also helps in designing the structure.

Work in iterations

You don't land up with the perfect result; you arrive at it.

For me, I had made around 3 iterations before making the final product. The first one was quite a simple one, and looked fair. It wasn't an eye catching one, simple as possible, more like the skeleton structure.

The second last iteration was quite good. We had a figma design(will talk about it in next part) and it was quite easy to make the structure of the website. Once you have a convincible blue-print, it is easy to follow it.

By now, I had become familiar with a lot of features of HTML/CSS to help me out. I totally understood how to convert the figure into reality!

2nd or 2nd last?

This looked pretty cool, except it was quite plain :3

If you have good visualization, use figma

In case you have good visualization, you can use some digital tools such Adobe Illustrator. Those are proprietary software, so you can use figma.

I personally found figma quite useful, although I still have to master it to create some good UIs. It is not a mandatory ask, you can still use your trusted browser to create some dummy pages before you make the perfect one.

Learn it as you go

This is one of the underrated advice I have ever seen. Most people get bogged down with the idea of mastering a new habit, and often the details stalls you from getting the actual work done.

Fortunately for Software Engineering, most of the beginner level skills can be learnt easily with online resources and blog posts. I started with the basics of HTML, such as div tag(most useful one!), p tags, a tags and so on.

For custom buttons, I didn't knew how to make one. With some googling and experimentation, I learnt the way to go about it. I learnt the concepts of flex-box, when I required all the data-cards should be stacked row wise, with some spacing. Flex-box was made for this, and I can't stress how important is flex-box!

Start learning new things when you require. While making the version 0, you don't need to know everthing.

Your mind knows the things, you need to know when you start small.

Learn more features when you require them, until then delay learning them.

Asking for help, having fun

Final piece of learning, ask for help and have fun!

I asked for help whenever I got stuck. My college mate (xypnox) helped me get unstuck a lot of time, so have a buddy with whom you can brainstorm. It can be learning buddy with whom you are working, or you could ask for help in twitter(peeps here are quite responsive!)

Finally, have fun. I stopped working when I got exhausted. I took a break when it was required, because it provides much required energy, and you arrive back fresh and energetic for the task!

Frontend designing is quite different from engineering. It seemed for me as an art, where everything is appreciable in it's own terms, while engineering has made it easy to qualify the solutions great or not.

Mandatory pic XD

Once you have this idea in mind, you would appreciate the amount of work that you put in learning them.

Until then, Adios!