Important Notes For HTML CSS Beginner Developers

Every time one decides to embark on a new adventure it is inevitable to find obstacles and have a few downfalls along the way. In my case, it was more like one of those people you watch on YouTube getting hurt trying to perform some amazing trick…

I began my journey in Web Development coming from a career unrelated to technology, and as expected I felt overwhelmed by the number of things I needed to learn (elements, attributes, rules, etc). However, in my quest for knowledge, after trying out some online courses and not feeling completely satisfied, I found Microverse, an online school for remote software developers. Their project-based approach allowed me to get better insights into what I was doing wrong.

Aside from learning the basics of HTML and CSS, one of the most useful concepts to learn is the use of grids. Using a grid to layout your website as well as positioning images and content can improve the look and feel of whatever it is you are trying to create. It allows you to align items in visual hierarchies and provide a professional and better user experience for your audience.

How Can You Implement a Grid for Your Project?

As you can see from the image above, many websites and applications rely on the use of grids for their designs. There are several ways you can implement a grid in your project. There are frameworks like Bootstrap and Foundation that do most of the work for you and can be helpful in your learning process. I’ll show a few examples of the ways you can use a grid and as a bonus, I’ll share a simple project inspired in the bootstrap grid system at the end of the article that you can use and change for your purposes.

Thinking in Columns and Rows

When you view the page divided into columns and rows you can achieve a flexible and responsive layout for different devices as well as make your site more maintainable in the long term. The previously mentioned frameworks use a grid system that divides the total width of the screen in 12 equal-sized columns. You might be wondering if this is a strict rule by which everybody is supposed to adhere to and the answer is no! You can customize your grid in any number of columns and rows, the reason why 12 is a common number is due the flexibility and control that you can achieve over your layout with the different possible combinations as described in the next image.

Following this initial view of the screen, we can easily implement different basic layouts for a website.

The Holy Grail Layout can be implemented in the following way: 

· Use 3 rows

· The first row uses 12 columns for the header occupying the whole width of the screen.

· The second row can be divided into 3 columns for navigation, 6 columns for the main content and 3 columns for sidebar/ads for a total of 12.

· The third row uses 12 columns for the footer in the same way as the header.

Responsive Design

One of the key advantages of using a grid for your project is that responsiveness can be more easily implemented. With clever use of media queries, you can specify how many columns an element will take depending on the size of the screen. In the example above, when the page displays on mobile devices, every element occupies 12 columns preventing a poor user experience for your audience in the case they would have to scroll horizontally or zoom in to see the content.

Practical Example

Check out this pen for reference.

I used CSS flex property to create a very simple grid system and recreate the responsive layout in the previous image. As you can see in the code there are different classes for columns indicating the number they occupy on the screen. In the case of MAIN. it has a class of column-9 so it occupies 75% of the screen and ASIDE has a class of column-3 that occupies 25% of the screen. Following the same principles that the Bootstrap framework uses, the columns in each row should always add up to 12 to work properly.

Conclusion 

Learning about the use of grids is certainly worth your time, it’s impossible to cover everything in a single article but here are a few links where you can expand your knowledge: Building Better UI Designs With Layout Grids, Designing grids.

Bonus

As promised, here is the link to a project that you can use to learn or modify to suit your needs, it contains responsive classes for columns at different screen sizes.

P.S. maybe your inner entrepreneur will become inspired and you’ll start your own professional cat photography business!