One source of images to use within our sites would be royalty free images that we are allowed to use without infringement. One such provider of royalty free images would be unsplash.com.
It’s always important to use the most optimal image type when adding images to a webpage as it will affect the loading times for the user. For most images WebP is optimal as they are more compressed than JPEGs.
For flat colours such as icons and logos PNGs and SVGs are optimal. SVGs are scaleable and wont lose any sharpness which makes them great for logos.
Images are often the largest files on any websites. This is why it is important to optimise them as they will have a great affect on how quickly the page loads. To do so we can use tools such as image compressors to ensure we are not using image files that are too large and that cause a buffer. One example of these tools would be squoosh.com
From what I know of CSS it is responsible for what could be described as everything design related when it comes to a webpage, whether its typefaces, layout, image size or colour.
CSS gives a page its own identity, making it memorable and different from others. Heres an example of a site with and without CSS to represent the value CSS adds to a site.
Pre CSS, tables were used to divide and ‘design’ webpages. This gave websites their notoriously clunky feel, almost like a newspaper. Like below.
CSS is more than just making the site pretty. It has the ability to improve the accessibility of a site and allow users who may experience certain ailments or disabilities to access content they may not be able to otherwise.
We added CSS to our extract of text.
I found adding CSS to be a delight. I really like how you can link specific elements so simply between HTML and CSS. I find it enjoyable to see the site take shape.
CSS has been the most enjoyable part of these coding classes so far, I think it is because you essentially begin actually designing website and not just marking it up like with HTML.
Here you can see the progress of my page as I add the CSS. The difference between the first and last image is amazing as it doesn’t even require much code to make that much of an impact.
