Coffee Lessons

Welcome to Mini Bean’s First Coffee Lesson! This time we are covering 5 of the Principles of Design. If you would like to learn more, then please continue reading! If not, come join us for a cup of Mini Bean coffee! Coffee Lesson: Principles of Design The principles of design we will be covering are: Balance Rhythm Pattern Emphasis Contrast There are also Unity and Movement, but we will not be covering those principles for this lesson.  Design Principle: Balance The design principle of balance refers to the overall composition and how they relate to each other. There are two different types of balance: symmetrical and asymmetrical. This design achieves symmetrical balance by having one element mirrored over a vertical centeral axis. Design Principle: Rhythm The design principle of rhythm refers to how a visual element or composition is repeated to create flow. This also helps create a sense of unity.  This design achieves rhythm by repeating a visual element over and over, creating a pattern that gives you a sense of rhythm. Design Principle: Pattern The design principle of pattern is also how a visual composition or element is repeated to create a visually unified design.  This design achieves pattern by taking a visual element and repeating it to create a visually appealing design.  Design Principle: Emphasis The design principle of emphasis refers to the process of using visual elements to create a focal point to draw the viewer’s attention. This design achieves emphasis by creating a visual hierarchy. It is obvious that the focal point is located at the top with a visually contrasting header, with a slightly darker contrasting subheader compared to the content. Design Principle: Contrast The design principle of contrast refers to the use of color in a visual element. By using drastically different colors, or complementary colors, you can achieve contrast. This design achieves contrast by using visually different colors to draw the eye away from the background and into the intended element.

Welcome to Mini Bean’s Second Lesson! For this lesson, we will cover how we can design a custom callout using HTML and CSS. If you’re still interested, take a look at the rest of the lesson! If not, that’s great too. Come hang out at the Mini Bean and grab a coffee! Coffee Lessons: Custom Callout To create a custom callout, we will be using a HTML block. Usually in web builders, you can select a block with the code symbol like in figure 1. Once we have a custom HTML block down, we can input something like: <h2>Callout</h2> Figure 1 The <h2></h2> tags will create a header 2 element like seen below: H2 Header From here, we can edit the CSS for the h2 header. It may differ depending on what web builder or process you are creating your h2 header, but you can edit the CSS through “Custom CSS” in the menu. Once you have found it, you can select your h2 header by selecting the “custom-callout” class: .custom-callout {      /* Input Code Here */ } Next, you can input the CSS code to edit your h2 header to create a custom callout! We won’t go more in-depth into the CSS, but you can try out the code below to use our custom callout yourself! .custom-callout {     border: 5px dotted #F0DDC6;     text-align: center;     padding: 15px 0 15px 0;} Result Custom Callout