WEB AUTHORING / HTML, CSS & Grid? / Term 4, Week 2

960.gs – Grid Reference

This week we resumed our journey at codeacademy, starting the class with the catalogue HTML & CSS. The exercises in this catalogue weren’t so difficult because we have viewed the “Make a Website” exercises.

HTML & CSS

Exercise 1

screen-shot-2016-10-25-at-8-53-28-amscreen-shot-2016-10-25-at-8-54-19-amscreen-shot-2016-10-25-at-8-59-31-am

screen-shot-2016-10-25-at-9-01-13-am
Inserting body content

screen-shot-2016-10-25-at-9-02-59-am

screen-shot-2016-10-25-at-9-03-47-am
Trying out the varying header sizes.

screen-shot-2016-10-25-at-9-04-22-amscreen-shot-2016-10-25-at-9-06-19-am

screen-shot-2016-10-25-at-9-14-56-am
Linking an image using <a> tag with href
screen-shot-2016-10-25-at-9-15-10-am
Nesting a link inside a link. (Linked image that leads to an external link!)
screen-shot-2016-10-25-at-9-19-32-am
Nested link in the flower image.
screen-shot-2016-10-25-at-9-19-40-am
Badge acquired!

 

Exercise 2 

screen-shot-2016-10-25-at-9-24-14-am
Creating your own webpage, starting with three short introductory paragraphs.
screen-shot-2016-10-25-at-9-28-19-am
Nesting a link inside an image
screen-shot-2016-10-25-at-9-29-40-am
Tips to indent the tags to make things easier to read
screen-shot-2016-10-25-at-9-31-13-am
Creating an ordered list (parent tag <ol>, children tag <li>). Identations sort of mark the classification & made things easier to read
screen-shot-2016-10-25-at-9-33-42-am
Enter a caption

screen-shot-2016-10-25-at-9-33-50-am

 

screen-shot-2016-10-25-at-9-35-23-am
Creating an unordered (bulleted) list. Parent tag <ul>, children tag <li>

screen-shot-2016-10-25-at-9-35-33-am

screen-shot-2016-10-25-at-9-39-43-am
Nesting an ordered list inside an unordered list. #Childception
screen-shot-2016-10-25-at-9-40-22-am
How to write a “comment” in HTML that won’t be visible on the webpage.
screen-shot-2016-10-25-at-10-05-46-am
Styling with HTML (super inefficient but doable)

screen-shot-2016-10-25-at-10-06-41-amscreen-shot-2016-10-25-at-10-06-49-am

screen-shot-2016-10-25-at-10-06-51-am
(Helpful reminder)
screen-shot-2016-10-25-at-10-07-32-am
(…Should’ve changed it to green instead of red)

screen-shot-2016-10-25-at-10-08-22-am

screen-shot-2016-10-25-at-10-09-39-am
Instead of typing <h1 style=”color: green; font-size:16px”>, I typed in <h1 style=”color: green” font-size: 32px”>, which ended up doubling the size of the header.

screen-shot-2016-10-25-at-10-09-41-am

screen-shot-2016-10-25-at-10-12-06-am
Font styling with HTML

screen-shot-2016-10-25-at-10-13-12-am

screen-shot-2016-10-25-at-10-13-52-am
Background color
screen-shot-2016-10-25-at-10-14-04-am
Background color can be applied per sections.

(Catalogue to be continued & finished at home)

After our coding practice, the lecture was resumed with an explanation on grid and why & how it is in drawing a flat plan & wireframing a website.

Not too long ago, people were still struggling in the transition of print design to web design – what is a “good” and consistent web design? One of the earliest “good” web design work was done by Massimo Vignelli on the National Park Website, in which he implements the “Unigrid” system. Unigrid acts as a solution to large scale designs & production of many different publications.

Every design solution begins by defining the problem and establishing constraints.

Crate & Barrel ‘s website is also an example of the early, standard webpage displays (Product Display – thumbnails of picture lined up in a few columns an row which is like a gallery of pictures, Inventory Display – similar to a picture gallery but with explanation & details of the product, Text Forms – standard text display with navigation bar on the left and ad column on the right).

The starting / mid-range of a screen size is 1024px (wide) x 768px (tall), but the canvas area of a standard browser (when opened) is 960px x 650px and people strive to create a landing page has all the contents fitted in that area. Too much scrolling is ideal for smartphone / tablet viewing, but on desktop it is more of a bother.

Constraints are the mother of design invention.

In grid, there are units – basic building blocks of a grid (all uniform) and columns – grouping of units that create the visual structure of the page (not necessarily uniform). Though the definition differs when working with grids in print-based media, the application is pretty much the same.

In general, we want to create units in the multiple of 3 and 4. 12 is ideal because it is a multiple of both 3 & 4. 12 units can be made into 3 columns, or 2 columns of 6 units each, or 4 columns with 3 units each, or 6 columns with 2 units each – all these can be mixed and matched while structuring a webpage.

Wireframing Kompas’ landing page with preset grid guides 

 Wireframing Times (wip)

(FINISHED) HTML&CSS: Social Media Page

(I keep changing the image until the very end :’D)

screen-shot-2016-10-27-at-8-56-51-pm
Will definitely visit this exercise again to style it up better.

(Finished) HTML Basics III

screen-shot-2016-10-29-at-8-54-36-pm
Building tables using <table></table>

screen-shot-2016-10-29-at-8-55-02-pm

screen-shot-2016-10-29-at-8-56-21-pm
Adding rows and columns to the table (<tr> row <td> columns)

screen-shot-2016-10-29-at-8-57-18-pm

screen-shot-2016-10-29-at-8-58-21-pm
Adding the table’s header <thead>
screen-shot-2016-10-29-at-8-58-58-pm
Making one row equal 2 columns (column span: 2 columns)

screen-shot-2016-10-29-at-9-03-00-pmscreen-shot-2016-10-29-at-9-03-16-pm

screen-shot-2016-10-29-at-9-04-29-pm

 

screen-shot-2016-10-29-at-9-06-26-pm

screen-shot-2016-10-29-at-9-07-02-pm
Using the tag <span></span> to select a certain word that we’d like to modify.

screen-shot-2016-10-29-at-9-07-52-pm

 

Clickable Photo Page

screen-shot-2016-10-29-at-9-10-19-pmscreen-shot-2016-10-29-at-9-10-48-pmscreen-shot-2016-10-29-at-9-11-16-pmscreen-shot-2016-10-29-at-9-12-15-pmscreen-shot-2016-10-31-at-8-00-41-am

screen-shot-2016-10-31-at-8-12-53-am
Inserting images into table cells & linking them using <a></a> tag.

CSS: An Overview

screen-shot-2016-10-31-at-8-15-40-am

screen-shot-2016-10-31-at-8-16-23-am
Styling individual/collective parts using CSS. Any tags in HTML can be modified using CSS.

screen-shot-2016-10-31-at-8-17-10-amscreen-shot-2016-10-31-at-8-17-43-amscreen-shot-2016-10-31-at-8-19-20-amscreen-shot-2016-10-31-at-8-19-49-amscreen-shot-2016-10-31-at-8-20-14-amscreen-shot-2016-10-31-at-8-21-28-amscreen-shot-2016-10-31-at-8-22-48-amscreen-shot-2016-10-31-at-8-23-14-am

screen-shot-2016-10-31-at-8-24-39-am
Utilising the selector <span> on CSS.

screen-shot-2016-10-31-at-8-25-44-amscreen-shot-2016-10-31-at-8-26-23-amscreen-shot-2016-10-31-at-8-26-33-amscreen-shot-2016-10-31-at-8-28-20-amscreen-shot-2016-10-31-at-8-30-37-amscreen-shot-2016-10-31-at-8-33-48-am

screen-shot-2016-10-31-at-8-34-19-am
Using “em” (relative size).

screen-shot-2016-10-31-at-8-35-41-amscreen-shot-2016-10-31-at-8-36-17-amscreen-shot-2016-10-31-at-8-38-05-amscreen-shot-2016-10-31-at-8-40-18-amscreen-shot-2016-10-31-at-8-41-23-am

screen-shot-2016-10-31-at-8-42-19-am
Changing the style of how link appears (selector: the “a” tag. To remove the underline: “text-decoration:none”)

screen-shot-2016-10-31-at-8-45-01-amscreen-shot-2016-10-31-at-8-45-59-amscreen-shot-2016-10-31-at-8-47-45-amscreen-shot-2016-10-31-at-8-50-19-am

(Finished) CSS Selectors

screen-shot-2016-10-31-at-10-18-48-am
Giving a division to the elements in html.

screen-shot-2016-10-31-at-10-20-02-amscreen-shot-2016-10-31-at-10-21-08-am

screen-shot-2016-10-31-at-10-21-25-am
Styling in CSS with pseudo-class selector (add a colon after the selector, and insert the pseudo-class_selector)

screen-shot-2016-10-31-at-10-21-35-am

screen-shot-2016-10-31-at-10-23-14-am
Changing the color of the link when it is hovered on
screen-shot-2016-10-31-at-10-23-31-am
Changing the color of visited links ( a:visited { color: xxxx } )
screen-shot-2016-10-31-at-10-24-18-am
Styling the first/direct child of the paragraph.

screen-shot-2016-10-31-at-10-24-33-amscreen-shot-2016-10-31-at-10-26-17-amscreen-shot-2016-10-31-at-10-30-29-am

screen-shot-2016-10-31-at-10-31-08-am
Styling a specific element that is nested in another element.
screen-shot-2016-10-31-at-10-33-39-am
Styling with class division
screen-shot-2016-10-31-at-10-35-55-am
Styling with ID division

screen-shot-2016-10-31-at-10-37-43-amscreen-shot-2016-10-31-at-10-41-37-am

screen-shot-2016-10-31-at-10-44-37-am
Creating borders

screen-shot-2016-10-31-at-10-45-34-am

screen-shot-2016-10-31-at-10-48-25-am
Styling the border, making it into dashed lines

screen-shot-2016-10-31-at-10-48-45-am

(Finished) CSS Positioning 

screen-shot-2016-10-31-at-10-50-05-amscreen-shot-2016-10-31-at-10-50-38-amscreen-shot-2016-10-31-at-10-51-32-amscreen-shot-2016-10-31-at-10-52-20-amscreen-shot-2016-10-31-at-10-53-32-amscreen-shot-2016-10-31-at-10-54-13-amscreen-shot-2016-10-31-at-10-54-34-amscreen-shot-2016-10-31-at-10-55-02-amscreen-shot-2016-10-31-at-10-55-28-amscreen-shot-2016-10-31-at-10-56-13-amscreen-shot-2016-10-31-at-10-56-36-amscreen-shot-2016-10-31-at-10-57-21-amscreen-shot-2016-10-31-at-11-05-57-amscreen-shot-2016-10-31-at-11-06-26-amscreen-shot-2016-10-31-at-11-07-05-amscreen-shot-2016-10-31-at-11-07-44-amscreen-shot-2016-10-31-at-11-08-17-amscreen-shot-2016-10-31-at-11-09-09-amscreen-shot-2016-10-31-at-11-10-22-amscreen-shot-2016-10-31-at-11-10-47-amscreen-shot-2016-10-31-at-11-12-08-am

(WIP) Building a Resume 

screen-shot-2016-10-31-at-11-20-58-amscreen-shot-2016-10-31-at-11-21-35-amscreen-shot-2016-10-31-at-11-21-44-amscreen-shot-2016-10-31-at-11-21-53-amscreen-shot-2016-10-31-at-11-22-11-am

screen-shot-2016-10-31-at-11-22-23-am
Still working on this part – I can’t get the placement of the text right.

 

 

Advertisements