Monday, October 28, 2019
WBL Workshop 2 (Resume/Cover letters) RJ
On October 28, 2019 I came to the library/CCEC of my school to do a Work Based Learning (WBL) workshop. I sat down and listened to the a presentation by my WBL Coordinator about employment and worksite safety. The most important points of the workshop was about worksite safety and how to protect yourself from certain situations that should not or might happen in a workplace. Skills like worksite safety and worksite behavior are important to a web designer because it protects the web designer from danger.
Friday, October 18, 2019
Career Path Survey Results
Today I did a survey on my career paths and got my results from it. I learned that my top 3 career fields are Education and Training, Human Services, and Business. For Education and Training, I picked High School teacher. I picked Software Developer from Informational Technology. I also picked, CEO from business.
I learned that teaching has a low pay and high skill cap. I also learned that it is projected to grow from 2016 to 2026. I learned that CEOs make more money than teachers. They have lower skill caps too. It is a lot of responsibility though. Software developers are growing exponentially.
I learned that teaching has a low pay and high skill cap. I also learned that it is projected to grow from 2016 to 2026. I learned that CEOs make more money than teachers. They have lower skill caps too. It is a lot of responsibility though. Software developers are growing exponentially.
Wednesday, October 16, 2019
Proj. 1 Congressional APP
In this project, I created the mobile version of the website in conjunction with my teammates who did the desktop version and game for the website. To start, I first opened a HTML document, CSS document, and a JavaScript document from Dreamweaver. In my HTML document, I had the <html>, <head>, <meta>, <title>, and <body> tags already placed in via Dreamweaver. I typed in <meta> tags that described my webpage and kept web page proportions. After that, I typed in <link> tags and <script> tags that linked CSS and JavaScript files. Next, I typed in <nav> tags that encapsulates my navigation bar. Inside the the <nav> tags, I put <div> tags with class="mainNav". Inside the <div> with class="mainNav", I have one <div> tags with class="container" onclick="hamburgerMenu(this)", another <div> tags with class="dropdown-Content" id="dropLinks", and <div> tags with class="sideBtn". The <div> tags with class="container" has 3 empty divs with class="bar1", class="bar2", and class="bar3". That makes up the hamburger menu. The <div> tags with class="dropdown-Content" has a list that contains links to other webpages. It uses <ul>, <li>, and <a> tags. For <div> tags with class="sideBtn", it has an image banner that presents the title of the page. After the <nav> tags, the <main> tags are next which contain <div> tags with id="content". Inside the div, there is a <h1> tag with class="txt" and id="hTxt" that describe the webpage. There is also <p> tags with class="txt" and id="pTxt" that explain the topic of the webpage. After the <main> tags, comes the <footer> tags which have surrounding <div> tags inside it with id="ft". Inside the <div> tags with id="ft", I have a table that displays links. I used <table>, <tbody>, <tr>, <th>, and <a> tags to make it possible. The other webpages are variations of the homepage in which I talked about previously and have similar code.
CSS of the website:
--------------------------------------------------------------------------------------------------------------------------
@charset "utf-8";
/* CSS Document */
html {
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
body {
position: auto;
background-color: #f7f7f7;
color: #260f00;
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", "DejaVu Sans Condensed", "Helvetica, Arial", "sans-serif";
}
html,
body {
overflow-x: hidden;
}
.mainNav {
display: flex;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
background-color: rgb(32, 29, 29);
}
.mainNav .dropdown {
display: none;
}
.mainNav a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown-Content {
display: none;
position: static;
background-color: inherit;
min-width: 100%;
min-height: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 0;
}
.dropdown-Content a {
display: inline-block;
padding: 0;
margin: 0;
float: none;
text-align: center;
text-decoration: none;
font-size: 25px;
color: white;
}
.dropdown-Content a:hover {
background-color: #ddd;
}
.container {
vertical-align: middle;
float: left;
top: 0;
left: 0;
cursor: pointer;
min-height: 100%;;
min-width: auto;
}
.container:hover {
background-color: rgba(56,56,56,0.90);
}
.bar1, .bar2, .bar3 {
display: block;
width: 35px;
height: 5px;
background-color: #fcfcfc;
margin: 6px 0;
transition: 0.4s;
}
.bar1, .bar2, .bar3 {
background-color: #ffffff;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.cL a {
padding: 0;
margin: 0;
}
#navList {
list-style: none;
}
.clickBoxes {
display: block;
width: 100%;
height: 100%;
float: left;
}
.clickBoxes:hover {
background-color: aquamarine;
}
.clickTxt {
float: left;
margin-left: 2%;
}
.show {
display: block;
}
.sideBtn {
position: relative;
font-size: 16px;
border: none;
outline: none;
color: black;
align-content: center;
align-items: center;
text-align: center;
line-height: 30px;
flex: 1;
}
#banner {
display: block;
min-width: 100%;
min-height: 100%;
margin-left: 0.25%;
}
#container {
min-height: 100%;
min-width: 100%;
}
#content {
display: block;
position: static;
}
.txt {
padding-left: 2.5%;
}
#hTxt {
font-size: 36px;
}
#pTxt {
font-size: 24px;
line-height: 1.6;
}
#vape-img{
width: 40%;
float: right;
margin: 3%;
}
#ft {
width: 100%;
height: auto;
position: relative;
background-color: darkgray;
text-align: center;
}
#ftLinks {
padding: 0;
margin: 0 auto;
min-width: 100%;
min-height: 100%;
}
.extra {
cursor: pointer;
margin-left: 10px;
margin-right: 10px;
}
.slide {
left: 0;
transition: left 0.3s;
}
#source-list{
line-height: 1.6em;
text-align: center;
}
#game {
min-width: 400px;
min-height: 625px;
}
/**
Credit goes to https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/ for the media query sizes.
**/
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.mainNav {
display: flex;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
background-color: rgb(32, 29, 29);
}
.sideBtn {
position: relative;
font-size: 16px;
border: none;
outline: none;
color: black;
align-content: center;
align-items: center;
text-align: center;
line-height: 30px;
flex: 1;
}
#banner {
display: block;
max-width: 100%;
max-height: 100%;
margin-left: 0.25%;
}
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.mainNav {
display: flex;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
background-color: rgb(32, 29, 29);
}
.sideBtn {
position: relative;
font-size: 16px;
border: none;
outline: none;
color: black;
align-content: center;
align-items: center;
text-align: center;
line-height: 30px;
flex: 1;
}
#banner {
display: block;
max-width: 100%;
max-height: 100%;
margin-left: 0.25%;
}
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
.mainNav {
display: flex;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
background-color: rgb(32, 29, 29);
}
.sideBtn {
position: relative;
font-size: 16px;
border: none;
outline: none;
color: black;
align-content: center;
align-items: center;
text-align: center;
line-height: 30px;
flex: 1;
}
#banner {
display: block;
max-width: 100%;
max-height: 100%;
margin-left: 0.25%;
}
#hTxt {
font-size: 40px;
}
#pTxt {
font-size: 28px;
line-height: 1.6;
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
.mainNav {
display: flex;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
background-color: rgb(32, 29, 29);
}
.sideBtn {
position: relative;
font-size: 16px;
border: none;
outline: none;
color: black;
align-content: center;
align-items: center;
text-align: center;
line-height: 30px;
flex: 1;
}
#banner {
display: block;
max-width: 100%;
max-height: 100%;
margin-left: 0.25%;
}
#hTxt {
font-size: 40px;
}
#pTxt {
font-size: 28px;
line-height: 1.6;
}
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/**changes the top navigation into a side navigation**/
.mainNav {
display: block;
position: fixed;
min-width: 19%;
min-height: 80%;
padding: 15px;
margin-top: 5%;
top: 50%;
left: -14%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 1.6;
text-decoration: none;
border-radius: 0 20px 20px 0;
z-index: 50;
}
/**makes the side navigation open**/
.mainNav:hover {
left: 0%;
}
/**Makes the hamburger icon disapear**/
.bar1, .bar2, .bar3 {
display: none;
}
/**Makes the links visible**/
.dropdown-Content {
display: block;
box-shadow: none;
}
/**makes the banner go to the top with the help of Jquery**/
.sideBtn {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 0;
padding: 0;
margin: 0;
}
#banner {
margin-left: 0;
}
#content {
position: relative;
padding: 10%;
}
.txt {
padding-left: 2.5%;
}
#hTxt {
font-size: 45px;
}
#pTxt {
font-size: 30px;
line-height: 1.6;
}
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
.txt {
padding-left: 3%;
}
#hTxt {
font-size: 60px;
}
#pTxt {
font-size: 35px;
line-height: 1.6;
}
}
/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
}
/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
}
/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
}
/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
}
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
}
/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
}
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
}
/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
}
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
}
/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
}
/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
}
/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
}
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
}
--------------------------------------------------------------------------------------------------------------------------
Mainly the css was used for positioning, sizing, and decoration of the website.
JavaScript:
--------------------------------------------------------------------------------------------------------------------------
// JavaScript Document
//Congressional App Jquery File
$(document).ready(function() {
$(".container").on('click', function(e) {
$(".container").toggleClass("change");
$(".dropdown-Content").toggleClass("show");
});
if ($(".mainNav").css("position") == "fixed") {
var $bannerImg = $('.mainNav > .sideBtn');
$bannerImg.parent().after($bannerImg);
}
});
--------------------------------------------------------------------------------------------------------------------------
Mainly the JS was used to make the navigation bar functional.
Knowing how to build a website using HTML, CSS, and JavaScript is important to a web designer since it enables them to do their job effectively and efficiently.
CSS of the website:
--------------------------------------------------------------------------------------------------------------------------
@charset "utf-8";
/* CSS Document */
html {
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
body {
position: auto;
background-color: #f7f7f7;
color: #260f00;
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", "DejaVu Sans Condensed", "Helvetica, Arial", "sans-serif";
}
html,
body {
overflow-x: hidden;
}
.mainNav {
display: flex;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
background-color: rgb(32, 29, 29);
}
.mainNav .dropdown {
display: none;
}
.mainNav a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown-Content {
display: none;
position: static;
background-color: inherit;
min-width: 100%;
min-height: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 0;
}
.dropdown-Content a {
display: inline-block;
padding: 0;
margin: 0;
float: none;
text-align: center;
text-decoration: none;
font-size: 25px;
color: white;
}
.dropdown-Content a:hover {
background-color: #ddd;
}
.container {
vertical-align: middle;
float: left;
top: 0;
left: 0;
cursor: pointer;
min-height: 100%;;
min-width: auto;
}
.container:hover {
background-color: rgba(56,56,56,0.90);
}
.bar1, .bar2, .bar3 {
display: block;
width: 35px;
height: 5px;
background-color: #fcfcfc;
margin: 6px 0;
transition: 0.4s;
}
.bar1, .bar2, .bar3 {
background-color: #ffffff;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.cL a {
padding: 0;
margin: 0;
}
#navList {
list-style: none;
}
.clickBoxes {
display: block;
width: 100%;
height: 100%;
float: left;
}
.clickBoxes:hover {
background-color: aquamarine;
}
.clickTxt {
float: left;
margin-left: 2%;
}
.show {
display: block;
}
.sideBtn {
position: relative;
font-size: 16px;
border: none;
outline: none;
color: black;
align-content: center;
align-items: center;
text-align: center;
line-height: 30px;
flex: 1;
}
#banner {
display: block;
min-width: 100%;
min-height: 100%;
margin-left: 0.25%;
}
#container {
min-height: 100%;
min-width: 100%;
}
#content {
display: block;
position: static;
}
.txt {
padding-left: 2.5%;
}
#hTxt {
font-size: 36px;
}
#pTxt {
font-size: 24px;
line-height: 1.6;
}
#vape-img{
width: 40%;
float: right;
margin: 3%;
}
#ft {
width: 100%;
height: auto;
position: relative;
background-color: darkgray;
text-align: center;
}
#ftLinks {
padding: 0;
margin: 0 auto;
min-width: 100%;
min-height: 100%;
}
.extra {
cursor: pointer;
margin-left: 10px;
margin-right: 10px;
}
.slide {
left: 0;
transition: left 0.3s;
}
#source-list{
line-height: 1.6em;
text-align: center;
}
#game {
min-width: 400px;
min-height: 625px;
}
/**
Credit goes to https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/ for the media query sizes.
**/
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.mainNav {
display: flex;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
background-color: rgb(32, 29, 29);
}
.sideBtn {
position: relative;
font-size: 16px;
border: none;
outline: none;
color: black;
align-content: center;
align-items: center;
text-align: center;
line-height: 30px;
flex: 1;
}
#banner {
display: block;
max-width: 100%;
max-height: 100%;
margin-left: 0.25%;
}
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.mainNav {
display: flex;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
background-color: rgb(32, 29, 29);
}
.sideBtn {
position: relative;
font-size: 16px;
border: none;
outline: none;
color: black;
align-content: center;
align-items: center;
text-align: center;
line-height: 30px;
flex: 1;
}
#banner {
display: block;
max-width: 100%;
max-height: 100%;
margin-left: 0.25%;
}
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
.mainNav {
display: flex;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
background-color: rgb(32, 29, 29);
}
.sideBtn {
position: relative;
font-size: 16px;
border: none;
outline: none;
color: black;
align-content: center;
align-items: center;
text-align: center;
line-height: 30px;
flex: 1;
}
#banner {
display: block;
max-width: 100%;
max-height: 100%;
margin-left: 0.25%;
}
#hTxt {
font-size: 40px;
}
#pTxt {
font-size: 28px;
line-height: 1.6;
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
.mainNav {
display: flex;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
background-color: rgb(32, 29, 29);
}
.sideBtn {
position: relative;
font-size: 16px;
border: none;
outline: none;
color: black;
align-content: center;
align-items: center;
text-align: center;
line-height: 30px;
flex: 1;
}
#banner {
display: block;
max-width: 100%;
max-height: 100%;
margin-left: 0.25%;
}
#hTxt {
font-size: 40px;
}
#pTxt {
font-size: 28px;
line-height: 1.6;
}
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/**changes the top navigation into a side navigation**/
.mainNav {
display: block;
position: fixed;
min-width: 19%;
min-height: 80%;
padding: 15px;
margin-top: 5%;
top: 50%;
left: -14%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 1.6;
text-decoration: none;
border-radius: 0 20px 20px 0;
z-index: 50;
}
/**makes the side navigation open**/
.mainNav:hover {
left: 0%;
}
/**Makes the hamburger icon disapear**/
.bar1, .bar2, .bar3 {
display: none;
}
/**Makes the links visible**/
.dropdown-Content {
display: block;
box-shadow: none;
}
/**makes the banner go to the top with the help of Jquery**/
.sideBtn {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 0;
padding: 0;
margin: 0;
}
#banner {
margin-left: 0;
}
#content {
position: relative;
padding: 10%;
}
.txt {
padding-left: 2.5%;
}
#hTxt {
font-size: 45px;
}
#pTxt {
font-size: 30px;
line-height: 1.6;
}
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
.txt {
padding-left: 3%;
}
#hTxt {
font-size: 60px;
}
#pTxt {
font-size: 35px;
line-height: 1.6;
}
}
/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
}
/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
}
/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
}
/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
}
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
}
/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
}
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
}
/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
}
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
}
/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
}
/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
}
/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
}
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
}
--------------------------------------------------------------------------------------------------------------------------
Mainly the css was used for positioning, sizing, and decoration of the website.
JavaScript:
--------------------------------------------------------------------------------------------------------------------------
// JavaScript Document
//Congressional App Jquery File
$(document).ready(function() {
$(".container").on('click', function(e) {
$(".container").toggleClass("change");
$(".dropdown-Content").toggleClass("show");
});
if ($(".mainNav").css("position") == "fixed") {
var $bannerImg = $('.mainNav > .sideBtn');
$bannerImg.parent().after($bannerImg);
}
});
--------------------------------------------------------------------------------------------------------------------------
Mainly the JS was used to make the navigation bar functional.
Knowing how to build a website using HTML, CSS, and JavaScript is important to a web designer since it enables them to do their job effectively and efficiently.
Tuesday, October 15, 2019
L3 JQ library lab
In this lab, I recreated multiple websites into a single webpage to learn about Jquery. So to create lab 2, I first opened a HTML document, CSS document, and a JavaScript document from Dreamweaver. In my HTML document, I had the <html>, <head>, <meta>, <title>, and <body> tags already placed in via Dreamweaver. I typed in <link> and <script> tags to link multiple CSS and Javascript files. After that, I typed in <div> tags with id="header" and inside that text that says my name, date, and Lab 3. After that, inserted <p> tags that followed the first website with <input> and <button> tags. Next, I inserted divs and buttons that makes squares on the screen do certain functions. More specifically, I had a parent <div> surrounding many children <div> tags. So for the boxes, I had 3 divs that shown as boxes on screen that had an id and class that were linked with JavaScript. Afterwords, I inserted forms and buttons that show some Jquery functionality. More specifically, I used <input>, <button>, <ul>, <li>, and <div> tags to show some functionality for a Jquery survey. After that, I inserted a canvas with buttons. I used <canvas> and <button> tags to implement it to show triangles using JavaScript. Finally, I did a picture and text that represent my biography. I used <p>, <div>, <h2>, <img>, and <br> tags to implement my biography. It is useful to know about Jquery so that web designers can build better websites faster.
Lb2 My First JQuery
In this lab, I created my first web page with Jquery. So to create lab 2, I first opened a HTML document, CSS document, and a JavaScript document from Dreamweaver. In my HTML document, I had the <html>, <head>, <meta>, <title>, and <body> tags already placed in via Dreamweaver. I typed in lang="en" for my <html> tag to make the document for english readers. I typed in <link> and <script> tags that linked my CSS, Javascript, and Jquery file to the HTML file to make the web page work. Inside the <body> tags, I typed in the content of the website. I first typed in <div> tags with class="cntnr" that surrounds the content. Secondly, I typed in <div> tags with the id="Header". Inside the div with id="Header", I typed in <h1>, <h2>, <h3> tags that says Lab 2, the date, and my name. After the div with the id="Header", I inserted 2 <br> tags to make a line break. So thirdly, I typed in a button that has class="btn" id="imgBtn" and that says "See images of me". After inserting another <br> tag, I typed in an <img> tag to insert the image of me. After two <br> tags, I typed in another button but this time with id="txtBtn" onClick="Fir();" and text that says "See text!". After a <br> tag, I typed in text using <p> tags. After two <br> tags, I typed in yet another button but this time with onClick="Sec();" and text that says "Read More". After a <br> tag, I typed in text using <p> tags. After that, I typed in <p> tags describing my web page. After the <p> tags, I put a <br> tag and multiple <p> tags describing the functions of the buttons. After each individual <p> tag, I typed in <button> tags that do different jquery forms that make the user input text or commands to get an output. Knowing how to use Jquery is beneficial to a web designer because it enables them to code better websites more freely and productively.
Lb#1 My portfolio homepage
In this lab, I created my portfolio homepage for this semester of high school (Senior Year) and plan on updating it in the future. So to create the portfolio homepage, I first opened a HTML document, CSS document, and a JavaScript document from Dreamweaver. In my HTML document, I had the <html>, <head>, <meta>, <title>, and <body> tags already placed in via Dreamweaver. I typed in <meta> tags that described my webpage and kept web page proportions. After that, I typed in <link> tags and <script> tags that linked CSS and JavaScript files. Next, I typed <div> tags with an id="tBanner" to contain my image banner with <img> tags inside the <div> tags. That image is the top banner of the web page. Secondly, I typed in <nav> tags after the <div> to symbolize that it is the navigation bar. Inside the <nav> tags, I typed in <div> tags with class="navbar". Inside the <div> tags with class="navbar", I typed in 3 divs. The first <div> has class="container" id="cont" onclick="hM(this)" containing 3 empty divs with class="bar1", class="bar2", and class="bar3". In the second <div>, it has class="dropdown-content" id="myDropdown". It has <ul> and <li> tags to make a list of <a> and <p> tags. That makes the buttons for the dropdown menu of the hamburger menu. The third <div> has class="sideBtn" which makes the section for the buttons on the navigation menu. I typed <a> tags linking web pages and creating text for the buttons. I furthermore typed in a search bar using <form>, <input>, and <button> tags. After the <nav> tags, I inserted a <br> tag to make space between the content after the navigation bar. I typed in <div> tags with id="cntnt" to contain the main content. Inside the <div> tags with id="cntnt", I typed in <div> tags with id="leftSideBar", another <div> tags with id="midContent", and <div> tags with id="rightSideBar". I also typed in <br> tags with a style of "clear: both". Inside the divs with id="leftSideBar" and id="rightSideBar", I inserted images with <img> tags as ads. Inside the <div> with id="midContent", I typed in <h2>, <p>, <div>, and <img> tags to put in content. After the main content of the site, I typed in a back to the top button. Underneath that, I typed in <div> tags with id="bBanner". Inside the <div> tags with id="bBanner", I inserted my bottom banner image using <img> tags. Afterwords, I typed in <div> tags with id="footer" and inside it, I typed in <img>, <a>, <table>, <tbody>, <tr>, <th>, and <br> tags that make up a footer with links. Then I entered in CSS code and JavaScript code that made the website pretty and functional. Knowing how to build a portfolio homepage is important to a web designer because it teaches the web designer how to build a homepage that displays the work for their clients and career path.
Subscribe to:
Posts (Atom)