Lesson 3: My Applied Visual Design Challenge Experience

Remember how I said "HTML gives structure and semantics to a page's content, and CSS controls the layout and appearance of it" here? Yes, visual design influences the presentation and user experience.

In this challenge, there were a couple of new properties/tags that I learnt. I decided not to do my "regular" 5 lessons and fun facts this time because there were so many lessons this time. I'm just going to state few of the new tags that I learnt, what they are used for and maybe few examples. I hope you enjoy this piece. Btw, this challenge is linked to Lesson 1 and 2 here and here, so if you are lost, you might have to start from there. Let's dive straight into it

  • text-align property is used to align texts either to left, right centre and also justify. 
  • The strong tag is often used to draw attention to text and symbolize that it is important.
  • The u tag is used to underline text, the em tag is used to italize text and the s tag is used to strikethrough text
  • You can use the hr tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content (Note: In HTML, hr is a self-closing tag, and therefore doesn't need a separate closing tag.)
  • Adjusting the background colour was an interesting one. E,g you can use use background-color: rgba(45, 45, 45, 0.1)to create background colour on your webpage 

 Few definitions to note under colours;
  1. Hue: what people generally think of colour and the angle of the colour on the circle is given as a value between 0 and 360.
  2. Saturation: the amount of gray in a colour. This is given as a percentage with 100% being fully saturated.
  3. Lightness: the amount of white and black in a colour. A percentage is given ranging from  0% (black) to 100% (white), where 50% is the normal colour.
  • The box-shadowproperty applies one or more shadows to an element.
  • The text-transform property in CSS is used to change the appearance of text. E.g lowercase, uppercase or none
  • The CSS offsets of top, bottom and left or right tells the browser how far to offset an item relative to where it would sit in the normal flow of the document.
  • The z-index property can specify the order of how elements are stacked on top of one another. It must be an integer (i.e. a whole number and not a decimal)
  • More about colours, I learnt about the colour wheels. Colours draw attention and evoke harmony. I learnt that complementary colours are opposite on the colour wheel. I also learnt about primary, secondary and tertiary colours have ways to combine them on a project. For example, within the RGB colour model, red (primary) and yellow (secondary) make orange (tertiary). This adds six more colors to a simple color wheel for a total of twelve.
  • The transform property has a variety of functions that let you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as :hover that specify a certain state of an element, the transform property can easily add interactivity to your elements.
  • In this lesson, I also learnt to create a moon with the following steps, First, change the background-color to transparent, then set the border-radius property to 50% to make the circular shape. Finally, change the box-shadow property to set the offset-x to 25pxthe offset-y to 10pxblur-radius to 0, spread-radius to 0, and colour to blueThe screenshot of the code can be seen below
  • Another key lesson was learning how to use the key frame and animal property.animation-name sets the name of the animation. animation-duration sets the length of time for the animation@keyframes is how to specify exactly what happens within the animation over the duration. 
#anim {
animation-name: colorful;
animation-duration: 3s;
@keyframes colorful {
0% {
background-color: blue;
100% {
background-color: yellow;
  • In the concluding part of this challenge, I learnt about motions. Things like, how to create movements using css animations, how to animate multiple elements at variable rates  by manipulating the animation-duration of multiple elements. We also changed animation timing with the animation-timing function and finally I learnt how to use the bezier curve to move a graphic using e.g animation-timing function: cubic-bezier (0,0,0.58,1)

This challenge took a longer time to complete than the other ones, there were 52 lessons in all & I got bored at a point but kept going back & forth. There were so many things that I forgot along the line but I hope they come back when needed.

My final thoughts on this challenge is that CSS is very interesting and there were so many things I learnt here to make my work more presentable and beautiful. This is not the end of CSS, there are still a lot of lessons and things to learn. However, I will end this one here & I hope to see you in the next one...✌️

No comments