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
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
I have found some tools on the internet that could be very helpful for web development
I have learnt a few things on my own that I will put here to show:
Box-shadow:
Spinning elements
Parallax:
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:
Date Picker
Week Selector
Colour Picker
Number Box
Range Selector
I also learnt how to target elements depending on their type attribute. I have flipped the range selector 90 degrees by using this.
This week i learnt about other ways to make responsive layout, namely flexbox and multi-columns.
Example of multi-columns:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nunc tortor. Sed suscipit enim non lacus hendrerit, id commodo libero aliquet. Vestibulum faucibus lectus at vulputate tristique. In ac mi euismod, egestas justo eu, tincidunt neque. Pellentesque dapibus purus enim, ut laoreet arcu molestie eget. Phasellus luctus congue tortor ac interdum. Morbi lacus elit, porttitor sed sodales nec, congue et nisi. Quisque facilisis euismod lectus, sed euismod mauris. Vivamus et fermentum lacus. Suspendisse at consectetur metus. Curabitur vel lorem ligula. Vivamus dictum eget ligula iaculis suscipit. Nam ut arcu non libero efficitur posuere elementum eget urna. Praesent placerat metus in est consequat ornare. Pellentesque non pharetra mi, non gravida mi.
Example of flexbox:
Card 1
Instructions: Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed vulputate erat ipsum. Vestibulum vitae elit in est congue lobortis quis non orci.
Card 2
Instructions: Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed vulputate erat ipsum. Vestibulum vitae elit in est congue lobortis quis non orci.
Card 3
Instructions: Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed vulputate erat ipsum. Vestibulum vitae elit in est congue lobortis quis non orci.
Card 4
Instructions: Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed vulputate erat ipsum. Vestibulum vitae elit in est congue lobortis quis non orci.
Card 5
Instructions: Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed vulputate erat ipsum. Vestibulum vitae elit in est congue lobortis quis non orci.
Card 6
Instructions: Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed vulputate erat ipsum. Vestibulum vitae elit in est congue lobortis quis non orci.
In this week i learnt how to make images responsive using the following methods:
Here is an example of a Flexible video container:
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!
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.
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.
Day/time | Monday | Tuesday | Wednesday | Thurday | Friday |
---|---|---|---|---|---|
9-10am | - | Lecture | - | - | - |
10-11am | Lecture | Lecture | - | Tutorial | - |
11-12am | - | - | - | Lab | Lab |
12-13pm | Lecture | Lab | - | - | Lab |
13-14pm | - | - | - | Lab | - |
14-15pm | Lecture | - | - | Lab | - |
15-16pm | Lecture | - | - | - | - |
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:
<dt>
tag makes a title<dd>
tag makes the descriptionI 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.
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:
I also learnt how to make a proper folder structure and the importance of having one.
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: