Lab 4

The CSS Border Property

Border is a property that will outline a specific object or text. You can edit the border to be different colors using border-color. You can also change the thickness of the border using border-width. The final thing you can do with a border property is change the style of the border, meaning you can have a dashed line or just a normal line around the border using border-style. While you can use all of these you can shorthand the command to combine all three elements into one using just the element border, in which cas you would put the color, width, and style all in the same element.

The CSS Padding Property

Padding adds a space between the selected property above, below, or to the sides depending on what value you give it. The difference between padding and margin is margin is compared to the page so if you use the margin property it will effect the text based on the edge of the page. Where as padding is related to other elements on the page.

The CSS Font-Family Property

Font-Family is used to edit the style of text that is displayed on the screen. When using font-family you specify what font you want by putting it into quotes. You normally want to add multiple fonts to the same property because it uses a "safety" system in which case if the first font is not supported then they try the next font.

The CSS Font-Size Property

Font-Size is used to edit the size of the selected text. When using font-size you can specify different units such as pixels(px) or you can use point(pt) which would be similar to somethiong you see on google docs or microsoft word when adjusting the text size.

Creating and Using Snippets

Snippets are pre-recorded lines of text that allow quick and easy access to the code without having to retype all of the code. They make the coding more efficent as you don't have to retype long lines of text for code that is commonly used. To create a new one you want to copy a selection of text and go to the Snippets tab in VS Code. Once there select new snippet from clipboard. This takes whatever you have copied on the clipboard and creates a snippet for it. Give it a respectable name for the code and then you can use it whenever needed.

Another shortcut is using the $ when repeatidly using the same color in a css document. To use this take the #color that is repeatidly used and rename it to $name then create a command for the document claiming the $name is related to the #color.

                    
                    <section>
                    <h1>Lab #</h1>
                     </section>
                    
                
                    
                        <article>
                        <h1>Heading</h1>
                        </article>

SCSS

I think SCSS has benefits for allowing you to watch what you change. It also allows for more flexability and compatibility and you can make dynamic and adaptable styles.

                    
                        
Modified code

                       
#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;
                                }
                              }

Lab 8 and 9

Steps to create a Navigational Menu

To create a navigational menu you first want to use a nav element. You then want to add contents navbar, navbar-expand-md, navbar-light, and bg-light. Then you add containers to the navigational menu. There is also the hamburger menu, which is a button created in the navigational menu to show all the nav bar if the screen size changes.

Style the Navigational Menu

I used SCSS to add different fonts and colors to certain elements to the website making it have a nice design with a Hope College Theme 

                    #navbar {
                        background-color: $orange !important;
                        border-radius: 6px;
                    
                        .nav-link {
                            color: white;
                    
                            &:hover {
                                background-color: $blue;
                            }
                        }
                    
                        .show {
                            color: white;
                            background-color: $blue;
                    
                            .dropdown-item {
                                color: white;
                    
                                &:hover {
                                    background-color: $orange;
                                }
                            }
                        }
                    }

Google Fonts

The steps to use google fonts