Oh, the Udacity!
Hello everyone! I have just completed a really interesting Udacity course on CSS Frameworks & Responsive Layouts and wanted to share with you, some of things I have learned.
Grid based design is a quick, easy & flexible way to create a responsive web site using a 12-column grid. Each row of the grid consists of 12 columns and each of these columns are of equal width. Each HTML element contained in the grid is assigned a number of columns to occupy and their width is then calculated using a percentage value (e.g. 3 columns = 25%). As there are 12 columns to each row, and 12 is a number that can easily be divided by 2, 3, 4, 6 and 12, there are a wide range of options for how each row can be layed out. Grid based design is highly effective for responsive layouts because regardless of the size of the screen, 25% is still 25%.
Responsive web design is particularly important now more than ever, simply because of the number of different screen sizes people are using to surf the web. A well designed web page should look great on any device and to do this, it needs to recognise the size of the screen it is being viewed on and adjust the content size and layout accordingly; this is responsive web-design.
Semantic structure is laying out your HTML in a fashion that reinforces the information on the page, rather than merely to define its presentation or look. A good example of this would be headings on a page, for which there are 6 heading tags (h1-h6) which run in decreasing order of size and importance.
h1- use for the main header
h2- use for section headers
h3- use for section sub-headers
and so on and so forth.Cheers,
