This is going to be of a rant.
That was the wall I hit.
And that is the wall I needed to knock it down.
And I will knock it down.
The last few days we’ve been working with CSS coding and learned the art of FlexBoxing the webpage. I will have to get this off my chest:
Flexbox is not my to go to coding for web design.
Perhaps I will use it strictly for navigation bar or perhaps an image gallery (although I think that can get complex really, really fast). As far as I understand–this new method of creating a layout of the webpage is new and will have some glitches here and there. Perhaps in time, the developers who designed Flexbox will improve its usability or it may be done away.
However, I am extremely happy with the outcome of my first weekly project that definitely contained the use of Flexbox. I had to create a webpage base on the mockup that the instructors provided for us. While in the middle a fight with flexbox layout, I somehow stumbled and realized I had the images accurately ratio-sized and at the height I was attempting for to replicate the way the mockup was designed. I had to go back and re-read what I just did until I understood what I did. It was a thrilling moment to have when I had the “ah-ah” moment after some serious coding (especially when I did a complete redo of the weekly project!).
I do admit that Flexbox was a fun challenge and it was also great to learn a new way to style a webpage. While I haven’t learned the Grid layout–I think I just may prefer that over the Flexbox
It looks like we’ll be spending some time on learning the rope of HTML and CSS styling. I do admit that I have some prior knowledge of it–but it is a messy one. The best way to put it is that I never learned the etiquette of how to write/code web pages. What’s even worse is that I never really knew that there are some HTML and CSS codes that are phased out or simply do not work in some browsers (whether they are new or old). What are some of the things I used to do? I used to:
- leave a lot of whitespaces in the code file
- multiple class, id and types that are identical to each other (meaning they overlap one another)
- never left comments inside any HTML and CSS files for clear explanation of what I was attempting to do
- never truly understood the concept behind selectors, box models, etc
What I struggled with the most in today’s learning is the CSS Precedence and their general rules. While I knew that CSS reads from top and bottom–but it really means that the most recent code in CSS format generally sets the priority in how the text, images, etc will be displayed on the web browser. Plus, if a selector is more specific than the other similar selector, it will also set precedence. Any CSS applied directly into the HTML file will take precedence over the external CSS file.
Come to think of it–there was another concept that I also struggled with.
I admit. Tables are not my favorite coding, especially when it come to coding them in CSS. It seems that they have their own rules to follow that generally does not applied to the content of the web browser. I hope I made sense as I write this out–this is my brain processing, trying to figure out how this works.
Perhaps reading a few chapters from HTML and CSS: Design and Build Websites written by Jon Duckett clear things up a bit. I highly recommend reading this book. Let’s admit it, every HTML books we read are usually dull and very manual-like. This book is nothing like that. It is full of visuals and clear, concise explanation that actually makes it fun to read through the pages.