Coolab

My adventure through the web world

[coolab-vanessa]

Websites

In this journey I have been looking for websites to develop and improve my knowledge about web development. There are a few websites that I find it interesting and most of them were mentioned by my teacher. The MDN (Mozilla Developer Network) Web Docs is a learning platform and there are a lot of materials about HTML, CSS and JavaScript. W3Schools is another web developer site in which they have explanations about tools and have an online editor where we can try the code ourselves.  Codeacademy is also a teaching platform that has free and paid courses.

[coolab-vanessa]

CSS Links

In the CSS document it is possible to style links. In the post wordpress, I mentioned I added an effect to the links in the navigation menu and in the footer. These effects are actually called link states and there are 5 different ones. Unvisited is the default state and it means it hasn’t been activated or visited before. Visited is the link that the user has visited previously. Focus is the state that is applied when the link has the cursor on the link, for example. Hover is similar, but it is applied when the user is with the mouse on top of it, the link hasn’t been clicked yet. Active applies when the user clicks on the link. By using it, we can style them to change the colour of the link as the example below. In the main, there’s an unordered list in which every topic is a link. The effect was applied to all the links of the unordered lists present in the main.

[coolab-vanessa]

I have been searching websites that are not similar to traditional ones or that somehow are innovative and attractive. The first one I found was Flux Academy. It is a platform  to learn about the art and business of web design. The website uses a lot of 3D along the homepage.  As we scroll down the page, the graphics that seem to be floating start to move. The first one refers to learning as it has a statue head and some icons move and go inside of it.

The second one I found attractive was Dasher and Crank. It is an ice cream shop that uses high quality photographs to attract people’s attention. The coolest thing I found about it is that once we scroll down the page, the header stays on the top and it has the appearance of a melting ice cream.

The third one is Figma’s story page. Figma is a platform to connect people and their team in the design process in order to help them deliver better products. The ‘Our Story’ page interacts as the user scrolls down. In the very end, they say ‘Our vision is to’ and the answer ‘make design accessible to everyone’ comes after a few circles appear and get bigger giving the idea of looking deeper inside the company.

The last one, the Rainforest Guardians. It is a website seeking to build awareness around deforestation. It takes a bit longer to open but the website allows us to visit villages and natives. While navigating, it helps the user to understand how the place is, helping them to have a clear idea what they are helping to protect.

Do you have any additional ones? I would love to know :)

[coolab-vanessa]

Wordpress

Wordpress is a website builder with a lot of features that allow us to publish anything we want. In one of the assignments we were asked to create a website using it. The first steps weren’t too difficult as we had to set up a server and the wordpress. Then, the next steps were to install a theme and a plugin. I tried a few themes until I decided to stick with just one. The theme is called ‘Qi’. There was one theme called ‘Astra’ that I tried to install and for some reason it wasn’t accepting it. But, as I was happy with the theme I chose, I moved on to the plugin. I installed a plugin called ‘Elementor’. Elementor is a great tool to help us edit the website. Unfortunately, it has just a few things available to the basic version. But I noticed that the PRO version might be worth investing in as it has a few features like: gallery, portfolio, media carousel. In Wordpress, we are allowed to customise everything, even the code of the chosen theme. I included an icon to the website, my own logo, I also added a portfolio and a blog page. In the navigation menu and in the footer I included an effect that if the mouse is on top of it the link changes to a blue colour.

The portfolio page was my favourite. I include just the final pictures of some of my works, and if you click on it, the image gets bigger. This was edited using the plugin mentioned before (Elementor).

[coolab-vanessa]

Colour

As it happens with typography, colour can also be managed by using css. To change the colour of the text, for example, we use the <color> element. And as mentioned before, we can use text to describe the value or we can use RGB values. RGB represents the colours red, green and blue. Each colour can be given a number from 0 to 255 (this would mean maximum saturation). So, the code would be “color: rgb (255, 200, 10). Another way and the most used one is the hex (hexadecimal) values. There are websites that make it easier to find the hex number. Two of them are:

html-color-codes.info and color.adobe.com/create/color-wheel

Adobe color it also helps making a palette and selecting if we want to apply any Color Harmony rule (such as analogous, triad, monochromatic, etc).

[coolab-vanessa]

Typography in CSS

CSS allows us to manage how the text is shown, from the type to its size and alignment for example. To use a font, we can provide one or we can use ‘web safe fonts’, fonts that the end user has. Some of them are: Arial, Georgia, Times New Roman and Verdana. As mentioned in the post before, it is possible to mention more than one in case it is not possible to use the first option. It is also important to include the type of font we expect to be used in these cases. The previous post I mentioned ‘sans-serif’, but we can also say ‘serif’. In the code, when we offer more than one option, we separate them by a comma and if the font has more than one word, we use the quotation marks. Among the styling text properties, we have ‘font-style’. This means we can define if they are normal, oblique or italic. Then we have ‘font-weight’. It can define if the type will be normal or bold. To define the font size, we can use different values, such as pixels (px), points (pt), percentage (%), em size (em) or root em size (rem). Rem, at least for me, was pretty new and I never heard of it before. So, to make it a bit easier, let’s compare with pixels. 1 rem is 16px. 10px is 0.625rem, 12px is 0.75rem. Another thing we are allowed to do is align the text. It can be centered, justified, aligned to the right or left. Text transform and text decoration are other possibilities that can be defined in the css document. Text decoration is very handy to change the underline of a link.

Example:

.highlight {

font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif;

font-style: italic;

font-weight: bold;

font-size: 0.75rem;

text-align: center;

text-transform: lowercase;

}

[coolab-vanessa]

CSS

CSS is used to manage/change the text, position, size and colour to add style to the web documents. There are three ways of adding it: inline, embedded and external. Inline is all in one document, and makes it hard to edit as it is included in the structure. Embedded is when the style is embedded into the web page. The easiest and quickest one to update is the external method. The css document is linked to the HTML page. To do this we use the link element: <link rel=”stylesheet” href=”style.css”>. This link goes in the <head> element, as the <meta charset=”utf-8”>. So when typing your stylesheet, you first indicate the selector, the element that the style is gonna be applied to. Then the property/properties followed by the value. Property is what we want to do with the element selected and the value is the change that is being made to the property.

Example:

body {

font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif;

color: #FFFFFF;

}

This means that the body would have the typography defined as Arial, if it’s not possible it will apply Helvetica Neue, or Helvetica or any other sans-serif. The colour is white. The value for colour is described as color hex. It can also be used with a name, like: “color: black;”. Another way of indicating the selector is by using position, class or id. By position would be, for example, selecting the link present in the footer (footer a ). So the rule would be just applied to that specific element. By class is described by a dot and the name of the class. By id is similar, but instead of a dot we use #. A good way of organising the css document is by putting every selector by the order they go in the html document (like: body, then article, then footer).

[coolab-vanessa]

Organising

To help organise the information and elements, we have an element called <div>. It is a block level element and it has no meaning on its own. It’s used to group content together (and it’ll be really helpful when we move on to CSS). It is used with a class attribute (example: <div class=”masthead’>. The class attribute is used to identify an element in a document and it can be used multiple times and in different elements. Another attribute is id. It is similar to the class attribute, but it can be used just once in the whole document.

Meta is another element that allows us to include information about the document. I have been using it with the attribute charset. It is used to specify a character set for the browser to use in displaying the page and it must be used after <head>. So it would be:

<head>

<meta charset="utf-8">

<title> </title>

</head>

[coolab-vanessa]

Structure

The elements mentioned before seem pretty simple but once a whole website with its information needs to be set up, it can be challenging to have it clear. A way of helping ourselves while programming a website is knowing exactly how to structure it. It is also a way of giving meaning to every part. This structure is similar in most of the websites. I have mentioned a bit of it before, but now we will look deeper.

Let’s start with the <header>. Header can be a global header of a webpage if it’s a child of <body> or a specific header for and <article> or <section>. Most pages would include the site’s logo, navigation, search and social media links. The navigation <nav> is where the main menu of the website is. Moving on, we have another element called <section>. Section is used to group related content and usually it has its own heading.

Another important one is the <article>. Article is for self-contained content. It works on its own and it can also be distributed independently from the rest of the site. This element can be used multiple times and one inside another.

The element <main> is used to represent the main section of content of the page but it does not include repeated things on other pages, such as navigation for example.

Aside <aside> is used to represent content related to the main content of the page or article. Footer <footer> is an element that is usually located at the bottom of the page or section. It typically contains authorship information, copyright, contacts. One website can have more than footer (one for the website and one for each article for example).

[coolab-vanessa]

HTML might not be so easy

Now that we know how to basically structure the website in html, let’s talk about lists. Lists are used to group things that are connected and are highly used as navigation systems on websites. There are three types of lists: unordered list, ordered list and description list. I will mention about the first two I learnt. Unordered list (‘<ul>’) is shown in the browser in topics with bullet points. The order doesn’t really matter. Whereas the ordered lists (‘<ol>’) the order is important. In the browser, the ordered list is shown with numbers. To every topic of the list, it is needed to open and close the list tag (‘<li>’ and ‘</li>’).

Another important topic is link. Links are very important in the web world and it is responsible for redirecting the user to something specific. The tag for the link is ‘<a>’ and in order to specify the destination we have to use the href attribute. If it’s linking a page on the same site, we use a relative link. So the code would be: <a href=“contact.html”>Contact</a>. If the code is in a different folder, we have to mention where (<a href=“nameofthefolder/contact.html”>Contact</a>). Now if it’s linking a page on another website we use an absolute URL, for example: ‘<a href=“https://iamvanessa.com.br/contact”>Contact</a>’.

In the image above, I used the link in an image of my logo. So, it’s possible to apply links to images as well. When inserting an image to the website, we have to provide the source and, in case the file is in a subfolder, the location. We also have to write in the code the alternative text supposing the image can’t be shown or if it’s being read with an assistive technology for people with visual impairments for example. The code would be written: <img src=”cat.jpg” alt=”A picture of a cat”>.

Always important to mention that it is important to close the tags, apart from the image, as it’s a void element and it doesn’t need a closing tag.

[coolab-vanessa]

First impressions

This week we had an introduction about coding. I learnt the basics (if I can say that) of html. HTML means hypertext markup language. Its function is to describe the structure of a page. It organizes the webpage (or website) hierarchy of information.

All the elements (header, headings, paragraphs, footer, etc) are organized by what we call ‘tags’. Tags are used to organize the structure and to mark where each element starts and ends and it’s written in the coding with “<” “>” to describe which one is being used. The beginning of the HTML structure starts with ‘<!DOCTYPE html>’. After that, in the next line, comes the root element, the tag ‘<html>’. We can also describe which language is being used by including ‘lang=”en”’, so this would be written in the coding as ‘<html lang=”en”>’. The next thing we have in the structure is the head and the title. In the example below, the title is ‘HTML’.

The following tag is the body. This part is where all the content of the page goes. For now, I know we have tags for the headings, paragraphs and the semantic elements. Headings, for example, we use the letter ‘h’. So, ‘<h1>’ would be the main heading and it is mainly used once. This one is the highlighted and the biggest one shown. This number can go up to 6, each one of them would describe the level of the heading and their size gets smaller as the number increases.

The semantic elements add meaning to the content. The tag ‘<strong>’, for instance, describes an important content and it is shown in the browser in bold. There is also the element of emphasis ‘<em>’ (that the browser shows it in italic) and the element for quotes ‘<blockquote>’. The elements that don’t have content (like the line break “<br>”) don’t need an ending tag. This one creates a paragraph but the space between the lines is smaller.

So, for now, I might agree with my teacher that HTML is easy. But let’s see what is about to come...

All these pictures with examples of codes were made in the text editor Atom.

[coolab-vanessa]

Here we go!

Hi everybody. I am Vanessa. I am a graphic designer with an MBA in Branding. I have 7 years overall experience in the field. I am passionate about design, lettering and animation. I moved to Ireland two years ago to improve my English and now I am starting a master's in Interactive Digital Media. This is the beginning of a new journey of my life. It will be challenging but I am excited to face it.

This blog is where I am going to record my thoughts and knowledge acquired in my Web Authoring class. You must be aware that I might make mistakes here but it is part of the process of learning right?!

The main idea of this module is to teach us students from scratch how to build effective websites. We will analyse and work on the design but, more important than making a beautiful and presentable one, we are also going to learn about coding in order to help us build modern websites with focus on the user and their experience while using and navigating through our product. We are going to learn about html, css, java, which to be honest I don’t have much understanding about it yet.

Even though I am not able to understand how to create a website and where to start, I am fascinated about hierarchy of information and how it can help companies to attract customers to connect with them.