CI435 Learning Journal

Basic JavaScript

Even though it was not supposed to be done this semester, I went ahead and learnt some basic JavaScript.

Here is a div that changes shape and colour

Neat Links

I have found some tools on the internet that could be very helpful for web development

Can I Use

Can I Use cross references your HTML or CSS with browsers, and tell you if and which browsers support specific elements, and which verion they do it in.

GitHub

GitHub allowes you to create repositories for version control. Aside from the perks of using Git, this could also double as cloud storage.

GitHub Pages

GitHub Pages allows you to host your website repository from GitHub for free!

CSS tips and tricks

I have learnt a few things on my own that I will put here to show:

Box-shadow:

Spinning elements

Parallax:

Week 9 - Forms

This week I learnt about forms. I have made a form on the contacts page, but nor every form element is as useful as the rest, so I will make some weird/interesting ones here:

I also learnt how to target elements depending on their type attribute. I have flipped the range selector 90 degrees by using this.

Week 8 - Responsive layout

This week i learnt about other ways to make responsive layout, namely flexbox and multi-columns.

Example of multi-columns:

Example of flexbox:

Week 7 - Responsive Images

In this week i learnt how to make images responsive using the following methods:

Clipped image

By setting overflow to hidden, the image can remain full-size, but parts of it will disappear when the browser window gets resized

Flexible image

By giving the image a width set using percentages, the image will resize depending on how big the browser window is. This is the method i have used for the images on my website.

Flexible image with text wrapping

This is the same as flexible image, but with an added float effect to make the text float around the image.

Bonus: Flexible video container

Flexible video container uses the iframe tag within to show a video. You style the container how you want it, and then add an ifram tag within it. It is important to keep the 16:9 ratio though, or the video will be difficult to watch.

Here is an example of a Flexible video container:

Week 6 - Grid display

This was an interesting week, as it was about making websites responsive.

I chose to use the grid display for my blog posts, as there are a lot of elements inside. And I also used the grid display in the contact page, although a flexbox might have been a better idea.

I am happy with how the grid display on the blog posts turned out, but personally I do not like the layout it has between 650px and 1100px. I decided to keep it like this though, as it shows some variation in working with grid displays. If i was to change it, I would probably just remove the 650px media query, and use the layout it has now when its under 650px up until 1100px.

I have styled the website using a mobile first approach, meaning that the website is primarily styled for low widths, but uses media queries to make a better layout for wider screens. This is done to reduce the workload on phones visiting the website. Seeing as desktops are more powerful and often has better internet connections, they can manage the extra work to load the queries.

I have also made the images responsive!

Week 5 - Styling text

In this week I used CSS to style some more of my HTML elements.
I learnt how to make text float around images, which i have done here and in week 3, and I have also learnt how to clear floats, and I have done so on the paragraph underneat this.

I specified the font-family to pick a font for the text. To do this, I used google fonts, which offers fonts under the Libre license. WikiEducator's description of the Libre License is as follows:

A libre licence is a license through which the author grants users the freedom to read, listen to, watch, or otherwise experience the resource; to learn from or with it; to copy, adapt and use it for any purpose; and to share derived works for the benefit of the community.

Now that I know that I am allowed to use a font from Google Fonts, and I have successfully added a font to my website, I should add a fallback font. This is so that if a user fails to load the main font for whatever reason, the website will use a more common font that is likely to be preinstalled on most computers.

This is a paragraph with a dropcap. You can see from the first letter in the paragraph that it has increased in size, and also that the text is floating around it, although the latter might not be as evident.

Week 4 - Setting up CSS

This week was used to link the HTML pages with CSS

I linked the normalize.css file to all my HTML files. The normalize.css file is used to make all browsers to render my HTML in a similar way.

I also linked stylesheet.css to all my HTML files. stylesheet.css is my own CSS file, which I use to style my HTML elements.

I learnt how to style basic elements this week, and also how to style pseudo classes. An example for a pseudo class is "a:hover", which will trigger when the user of the website is hovering the anchor tag.

This week I was introduced to a new type of validating aswell. I have put a link to the CSS validator in this week's references.

Week 3 - Lists and Tables

This week focused on lists and tables. I have made a copy of my university timetable using HTML tables above (not visible on small devices), and I will post 3 different types of lists below:

1. This
2. Is a
   • Nested
3. Ordered
4. List

• This
• Is an
• Unordered
• List

This is a detailed list

It can be used to add a title and a description

The <dt> tag makes a title

And the <dd> tag makes the description

I also learnt how to quote text, and how to turn images into links

The W3C has made this HTML5 logo for people to use on their websites. The logo is licensed under Creative Commons Attribution 3.0 and is therefore free to use. I have added an effect here to showcase how to make text float around images.

Week 2 - Marking up my website

This post marks my second lab tutorial. This weeks lab focused on adding more advanced tags to the HTML of the learning journal

Specifically, these tags are:

• Lists and list items.
• Local anchor tags, as seen in the index menu and return to top button.
• Images.
• The time tag.
• The mailto: link, as can be seen in my contact page.

I also learnt how to make a proper folder structure and the importance of having one.

Week 1 - Setting up the learning journal

Today was the first day of lab tutorials for the web development course CI435 at the university of Brighton. I got the opportunity to have a look around the W: drive, which is where we store our webpages to be hosted.

Among the things i learnt today are:

• How to use brackets as an editing tool to create simple websites.
• I made three HTML files and linked them together, the files being the learning journal, a tutorial page, and a contacts page.
• Some basic HTML tags, like h1, h2..., h6 and p.
• How to use the W3C HTML validator to check my HTML for errors.