Great CSS Resources for Building Out Your First Web App
It’s almost the end of another month and what is personally my favorite week of coding Bootcamp, Project Week. This is what I’ve been waiting for; getting the chance to build a Web App from the ground up using all the knowledge I’ve accumulated thus far. It’s an intimidating feat for any newcomer to programming but it’s also the pure excitement and motivation to see the finished product of something you pushed to create.
Once the project pairs were given out, the journey began. My partner and I wasted no time and began to tackle each step to forging our Web App. We began with an idea and worked from there. Sketching out our Domain Model and wireframing several pages with input controls, containers, and components of what we had envisioned.
As I had already been accustomed to using Exaclidraw, we had used this whiteboard tool to map out some pages. This is before I found out about Balsamiq or Justinmind as they are by far the better choices when it comes to wireframing. Nonetheless, it was done and we moved on to our next step: The creation of the template of our app that Rails generously provides withrails new <project> .
Continuing, we build out our routes and their respective controllers, along with the class models and view pages. We finish most of the planned functionality, seeing our view pages with only HTML getting to us, and just 4 days remaining till the deadline, we decide to start on some styling. This is where my hatred and love began for CSS.
Even after a great lecture on CSS by one of the instructors, I still felt my knowledge of it to be lacking. We tested the waters and started to target some HTML elements within the stylesheet and were able to change/add simple features such as color and borders. But all I had in my mind was how I envisioned the Web App to be, however, a deep void was all there was in the space between that and our current point. The confidence that ignited us slowly dimmed as it became more apparent we needed some help if we were to tackle the external style sheets. But like everything in programming, it’s best to take it one step at a time and it’s calming to know there are always resources at your disposal. In comes the holy grail of CSS frameworks that is Bootstrap.
Bootstrap granted us the power of all their responsive content and component templates. It was great to be able to see a component we liked on their documentation and quickly implement it into our own App. Almost too good to be true. In a sense, it was mostly because we had to transition all of the functionality with our current code to fit the template of the Bootstrap components. It took us a staggering amount of time to get it done and we struggled especially with getting our form_for methods to work with Bootstrap. Fortunately, through research, we found a neat little gem called bootstrap_form . This gem made it really simple to integrate Bootstrap style forms into our Rails App. All we had to do to implement it was to add bootstrap to the beginning of any form we were using just like this:
<%= bootstrap_form_for @user do |f| %>The gem also contains a few other neat form helpers that can be found in its documentation. Now Bootstrap is great and all but I really have to say the most useful resource I’ve found as a student building out their first website has to be CSS Grid Generator. This is the part where I sincerely enjoyed working with styling HTML.
I personally love this app because it offers a solution to build a structure for your HTML elements and makes targeting those elements in CSS much simpler. In short, you draw out your divs in the app similar to how you wireframed your page blueprint. Once you’re finished with that, ask the app for some code and ye shall receive. It generates a CSS grid for you which creates a basic layout of your page. This grid includes the HTML and CSS code necessary to structure out your page exactly how you drew it on the map. Now of course you still have to do the heavy lifting and code your UI elements inside them but now your page will have a core structure. This is key and is what made CSS much more enjoyable for me because not only do I have a structure for my UI elements, I can easily target them in my external style sheet with precision.
Let’s say I had a Bootstrap card-container that I wanted to place inside .div5 from the Grid and then I had an h3 tag in there. If I wanted to target that specific header it would be only a matter of reading the parent classes upward from that tag to form your CSS selector. It would look like this:
.div5 .card-container h3 {}You will most likely come across more complex and nested elements but it will still have a solid structure provided by the Grid. Although this app is great, Grid is capable of much more and as the app says, it only touches a fraction of what it’s capable of. I intend to dive deeper into the realms of CSS Grid but for now, I can rely on CSS Grid Generator to be my savior.
On one last note, I will touch on the topic of inline styling and why I’ve only talked about working with external style sheets.
Try to avoid inline styling when you can or better yet, avoid it altogether. There will come a point where you will forget that inline styling you coded in your app and you’ll ponder about why your view page did a backflip on its head.
These are the resources I found most helpful in building out my first Web App, especially with tackling the beginning struggles of learning and working with CSS.
