The Css Border Property

This property is used to add a border to your element. It is important that you include 3 things.

• border color
• border-width
• border style

You can set these values for each of these borders:

• border-bottom
• border-top
• border-right
• border-left

The Css Padding Property

The CSS padding properties are used to generate space around an element's content, inside of any defined borders. Some of the specific properties are:

• padding-right
• padding-left
• padding-top
• padding-bottom

And they each could have values of: lenght, %, or inherit.

Tip: Some people might confuse margin with padding. But the margin property controls the space outside an element, and the padding property controls the space inside an element.

The Css Font-family Property

Because each computer downloads different fonts, this property specifies the font for an element, if your browser/computer does not have the first one it tries the next font. Some important things is that each font name should be sepparated by a comma and if it has white space it should be in quotation marks.
There are five generic font families:

• Serif: have small strokes at the end of each letter. They are more elegant but not attractive when reading something on a web browser.
• Sans-Serif: No strokes at the end. Better for web design.
• Monospace: All letter have the same width.
• Cursive: looks like handwritten.
• Fantasy: These are more fun to experiment with.

The Css Font-Size Property

Just like the name, this property sets the size of a font. Its most typical default value is medium, but it can also have the following values:

• xx-small
• x-small
• small
• large
• x-large
• xx-large
• smaller
• larger
• length
• %
• initial
• inherit

• d-block: Makes sure to make the element to be a block and not and inline element. It does this by applying the property display: block!important;
• mx-auto: Stands for the margin in the horizontal direction. It applies properties like, margin-left: auto!important; and margin-right: auto!important;
• img-fluid: Makes the image change along with the tab size, it does this by using properties like max-width 100%; and height-auto;

• For a small tab (576px) we were required to have 2 colums so your grid value would be col-sm-6.
• For a medium size tab (772px) we needed 4 different colums so that would be 12/3 meaning col-md-3
• For an extra-small tab we just needed 1 column so col-xs-12 would work in this case.

• Hiding Content w/CSS
  • Hiding content with CSS its pretty simple. If you want to do it only when printing the you use the @media print at apply the property of display none. The display none property will be the one to use if you want to hide something with CSS. For example, we use this property to hide the navigation bar in the engedi church example. When the tab is a certain width some things will dissapear. This is helpful when viewing in smaller devices, you want your webpage to adapt to things like smarphones.
• Creating the prospective student handout
  1. First I started by focusing on the Document's format, divided it into different sections so that I can apply specific properties to them. Note: I adjusted the margins to be 300px so that In my computer screen It could have the same size as the original document.
  2. After I scanned the document to see what I needed to do.
  3. For the header, I used the justify content property with a value of space between.
  4. Then I put the appropiate fonts for each element and the colors for the headings
  5. After I foucused on getting the spacing right between each element, I did that by placing margins or paddings depending on the situation.
  6. I also added the border for each of the students, realized the bottom border was a little bit thicker. Also assigned the background color and it looked almost like the original flier.
  7. For the footer I bolded the link and added a little bit of padding to the left.
  8. To bold each of the names I then realized that I had to do it through CSS, so I used the strong tag as a selector in case you need to make any changes to the text.

Creating and Using Snippets

Snippets are like shortcuts for code or text that you can reuse. They're super handy for saving time and avoiding repetitive typing. They are specially good if there is a piece of code you use often. To create one you take a piece of code you have used before and that can be customized for future purposes. For this, its important that you add placeholder to the values, so that when you add it you can put the values you need for that code.

Some of the placeholders that we used:
• ${1:placeholder}
• ${2:placeholder}
• ${3:placeholder}
• ${4:placeholder}
(You would replace placeholder with the actual value of the property, for example first-name, last-name, age, item, date).

Snippets for Lab Notes

                    
                        <section>
                        <h1>Lab ${1:Labnumber}</h1>
                        </section>
                        

                        <article>
                        <h1>${1:Lab-title}</h1>
                        </article>
                    
                

SCSS

• I think one of the most important benefits is that you can add variables. This is benefitial because it provides consistency to the whole document.
• The other function we used that was incredibly benefitial was Nesting with SCSS. This reduce the content of our stylesheet but still applied the same properties. This is easier for rules that share the same selector but then have different classes or id within them.
• We have not explore the other benefits it brings, but from what I have observes so far, it is better for plain old CSS which makes you work more.
• Original CSS for the rules with worked 65-77

                        
    #OrderInfo td:nth-child(odd),
    #Addresses td:nth-child(odd) {
      text-align: right;
      padding-right: 10px;
    }
    
    #OrderInfo td:nth-child(odd)::after,
    #Addresses td:nth-child(odd)::after {
      content: ':'
    }
    
    #Addresses tr:first-child td:nth-child(even) {
      border: none;
    }
    
    #OrderInfo td:nth-child(even),
    #Addresses td:nth-child(even) {
      border: 1px solid #000;
      padding-left: 10px;
      text-align: left;
    }
    #OrderDetailsTable .subtotals td,
    #OrderDetailsTable .shipping td,
    #OrderDetailsTable .total td {
      border-left: none;
    }
    
    #OrderDetailsTable td,
    #OrderDetailsTable th {
      border-left: 1px solid black;
    }
    
    #OrderDetailsTable tr *:not([class='numeric']) {
      padding-left: 10px;
    }
    
    #OrderDetailsTable th {
      font-weight: bold;
      color: #FFF;
      background-color: #036;
      text-align: left;
      font-size: 16px;
    }
                        
                    

• The final SCSS version of the rule

                    
                        #OrderInfo, #Addresses { td:nth-child(odd) {
                            text-align: right;
                            padding-right: 10px;
                            &:after {
                              content: ':'
                          }
                          }
                          td:nth-child(even) {border: 1px solid #000;
                            padding-left: 10px;
                            text-align: left;}
                          }
                          
                        #OrderDetailsTable {
                            .subtotals td, .shipping td, .total td { border-left: none;}
                            td, th {border-left: 1px solid black;} 
                            tr *:not([class='numeric']){
                           padding-left: 10px; } 
                           th {font-weight: bold;
                            color: #FFF;
                            background-color: $hopeBlue;
                            text-align: left;
                            font-size: 16px;}
                          
                          }
                         
                          
                    
                

Styling Tabs

To give the tabs a Hope theme I used SCSS so that I could take advantage of the nesting rules feature. To apply most of the properties I went to the developer tools to find the specific fonts, sizes, and color of the elemets. For this I used rules like:

• text-transform
• font-family
• font-size
• background-color
• color
• font-weight

• h1, h2. h3
• a and a:hover
• #re and #re:hover
• .tab-content
• .nav-link
• body

Lab 10

In this lab we learned how to create forms and program it so we receive emails when someone answers it.

The Input Element

The input element is used in situations were you want the user to respond to an open ended question. It has several different attributes to it like input type which can have values like text, color, button, date, file and much more. One that we specifically use was radio, which gives you radio buttons to select from.

If your input type is text you want to add a text area where users can type in ther comment. This can have specific sizes depending on character lenght and also placeholders for users to know what goes in there

This is how a question with an input element will look like

           
               <div class="form-group row">
                <label for="firstname" class="col-form-label col-md-2">
                    First Name
                </ltlabel>
                <div class="col-md-10">
                    <input type="text" id="firstname" name="firstname" class="form-control"
                        placeholder="Enter your first name" required>
                </ltdiv>
                   </ltdiv>
           
       

The Select Element

This function creates a dropdown menu for users to choose the answer from. It is something that is very commonly used on various forms and is good to learn the html behind it.

You can creat option groups which facilitate how the customer finds the categories, specially when you have too many or when they are completely different and you want to separate them.

        
              <div class="form-group row">
                <label for="category" class="col-form-label col-md-2">
                    Category
                </ltlabel>
                <div class="col-md-10">
                    <select id="category" name="category" class="form-control">
                        <optgroup label="Negative">
                            <option>Complaint</ltoption>
                            <option>Bug</ltoption>
                        </ltoptgroup>
                        <optgroup label="positive">
                            <option>Suggestion</ltoption>
                            <option>Compliment</ltoption>
                        </ltoptgroup>
                    </ltselect>
                </ltdiv>
            </ltdiv>