Category Archives: Web Design Skills

Shadow Box

WDS Lesson:
Today’s topic looked at Shadow Box. Before students attempted their own, an example of what a shadow box was given and the demo to create one.

A shadow box is a text or image link which can be viewed without redirecting to a new page.
When using an image link, the image must be saved twice; one image acts as a thumbnail to the larger image, therefore one image should be saved as ‘small’ and the other ‘big’
When linking the Shadow Box to HTML, two links must be made; the first is the ‘shadow box’ folder which contains all the information which tells the site to open a link the same page. The second links are the images and/or text.

The shadow box command was then saved onto Codas ‘Exported clips’ for future use. Continue reading Shadow Box

Wabbit GIF

WDS Lesson:
Lesson four introduced Tables and GIF’s , two slightly different topics.
The first half of the lesson, students were shown how to make a simple table in HTML using a table generator. This enabled students to have a ready made table template which allows customisations of colour, font, padding and spacing, all that was needed was to input text content. Once this was achieved students copy and pasted the CSS and HTML coding from the table generator and placed it into Coda. Continue reading Wabbit GIF

Floats & Clears

WDS Lesson:
Third weeks lesson looked at Floats and Clear.
A float is the CSS positioning property. In the lesson students position either or both text and images  left or right of the webpages using the float command.
The clear is where CSS page specifies where elements can be placed, it includes margin edge and whether an element can be placed next to floats or cleared further down, below them. Continue reading Floats & Clears

DIVS

WDS Lesson:
Unlike the first week that focused purely on HTML and the structure of the Index page, this week focused on the CSS, -the “styling” of the Index page. The exercise was far more visual and creative because it allowed students to experiment with colours, font, sizing and properties.  It included customization of almost everything. The lesson also introduced ‘div’ which is an empty container you can use to organise content;

 

Continue reading DIVS

HTML & CSS

WDS Lesson:
Week 1 of Web design skills was an introduction to HTML and CSS; the platform used for web design. The basic structure of HTML and CSS can be used across any application, however the software preference for this module was Mac’s Coda. This lesson was focused only on HTML and covered the basic inputs of commands to build structure using symbols (<) (>), and clearly identifying the structure of a webpage i.e head, title, body, footer.
After creating the  index page, the software Filezilla was used to officially upload it onto the web. Continue reading HTML & CSS