There are many steps to creating a web application. For beginners it can be extremely challenging to get started from scratch. Using the Model View Controller method gives you a basic framework to get started. Once you get going and begin setting up your associations, the logic behind the application can start to feel more natural.
Working on the backend framework felt familiar to me. It took a while to get everything to behave as I wanted but I could always reason through it. Styling was a different story.
Styling using Bootstrap and/or CSS was a bit abstract for me. It took a long time to figure out what the code was actually telling you. Taking bits of code off of Bootstrap and pasting into your own application is not that hard to do, but understanding what it is doing and being able to manipulate the code to fit your application can be a bit challenging.
While styling my app I learned that breaking everything down line by line is a good way to understand what the code is telling you. Let's look at a short example.
<li class="nav-item">
<a class="text-dark nav-link active fs-4 mx-2" href="/users/<%= session["user_id"] %>">My Teams</a>
</li>
When I first look at this I can feel a little overwhelmed. To combat this I break it down into smaller sections. A good method is to change parts of the code and see how it affects your product. Do this from your code editor or from your browser by right clicking and then clicking on inspect.
I like to make changes from the browser because you can be more free to try anything without worrying about breaking your code. You also get to see the changes immediately without refreshing the page.
Back to the example, we see that there is a space between each section of text. This is telling us that each one of those combinations of text is doing something to style our application.
If we look at the first one 'text-dark'. We can delete it and see what happens, or what I like to do is try writing the opposite. So if we write text-light what happens?
The text goes from black to white in this case.
The best part of this is it starts to make you realize that the bootstrap code is not a foreign language. It is trying to write code that is very clear and concise. I could talk through all of these, we have 'nav-link', 'active', 'fs-4', 'mx-2'. The thing is that each step that I would take is the same as I just mentioned with slight variations.
With 'nav-link' I might delete it and see what that does compared to other parts of my code that still have it. Same with 'active'. It shows very basic things that bootstrap is doing and begins to make more sense the more you mess around with it. 'nav-link' makes your text look more like a clickable link we are used to seeing as users, 'active' will make it more bold so the link looks activated.
'fs-4' and 'mx-2' have to do with font size and margins. Again the point being none of this is a foreign language it is all pretty straight forward once you slow down and start looking at it piece by piece.
Another great thing to do is search on the bootstrap site. Search font or margin and then you will be able to understand what the '4' in 'fs-4' is telling you as well as the 'x' and the '2' in 'mx-2'.
Once you get more comfortable doing this you will get more comfortable with CSS and how to manipulate larger sections of your code. For me it is going to make me think more about how to divide up my classes earlier on in the process of building my next application.
Top comments (0)