My learning from making twitter layout design (as a beginner)

In this blog I am sharing the learning that I got and the mistakes (a hell lot of them) I committed while building up the twitter layout as a beginner.

As a novice in web development , building up the twitter layout without any frameworks or library like bootstrap and using pure CSS and HTML seemed to be little difficult at first glance for me.I was freshly introduced to the concepts of grids and flex and basics of layout design and different styling methods in CSS. Building up the twitter layout was a perfect choice to implement my learning into action.

For people who are James bond in web development , this will obviously be cake work , a work of perhaps few minutes but i was newbie out here :(

The basic layout was made with 3 div which were put to three columns using flex. After getting the layout ready , the next step was to complete each first individually i.e the sidebar(1st column) followed by the center column and third column.

I literally spend half day figuring out how to get those icons and placement as in the original twitter page (noob level :D), and after little struggle and googling i came through this website called font awesome! “https://fontawesome.com/icons?d=gallery&p=2” where we can directly pick up icons and embed in our HTML page. (pretty smooth!) , after completing the sidebar the next task was building up the wall for which i gain used flex to build two divisions in row (the upper part and lower part ) after styling the wall finally it was time for the last, flex again came to rescue(pretty much reliable tool!) the search bar was made using the input component and the lower part was completed using sections in a single div and then inserting cards in each one of them ( for small images).

After applying lots of styling (trial and error), and some struggle I finally had a page which looked quite similar with the original one. I was happy to see the final output and patted myself ( yes! i did it).But this happiness was short lived until I , visited my code base!

What a mess I , had created , a large code base (which looked less like a code base more like random jargons) , messy codes, added a large CSS file.

Following are the mistakes I had commited and i am working on them in my current project.

1. No proper naming: Random naming as per my convenience and in the end I was confused myself with the names i have given. So, a proper naming convention is very necessary to followed while naming your variables. This is a helpful site which speaks about the BEM method “https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/”
2. Using too many classes: Using too many classes , which does the same thing for each divison does nothing but stretches your HTML file unecessarily, so always look for making common classes.
3. I learned about something called SASS or SCSS or CSS preprocessors , which definitely makes CSS easier to use.Will try to implement SASS in my next few projects