JSBIN, Navbars, and Weird Alien Music

I recently learned that whenever I copy and paste my code to this website, the browser freaks out and tries to process it all. So i decided to use JS-BIN to start storing my code from here on out, and I will post a screenshot of what I’ve learned, as well as a link to see my code. I love JS-bin so far! I love how there’s different sections to store all of my HTML, CSS, Javascript, etc. and it shows the webpage while I’m styling it!

Wondering what I mean by “alien music”? Well I remember my ex always had this weird techno music playing while he did his web developing from home and at work, and I called it alien music. I always thought it was super creepy and hard to focus on anything with it playing, but I randomly decided to play it while I was taking my online class, and holy cow I got SO MUCH done that day!!!!

So from now on I’m going to play weird alien music while I code. And no one can stop me. Haha.

Here’s what I’m currently working on. I’m taking random websites and copying their headers, as well as making my own. I get stuck a few times here and there, but I always find the answers via Google. Here’s the LDS.org website that I tried to re-create. So far so good! Here’s the link to my JS-Bin.

I’m a little stuck on adding a second image to the top right of the page, above the header, and I haven’t figured out how to position the 2 smaller images on top of each other on the right of the large image, but I will be learning Bootstrap in my class next, and will learn how to position images correctly. But for now, the header is what I was trying to create, specifically the nav bar/menu, and I did it!

Screen Shot 2015-10-02 at 1.10.42 PM

Here’s my code

CSS is Awesome!

I began to hyperventilate when my web dev instructor started his lecture on CSS. It seemed so hard and complicated, and I had no idea where to start or how to do it, even after watching his video tutorials over and over again. I then went to Code Academy’s website and started their online tutorial on CSS and now I feel like a million bucks! It seems MUCH easier to add your CSS onto a separate stylesheet rather than putting it all together onto one page, and trying to figure out how everything will look. I love the idea of it being separate, and from now on, I think I will use their method. In order for the 2-page method to work, it’s VERY important that I use this tag: <link type=”text/css” rel=”stylesheet” href=”stylesheet.css”/>

This will ensure that my HTML links to the CSS on the stylesheet next to it. It basically connects the two together.

I learned about all the different types of font-families, colors, styles, backgrounds, etc. and can apply them easily to any HTML. I learned that you can remove the underline on a link by using code: text-decoration: none, and I also learned that you can use backup fonts just in case you choose a font style that someone’s computer is not compatible with. This is simple, you just add a comma after the font-family, and then type in your other font preference, and when someone’s computer does not show that font, it will automatically display the next font you chose. I love it!

Here’s a few examples of what I created using CSS:

Screen Shot 2015-08-26 at 6.41.26 PM

Screen Shot 2015-08-27 at 6.27.50 PM

And I also learned how to make a button! You first use tags, and on your CSS stylesheet, you can add any type of styling that you want. In order to get those awesome rounded corners, you add a “border radius” to your CSS, and add whatever number you want, depending on how rounded you want your corners to be.

Here’s how the button turned out (yes, it’s a little basic, but hey I’m a beginner!).

Screen Shot 2015-08-27 at 6.27.44 PM


And if anyone is ever interested in learning how to add your CSS to the same page as your HTML, you simply use the tag <style></style> and add your CSS in between the tags instead of linking your HTML to your CSS stylesheet page. Woohoo!

Web Forms

Today I learned how to create a web form. I learned the basics in my online web development class, and decided to take it up a notch and explore real-life applications and created this awesome form!

Here is the application in it’s basic form that I started out creating:

Screen Shot 2015-07-23 at 10.21.05 AM

And here’s what I did with it! I used HTML5 solely on this form. It’s a silly concept, and hopefully a program like this does not exist, but it was a fun idea to come up with.

Screen Shot 2015-07-23 at 10.29.20 AM

Here’s a closer look at the code I used:

<!DOCTYPE html>
<html>
<head>
<title>Cat-Share Kitty Delivery</title>

<meta charset=”utf-8″ />
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

</head>

<body>
<div>
<h1>
Thanks for signing up with Cat-Share! </h1>
<p>Please fill out the following application to determine your eligibility for a shipment of cats:
</p>
<ol>
<li> Name: <input type=”text” placeholder=”type here…” /> </li>
<li> Date Available: <input type=”text” placeholder=”type here…” /> </li>
<li> Email: <input type=”text” placeholder=”type here…” /> </li>
<li> Phone Number: <input type=”text” placeholder=”type here…” /> </li>
</ol>
<br>
<option>Your favorite type of cats:</option>
<input type=”text” />

<br />
<br><option>Describe yourself:</option>
<textarea></textarea>

<br />
<br>
<option>Describe your interest in cats:</option>
<textarea></textarea>

<br />

<br>
<select>
<option>Choose a litter type</option>
<option value=”1″>Domestic short-hair</option>
<option value=”2″>Domestic long-hair</option>
<option value=”3″>Endangered short-hair</option>
<option value=”4″>Endangered long-hair</option>
<option value=”5″>Large wild cats</option>
</select>
<br />

<br>
<option>Are you okay with the following:</option>
<input type=”checkbox” /> Fur all over the furniture
<input type=”checkbox” /> Possible male cat spray
<input type=”checkbox” /> Unpredictable aggressive behavior
<input type=”checkbox” /> Refusal of snuggles

<br />

<br>
<option>How would you like your box of kitties delivered:</option>
<input type=”radio” name=”options” /> Pickup from store (preferred method)
<input type=”radio” name=”options” /> Home delivery (must be home to give consent)
<input type=”radio” name=”options” /> Dropped off at your local crazy neighbor’s house
<br />

<br>
<p>
By signing your full name below, you accept all terms of service and you will love and keep the cats throughout their lives.

<option></p><input type=”text” /></option>

<input type=”submit” value=”Submit Application”>
</div>
</body>
</html>


Another Skill: Label Making

Web development is not all I can do. I am highly skilled at creating labels also! I have created and designed my own printable labels for many items, including food labels, homemade laundry soap labels, gift tags, and printable coupons! I have also created custom birthday and holiday cards, flyers, birth announcements, invitations, photo collages, and made my own banners for this website. And when my son Tristan was born, I created these cute little goodie bags for the nurses at the hospital using labels I designed myself. There are many different programs that I use to create these, far too many to think of at this time, but the results are fantastic! Check these out:

Screen Shot 2015-05-29 at 5.29.39 PM

Screen Shot 2015-05-29 at 5.32.10 PM

Screen Shot 2015-05-29 at 5.34.55 PM

Screen Shot 2015-05-29 at 5.35.10 PM

Kitten Resume Using HTML

Screen Shot 2015-05-29 at 5.06.43 PM

On Codecademy.com I learned how to create an online social media profile! Looks more like an online resume, so I added my own spice to it by incorporating different font styles and sizes, crazy colors, and a touch of kitten cuteness! Here is my code:

 

 

<!DOCTYPE html>
<html>
<head>
<title>Sushi Kitten</title>
</head>
<body style=”background-color:#F781D8; text-align: center”>
<h1 style=”font-family:Arial black”><strong >Sushi Kitten</strong>
</h1>
<img src=”http://www.catchannel.com/images/articles/tuxedo-kitten-aspca-shelter.jpg&#8221; width=”15%” height=”30%” />
<h2 style=”text-align:left”>Summary</h2>
<ul style=”text-align: left; color:green;font-size:20px”>I am a three month old <strong>female Tuxedo kitten,</strong> and I live in Provo, Utah! I am looking for full-time employment in a snuggly and warm enviromnent that smells of <em>freshly baked salmon!</em></p></ul>

<h2 style=”text-align:left”>About Me:</h2>
<ul style=”text-align:left; font-size:14px; font-family:monospace; color:blue”>
<li>Interests</li>
<ol>
<li>Catching mice</li>
<li>Chasing birds</li>
<li>Eating fish</li>
</ol>
<li>Skills</li>
<ol>
<li>Coding</li>
<li>Web development</li>
<li>Computer programming</li>
</ol>
<li>Hobbies</li>
<ol>
<li>Cuddling</li>
<li>Meowing loudly</li>
<li>Running at full speed through the halls</li></ol>
<br>
<li style=”font-family:fantasy”>Weaknesses</li>
<ul style=”font-family:fantasy”>
<li>Typing speed= 0</li>
<li>I meow loudly for no reason</li>
<li>Scratches furniture</li>
</ol>

</ul>
</ul>

</body>
</html>

The Twinz Website: Responsive Blog Theme Using Javascript

I absolutely LOVE being an identical twin. With a design that I originally built using General Assembly’s Dash course, I changed the coding up a bit and designed the website below to celebrate how awesome it is being a twin in the modeling industry! Our stage-name is “The Twinz” so I named our blog accordingly. I imagine somewhere down the road I’ll be asked to help a client build a personal blog, and I can show them this example and how easy it was to make. I added in a fun Javascript command that creates a pop-up that says “Twinz rule!!!” Whenever someone hits a like button. Pretty cool, eh? The site is only a front-end design, not yet a functioning domain and website, but here is the code I used to build it, as well as the finished product design:

The Twinz Website:

Screen Shot 2014-09-19 at 1.28.50 AM

Here’s a Link for a Closer Look:

https://dash.generalassemb.ly/cpierce278/build-your-own-blog-theme

Skills I Learned By Making this Website:

Header, li, a, ul, links, display, margins, border-radius, max-width, article, margin: 0 auto; script, on(), button, alert, hex color, media queries, RGBA color.

Here’s what I still need to work on; in this case I did not have a large enough file to use as the background image, and the files that I do have from this particular twin photo-shoot we did together are HUGE files, which would blow up the size of the entire page. I admit that I still need to learn how to resize a high resolution full-sized background image to fit the screen. Let’s see if I do better on the next site I create!

Check Out the Code I Wrote:

<!DOCTYPE html>
<head>
<link href=”/normalize.css” rel=”stylesheet”>
<style>
header {
text-align: center;
background: url(‘https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQcApw9Op5xc95XpTDAPrHpfGfPxvzuOaBUdF48sR03ekVNxqdJ&#8217;);
background-size: cover;
color: white;
}
a {
color: white;
}
h1 {
font-size: 70px;
}
img {
margin: 40px 0px 0px 0px;
border: 10px solid white;
border-radius: 90px;
}
ul {
padding: 10px;
background: rgba(0,0,0,0.5);
}
li {
display: inline;
padding: 0px 10px 0px 10px;
}
article {
max-width: 500px;
padding: 20px;
margin: 0 auto;
}
@media (max-width: 500px) {
h1 {
font-size: 36px;
padding: 5px;
}
li {
padding: 5px;
display: block;
}
}
</style>
</head>
<body>
<header>
<img src=”http://images.ak.instagram.com/profiles/profile_287051556_75sq_1398311073.jpg”&gt;
<h1>The <br /> Twinz</h1>
<ul>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Our Modeling Portfolio</a></li>
<li><a href=”#”>Fun Twin Facts</a></li>
</ul>
</header>
<article>
<h2>All Odds Are In Our Favor</h2>
<p>Here’s some fun facts about twins! About 1 in every 100 births are twins, one in every 400 twin pregnancies yield identical twins, and 1 in 800 sets of IDENTICAL twins yield “mirror image” twins. Another awesome fact is that with twin births, there’s usually one vertex (head first), one breech (bottom first), and there is a 40% likelihood of this (usually the second twin is breech), as with us. Betchya didn’t know that!</p>
<button>Like</button>
</article>
<article>
<h2>Being Mirror Image Twins</h2>
<p>If you are mirror image twins it means that you are also identical twins, like us! Mirror image twins have small mirror image differences but are actually genetically identical; this means you have the exact same DNA!Some parts of the body are commonly mirrored; mirroring of appendix or heart or other internal organs is rare. We have some examples of our own mirroring: We are opposite handed (Flame is left-handed and Lake right). We tend to have mirror image dental problems. Our cowlicks (tuft of hair at fringe) are on opposite sides. People often have two different size feet; with us the opposite foot is larger. We look very similar to each other but the resemblance is even stronger if we stand facing each other (as though in a mirror) rather than side by side. Or get both of us facing into a mirror and things start to look very confusing. Our finger prints don’t seem to conform to being mirror image – instead they are nearly identical (only one pair of fingers has any major difference).</p>
<button>Like</button>
</article>
<article>
<h2>Who is Who?</h2>
<p>That’s easy, I’m Corri and my twin is Karri! Only you can’t tell who is writing this by looking at my typing… so I might as well be Karri. At the same time, I am not sure Karri knows if she’s Corri or not, she only knows that she is <i>her</i> and I am not her. She doesn’t know that her real name is Karri because she doesn’t remember ever being called specifically “Karri” without people confusing her for “Corri”. So she may as well be Corri, and I may as well be Karri. Such confusion is the very essence of understanding twins – which is normal! Haha, we guess since we don’t know who is who, why should we tell you?😉 ;)</p>
<button>Like</button>
</article>
<script>
$(“button”).on(“click”, function() {
alert(“Twinz Rule!!!”);
});
</script>
</body>
</html>

Marketing Myself as a Web Developer

Before I become a famous web developer, I have decided to pre-market myself to show off my skills to the world and make myself more credible! I learned in my Web Development training class online that as a junior web developer, I need to be marketing myself NOW, so that once I have all the skills and training I need, I will already have shared my skills, code, website examples, and knowledge with everyone and will be a reputable, professional web developer!

Here’s what I’ve done so far:

  • I created a twitter account called @webnerdcorri to show off my web development skills, check it out here:  https://twitter.com/webnerdcorriScreen Shot 2014-09-18 at 11.08.51 PM
  • I updated my LinkedIn profile to say that I’m training to be a web developer, see it here: https://www.linkedin.com/in/corrithomasScreen Shot 2014-09-18 at 11.09.13 PM
  • I updated my signature on Gmail telling people to contact me if they need a website built, looks like this:Screen Shot 2014-09-18 at 11.10.09 PM
  • I created a Buffer account at bufferapp.com to post an automatic Tweet for me each day until next week, just in case if I can’t remember to post a new Tweet each day.
  • I registered and indexed my blog Femiology with Google (I couldn’t add this website because it’s a free site owned by WordPress but I’ll do that once I get my own .com domain name figured out) so people will see it whenever they do a search on Google!Screen Shot 2014-09-17 at 12.57.25 AM
  • I updated this entire WordPress website to reflect my web development skills!
  • After all that, I went back to Femiology.com and added an advertisement video to my most-viewed post for people to see (this post has been getting 10k-25k views per day lately), and since I get paid per view on it, I am hoping that placing my ad there will increase my ad revenue from Knowlera Widgets (my lifestyle blog’s current ad company) by 400% in the next 24-48 hours, because it’s set to autoplay. You can see the video play here: http://femiology.com/13-make-ahead-and-freeze-casseroles-and-grocery-list/

I also hope to change my Facebook profile to acknowledge my web development skills also, as well as any other social media platforms I am currently connected to. By adding my aspirations to each of my networks, I am expecting to share my skills as a web developer with my friends, family members, and associates, as well as future employers, which will boost my credibility and exposure as a future professional!

Beginner Level Coding: Berries Anyone?

Check out this code I wrote when I was craving berries REALLY BADLY!

<!DOCTYPE html>
<html>
<head>
<title>BERRIES</title>
</head>
<body><center>
<h1><center>BERRIES!!!!!!</center></h1>
<img src=”http://www.glade.com/-/media/Images/Fragrances/Fragrance%20Cues/Fresh%20Berries.jpg&#8221; />
<p>I like strawberries.</p>
<p>And <i>raspberries!</i> :D</p>
<p>And also <b>blackberries.</b> They are flavor-FULL!</p>

<h2>Wanna Learn More?</h2>
<p>For more information, check out this website all about berries!
<a href=”http://www.fruitsinfo.com/berry_fruits.htm”>Berries</a&gt;
</p>
</center></body>
</html>

Here’s a screenshot of what the finished product looked like:

Screen Shot 2014-09-18 at 4.04.45 PM

My First Splash Page: “The Free Money Site”

Here is my very first splash page!

Screen Shot 2014-09-17 at 12.20.28 AM

You’ll have to disregard the many tabs I had opened in my screenshot, it was my first time coding! With this page, I used basic HTML and CSS code to create a make-believe splash page for a company who sends people FREE MONEY!!!! Wouldn’t that be nice?! I was able to create an email input feature for subscribers, but since I do not know Javascript yet, it is currently non-functional.

I created this page using code I learned with the General Assembly “Dash” free tutorials that were available to me. I was able to quickly adapt and learn HTML and CSS tricks and tips quickly and effectively. First, I made the headline and inputs using HTML. Then, I styled the background and text using CSS. After that, I added a background image and logo to the page and I was done!

Here’s a link for a closer look:

 https://dash.generalassemb.ly/cpierce278/build-your-own-personal-website

Skills I learned while creating this webpage:

h1-h6, email input, submit input, <p>, placeholder, style, body, head, title, text-align, background image, font-family, color, uploading images and image URL’s, background size, background position, font size, border, padding, and attribute selectors. Detecting and fixing bugs in HTML. Bold, italics, underlined font.

Here’s a closer look at the code I used:

<!DOCTYPE html>
<head>
<title>THE FREE MONEY SITE</title>
<style>
body {
text-align: center;
background: url(“http://www.collegescholarships.org/images/falling-money.jpg&#8221;);
background-size: cover;
background-position: center;
color: black;
font-family: helvetica;
span: font-weight: bold;
}
p {
font-size: 28px;
}
input {
border: 0;
padding: 10px;
font-size: 18px;
}
input[type=”submit”] {
background: red;
color: white;
}
img {
padding:1px;
border:1px solid #021a40;
}
</style>
</head>
<body>
<img src=”http://cashforcarswarren.com/wp-content/uploads/2013/03/cash-mone.jpg”&gt;
<p>Free Money Website! Learn how to have cash delivered to your doorstep each day! </p>
<p>Enter your email below and start making $$$$ today!</p>
<input type=”email” placeholder=”Your email”>
<input type=”submit”>
</body>

</html>