Week 2

Workshop 1

This week we began to focus on styling our websites which includes: background colour, fonts, sizes, images, alignment, etc. I think this workshop helped me to focus on my understanding of elements and how they can be used alongside ids and classes. Classes are a concept I was familiar with, so I found it easy to implement my previous knowledge on the idea to this version of classes.

In introducing styling, I learnt what CSS (Cascading Style Sheets) is. I have never used CSS before so it was a new concept but one that I could quickly pick up on. I think learning the basics of CSS has helped me understand how I can use it to create cohesive webpages in an efficient way.

This session I was also able to learn how to add comments in this coding language. I enjoy adding comments as it helps me to understand what I’ve done and can be used as a good reference point when continuing the session. I also remembered about committing with GitHub and managed to work in a way that I prefer to other techniques. GitHub is definitely a great way to work on code and this week has helped me to understand its importance.

Technical Workshop

In this session we furthered our knowledge of CSS and learnt the more technical terminology as well as intricacies of how it works. From the session earlier in the week we learnt how to create and order our CSS files, however this session we learnt why they are ordered this way. It was interesting to learn about the hierarchy of the different selectors and ways in which they can be used.  

After the session I would definitely like to do more research into pseudo-classes and see how they could help my code. I found the concept of using pseudo-classes difficult to imagine but I’m hopeful I’ll be able to use them eventually in my code. We also learnt about combinators, which I’d never heard of before but I’m hoping will make my coding a lot easier when I need to target specific areas for styling.  

I really enjoyed learning more about how selectors are used and learning the cascade. I think that I need to take some of my own time to further understand at-rules so I can use them in my own work. I’m interested in the idea of using them to import fonts, so my website is more user friendly and can work on multiple different platforms.  

Lecture

In this week’s lecture we learnt about computational thinking. This is a concept I am very familiar with, but it was nice to relearn the basics. We created flow charts and learnt the logic operators for IF statements. I enjoyed creating flowcharts for different topics, which is usually something I dislike doing. It was definitely good to go over the basics of computational thinking in case I had forgotten any aspects of it.  

Workshop 2

In the second workshop this week, I created a gallery website. In creating this website I learnt about resizing images for different screens, how to layout images and how to import fonts. I was also introduced to task 1 on core web development.

I created my website to hold four images as well as a cover image with a stylised title and a description under every image. I learnt what the grid method was for adding images into a website and how the grid method can be used to set different layouts for varied screen sizes using media queries. I also learnt how to resize my cover image and make it disappear based on the size of the screen, using media queries as well. I found this method easy to use as you can write out the layout you want in the CSS and it is easily displayed that way.

Task 1 asks us to create a gallery website with a minimum of 12 images as well as a cover image and proper styling of the whole page. I began work on this during the week and weekend. I imported all my images and used the grid method for resizing my images. Whilst choosing how I wanted to layout my images, I conducted some base research into the Flexbox method but decided I would rather use the grid method that I was used to. Before next week’s session I managed to create the basic website that displayed my gallery images and cover image with dynamic sizing.