My Web Development Blog Posts

Technical Blog Part 2

Posted: 18/05/18

What is grid based design?

Grid based design is laying out the content of your webpage onto a grid consisting of columns and rows. There are a number of advantages to working in this way, visually it makes your content easier to read, it can also make it quicker to get a basic layout of your page put together which you can then refine later on.

What's all the hype about responsive webpages?

As technology has evolved the number of ways people access and interact with webpages has also changed. Because it is now common for people to access webpages on mobile devices it has become important to build webpages in a way that they will account for different viewing sizes and resize/rearrange themselves so that they are still well presented no matter what they are being viewed on. When designing a webpage you want to ensure as many users as possible have a good experience on it, this is why there is so much buzz around responsive web design.

What is semantic structure?

Semantic structure means writing your HTML code in a way that conveys meaning to a reader rather than simply presenting as you intend in a web browser. This is useful both for humans reading your code and wanting to understand the intention behind the different elements and also for machines to categorise the different types of information you have put on your page. A consequence of this is that you should use HTML tags to label content correctly regardless of how the browser may present that tag and should then use CSS to ensure the tag content is presented on the page as you would like.

What is CSS specificity?

CSS works by having a series of style rules which "cascade" down the page. The meaning of this is that a style rule earlier in the stylesheet can be overwritten later on if another overlapping style rule is created. Another important factor to consider is the "specificity weight" of a CSS selector. Type, Class, and ID selectors each have a different specificity weight, ascending in that same order. This means if you use an ID selector to apply a style higher up in your CSS sheet, then later on use a Type selector to apply a style that would ordinarily overlap it, the ID selector will still prevail. These weights are also additive, so when you combine selectors their two specificity weights are added together. This means you have to be careful when combining selectors that you do not accidentally break the intended hierarchy of your styles.