Loading...

Original HTML Portfolio: My Introduction to Web Development

January 10, 2023


Repository

Languages and Technologies

  1. HTML
  2. CSS

Description

During my senior year of high school, I enrolled in a web development course at Butler Community College to get a taste of computer science before attending the University of Kansas. This course was a pivotal experience that built my foundational skills in HTML and CSS. I explored various aspects of web design, including style sheets, SASS, CSS, navigation, and more. My dedication and hard work in this course were reflected in my final grade of an A. This original HTML portfolio stands as a testament to my early journey in web development and my enthusiasm for the field.

Images

IMG1 Failed to Load

Code Snippets

body{
    background-color: slategray;
    font-size: medium;
    font-family: 'Roboto', sans-serif;
    color: lightgray;
    line-height: normal;
    }
main{
padding-left: 30px;
}
h1{
    background-color: lightslategray;
    border-radius: 10pt;
    font-family: 'Koulen', cursive;
    font-size: xx-large;
    color: sienna;
    text-shadow: 3px 3px 3px sandybrown;
    padding-left: 5px;
}
h2 {
    font-family: 'Shantell Sans', cursive;
    color: darkgreen;
    font-size: x-large;
}
h3 {
    font-family: 'Single Day', cursive;
    color: darkseagreen;
    font-size: x-large;
}
small{
    color:goldenrod;
    text-align:right
}
nav{
    text-align: center;
    background-color: lightslategray;
    border: 2px solid skyblue;
    border-radius: 6px;
    }
    ul li{
    display: inline-block;
    }
    a:any-link {
    display: block;
    width: 180px;
    margin: 0 5px;
    padding: 5px 1px;
    text-align: center;
    background-color: skyblue;
    color: black;
    text-decoration: none;
    border: 2px solid black;
    border-radius: 6px;
    position: relative;
    top: 0px;
    transition:  
        background-color 0.2s,
        border-color 0.2s, 
        top 0.1s, 
        box-shadow 0.1s; 
    }
    a:hover{
    background-color: lightcyan;
    font-size: larger;
    }
    a:active{
    background-color:lightskyblue;
    }