This week was an introduction to CSS in code. As I have studied code before using Visual Studio Code, I have already learned and used methods we looked at in this class but was good and useful to have a refresher of it.
Before getting into Style.css we looked at ‘images for HTML’ which this section was entirely new to me. During this task I had to compress images which were provided on blackboard. Usually I would just use my images for a website straight from an export from adobe which I was taught that compressing images load faster on the website. We discussed how Jpg and Webp files are best for photographs and Png and Gifs allow for transparency. Vector files would be used for logos and icons which they would be the best quality as vector images scaled based around formulas and not one set size, this means they will not go pixelated. A website mentioned in class where I can download royalty free images is ‘Unsplashed’ I will defiantly use this website for my ‘Project 3 Website’.
To compress images we looked at a website called ‘Squoosh’ which I liked this website as it allows the user to view the before and after using the mouse to control this. The website allows the user to pick a format then settings such as the quality or ‘effort’ depending on the format selected. When doing this task I found myself zooming in to compare the before and after which I asked my lecturer for some feedback which I was recommended to view at 100%, not zoomed so far in as no user will be looking at these images like that. Squoosh also tells the user how much of the files quality is compressed by and the download size. This is another website I will use for my web project as I had never thought of compressing my images before but in this class I learned it means the website loads faster.
Starting CSS we looked at what it is and examples of it, there was examples of code without CSS then the same code but with CSS added. We covered some CSS coding ‘rules’ such as the use of curly brackets, selectors, values etc. I found this explanation of code so much easier to understand than what I was taught in college and was good to get a refresher of it all.
After we looked at the basic introduction we then went back to the website we started ‘women in design’ which the HTML was created. The rest of class was a ‘step by step’ CSS code which each step was explained by the lecturer as I was following the code. I like that this was explained in every step so I would know exactly what I am coding as in college it was mostly just copying code but I never found it was explained that well.
Something new I learned today was CSS Reset which it is used to clear a browsers default formatting of HTML to remove inconsistencies between different browsers. Using this would ensure that your website will look the same on any search engine. I thought code would always be the same on any search engine but this was great information to find out as I was unaware of this.
Another thing I didn't realize I could do was to import multiple fonts at once using google fonts, I would always add one it at a time. In class I learned how to add multiple and that there was a ‘bag’ icon to tell you how many fonts are in your cart which they all get added in with one piece of code.