Importance of knowing how to read documentation
In about a week, I made a basic home page using Bootstrap. This was my first time ever using the Bootstrap framework. A CSS framework is basically a CSS template.
After making an HTML page you can link the Bootstrap CSS style sheet like any other style sheet and you will have instant access to hundreds of styles.
To apply a Bootstrap style, you just include the class attribute on a tag and insert the correct class name. The CSS is created for you. Bootstrap was created by the same developers who created Twitter.
What’s the learning curve of Bootstrap? Bootstrap only works if you use the correct class name, on the correct HTML tag. Sounds easy to just choose the correct class name, the problem is that the CSS file has more than 6000 lines of code and you can spend all day looking for a specific class name. Fortunately, Bootstrap provided the documentation of the framework.
Documentation is like the rules and instructions for a project. With documentation, you can know who did what, when, where, and how. Documentation is usually a long document and it keeps everything regarding a project organized and maintains consistency throughout the process of a project.
The Bootstrap documentation is mostly there to help you learn how to use the CSS framework and apply the correct class names. You can either read the documentation or you can read through each line of code and maybe figure out how to use it.
Many developers do not know how to read the documentation. If you know how to read the documentation it will save time and understanding during development. Reading the documentation is not hard once you figure out how it’s organized.
The Bootstrap documentation is one of the best looking and organized documentations. The main framework has three tabs, getting started, CSS, and components. The getting started tab is about downloading and installing Bootstrap. The CSS and components are basically the same thing the difference is that components are CSS plus the needed JavaScript code.
The CSS and components tabs have a section for each element like buttons, headings, panels, forms, navigation, etc. The documentation is easy to follow. For example, if you need to style a button go to the CSS tab because styling a button doesn’t need JavaScript than click on buttons. That is much faster than reading through 6000 lines of code and not knowing how it works.
On my Bootstrap page this process became easier to the point where I didn’t need to look up the documentation. I figured out what classes work on what HTML tags. In the beginning every time I wanted to add something I would look for it on the documentation. I would go back and forth between the code and the documentation.
When beginning to use a framework this is okay but eventually you will want to get to the point where looking at the documentation is not necessary. The best way to learn a documentation is to go back and forth or you can memorize the whole thing.
Why does going back and forth work? For one you are applying what you learn. You read something in the documentation than you write the code and if it doesn’t work you go back and read it again until you understand it. By going back and forth, there is more exposure to the documentation. This is the process I went through. I started by adding an image carousal. I didn’t know how to create it with Bootstrap but after going back and forth, I figured out how to add it and made it work. This was one of the hardest part of the page but now it works flawlessly.
When learning a new framework, it’s a good idea to try new things and different elements because you will make errors but you will learn from them.
With Bootstrap, there are two ways to make a sticky navigation bar, either with CSS or JavaScript. I wanted to make one with JavaScript. The JavaScript version is much harder and I made multiple errors but in the end, it worked the way I wanted it to work. Errors and mistakes are okay, they are an opportunity to learn.
Learning to read the documentation is important but also reading everything is important. Using the same sticky navigation bar example, at first I didn’t know that it needed JavaScript because all I did was look at their example and copied the class name. After going back and reading the whole section I learned that it needed JavaScript.
I also learned what each additional attributes did. Just because something seems simple, it might not be that simple and you will need to go back and read the section again.
If you want to be a front-end developer you will probably be required to read documentation and learn new frameworks, or you will be required to write your own documentation for a client or organization. Frameworks are not a replacement for CSS but serves as a quick way to make a website or an HTML prototype. Once you learn how the documentation is organized, the process for learning the framework is easier. This is the same process used for learning other frameworks and not just Bootstrap.
Links:
Note: All Bootstrap images and screenshots are from getbootstrap.com and were used for educational purposes.