It’s been a while I know…

But I’ll return shortly…

I learned a little bit today about updating Wordpress Homepages, Image Formatting, Font Stacks, and HTML Escape Codes. I always try to check out WP pages and figure out how to alter them to not have to bother my coder friend Marie, but it turns out that jumping into the middle of something hopping that you have the knowledge to change something without really knowing WHY you are changing it, is a bad idea. So I looked a tutorial that Marie made for me, and I learned a lot about a couple things that actually helped me. With Image Formatting, whenever you add an image to your site, and you don’t want the audience to be able to click to see the image larger on another page, you have to make sure to press “none” on the Image URL link. This definitely helped, because it can totally mess up the user experience of the site.  HTML Escape Codes. So if you are using a code or special character like ‘&’ or ‘»’, you have to use something called a HTML Escape Code. I never what these codes were called, but apparently they are really important. If you don’t use them, they could result in funky looking shapes, or your website spazzing out. So instead of ‘&’ use ‘&’ and instead of ‘»’ you use ‘»’. Badow! The last thing are Font Stacks. If you install a cool font like Bebas or Avenir, you need to have backups. Of course there are only whack fonts that are web standard fonts, but this is a worst case scenario. They (meaning the cool people of the internet) are trying to make more fonts available for designers and developers, but until then, it’s good to have a backup whether it’s a sans-serif or a serif font. More on that here: http://www.awayback.com/revised-font-stack/. In the midst of all this talk, me and Marie decided to start a video tutorial site on how to code. I’m excited, as is she. More to come later!

I learned a little bit today about updating Wordpress Homepages, Image Formatting, Font Stacks, and HTML Escape Codes.

I always try to check out WP pages and figure out how to alter them to not have to bother my coder friend Marie, but it turns out that jumping into the middle of something hopping that you have the knowledge to change something without really knowing WHY you are changing it, is a bad idea. So I looked a tutorial that Marie made for me, and I learned a lot about a couple things that actually helped me.

With Image Formatting, whenever you add an image to your site, and you don’t want the audience to be able to click to see the image larger on another page, you have to make sure to press “none” on the Image URL link. This definitely helped, because it can totally mess up the user experience of the site. 

HTML Escape Codes. So if you are using a code or special character like ‘&’ or ‘»’, you have to use something called a HTML Escape Code. I never what these codes were called, but apparently they are really important. If you don’t use them, they could result in funky looking shapes, or your website spazzing out. So instead of ‘&’ use ‘&’ and instead of ‘»’ you use ‘»’. Badow!

The last thing are Font Stacks. If you install a cool font like Bebas or Avenir, you need to have backups. Of course there are only whack fonts that are web standard fonts, but this is a worst case scenario. They (meaning the cool people of the internet) are trying to make more fonts available for designers and developers, but until then, it’s good to have a backup whether it’s a sans-serif or a serif font. More on that here: http://www.awayback.com/revised-font-stack/.

In the midst of all this talk, me and Marie decided to start a video tutorial site on how to code. I’m excited, as is she. More to come later!

Slacking? Neva dat….. I’ll be up and coding in a couple days. Client projects got be bounded, and now I’m trying to get some air to get back on my game. Word.

Slacking? Neva dat…..

I’ll be up and coding in a couple days. Client projects got be bounded, and now I’m trying to get some air to get back on my game.


Word.

So day 6 (or so) in my journey, and things are going relatively well. I told my developer friend of my excursion and she was so nice enough to write a tutorial for me. She knows my struggle in learning how to code, and I swear, these past few days have been such a joy I’m wondering why I didn’t start before. Especially with the new standards for HTML5 and CSS3, it makes it more exciting as a designer to learn how to code during this transitioning time. My tutorial consisted of margins, padding and floats, which is the most difficult part that I had problems understanding in the beginning. Here is a snippet of her lesson, she’s so cute for doing this: LESSON 1 - THE BOX MODELAfter talking with you, I got the sense that you have a pretty good idea about how html tags work, so this lesson will be about margins, padding and borders, also known as the box model. The box model is the idea that every element on an html page that is wrapped with a tag has an imaginary box around it. The browser  recognizes that these boxes exist (even if we human beings can’t always see them), and will apply styles to those boxes based on the css styles it is given. =====================STEP ONE=====================first thing you need to do is create a new html file called box_model.htmlI know since you’re still learning the basics, here is some sample code you can put in the file to get you started. Just copy and paste this code into the file you created (and be sure to add your name wherever you see the text *ADD YOUR NAME HERE*):<html><head><title>Fun with the Box Model - by *ADD YOUR NAME HERE**</title></head><body><h1>Be Epic </h1></body></html>=====================STEP TWO=====================Now save the file and open this page up in the browser, and bask in the awesomeness that is yourself - for you have just created a webpage, yes! So I started along the journey and created this hideous looking page. We are trying to recreate my homepage and I’m starting to understand certain functions and it’s not a scary world to me anymore. Here’s my interpretation of the whole margins, padding, and floating phenomenon: A margin is the space around me. If I need to be moved down, or to the left or the right, I need to use the margin identifier and it will move me from the top, the right, the bottom and the left respectively: margin: 0 0 0 0; CLOCKWISE MOTION IN THE HOUSE! Now padding is something a little different, lets say I am eating food.. tons of it. If I keep eating the padding inside of me will shift my actual self further away from my borders. So I will in turn end up being rather plump. But unlike the human body, in CSS, I may move to the left a bit, to the right, or from the top. Again it has the same setup as the margin, and clockwise format as well. Now a float is if I want to move all of me, instead of just parts of me as someone changes my dimensions. So that I won’t look like a Picasso painting, I could use a float, and all of me will move when someone decides to move me. I can add this to any element that I want in order to make sure that I am floating and not affected by the elements around me. BOOYAH!! Comprehension at it’s best. She’s going to feed me my next lesson, but I downloaded some Lynda tutorials to help me on my journey as well, I wanted to have that list of coding languages that I wanted to learn but I’ve been discouraged by current developers as to not overwhelm me so I will become a master at this (or at least close to it) before moving on to the next langauge… who knows what it will be (cough…PHP…cough).. it’s a mystery to me. :-) Until next time.. </bye>

So day 6 (or so) in my journey, and things are going relatively well. I told my developer friend of my excursion and she was so nice enough to write a tutorial for me. She knows my struggle in learning how to code, and I swear, these past few days have been such a joy I’m wondering why I didn’t start before. Especially with the new standards for HTML5 and CSS3, it makes it more exciting as a designer to learn how to code during this transitioning time.

My tutorial consisted of margins, padding and floats, which is the most difficult part that I had problems understanding in the beginning. Here is a snippet of her lesson, she’s so cute for doing this:

LESSON 1 - THE BOX MODEL

After talking with you, I got the sense that you have a pretty good idea about how html tags work, so this lesson will be about margins, padding and borders, also known as the box model.

The box model is the idea that every element on an html page that is wrapped with a tag has an imaginary box around it. The browser  recognizes that these boxes exist (even if we human beings can’t always see them), and will apply styles to those boxes based on the css styles it is given.

=====================
STEP ONE
=====================
first thing you need to do is create a new html file called box_model.html

I know since you’re still learning the basics, here is some sample code you can put in the file to get you started. Just copy and paste this code into the file you created (and be sure to add your name wherever you see the text *ADD YOUR NAME HERE*):

<html>
<head>
<title>Fun with the Box Model - by *ADD YOUR NAME HERE**</title>
</head>
<body>

<h1>Be Epic </h1>

</body>
</html>


=====================
STEP TWO
=====================
Now save the file and open this page up in the browser, and bask in the awesomeness that is yourself - for you have just created a webpage, yes!

So I started along the journey and created this hideous looking page. We are trying to recreate my homepage and I’m starting to understand certain functions and it’s not a scary world to me anymore. Here’s my interpretation of the whole margins, padding, and floating phenomenon:

A margin is the space around me. If I need to be moved down, or to the left or the right, I need to use the margin identifier and it will move me from the top, the right, the bottom and the left respectively: margin: 0 0 0 0; CLOCKWISE MOTION IN THE HOUSE!

Now padding is something a little different, lets say I am eating food.. tons of it. If I keep eating the padding inside of me will shift my actual self further away from my borders. So I will in turn end up being rather plump. But unlike the human body, in CSS, I may move to the left a bit, to the right, or from the top. Again it has the same setup as the margin, and clockwise format as well.

Now a float is if I want to move all of me, instead of just parts of me as someone changes my dimensions. So that I won’t look like a Picasso painting, I could use a float, and all of me will move when someone decides to move me. I can add this to any element that I want in order to make sure that I am floating and not affected by the elements around me. BOOYAH!!

Comprehension at it’s best. She’s going to feed me my next lesson, but I downloaded some Lynda tutorials to help me on my journey as well, I wanted to have that list of coding languages that I wanted to learn but I’ve been discouraged by current developers as to not overwhelm me so I will become a master at this (or at least close to it) before moving on to the next langauge… who knows what it will be (cough…PHP…cough).. it’s a mystery to me. :-)

Until next time.. </bye>

31 notes

I don’t fear it anymore! So I went through the videos, which basically talks about what the internet is (VERY BASIC but done in a way that it wasn’t painful to watch), and I learned what HTML was, which I had a basic understanding of, and then I learned how to connect it with CSS which has always been the main issue. I didn’t know what &lt;div&gt;s were or &lt;class&gt; or &lt;id&gt; but lo and behind I get it now. I think the biggest thing I took away from this was that CSS desires the most defined element. Almost like this: defined &lt; more defined &lt; most defined &lt;— this is the ticket, CSS is going to read this as the most important in the list of defined things. This was important for me to learn because it helps me to realize how to apply the styles and what’s most important on a universal basis. &lt;id&gt; tags can only be used once on a page. &lt;class&gt; tags can be used over and over. Here is something that helps me remember that I got from this page: There are many people in the class, but only one person that has a unique id. Use class when there are more than one element on a page, and id if there is only one occurrence. Makes sense. Finally. Head over to dontfeartheinternet.com when you get a chance. You’ll learn how to not fear the internet anymore. Not sure where to head next, but I will post my findings when I get that answer. I feel less intimidated. The pace that I’m going at is slow but sure, and I really want to code now, and I haven’t had that feeling, so I must be doing something right.

I don’t fear it anymore! So I went through the videos, which basically talks about what the internet is (VERY BASIC but done in a way that it wasn’t painful to watch), and I learned what HTML was, which I had a basic understanding of, and then I learned how to connect it with CSS which has always been the main issue. I didn’t know what <div>s were or <class> or <id> but lo and behind I get it now. I think the biggest thing I took away from this was that CSS desires the most defined element. Almost like this:

defined < more defined < most defined <— this is the ticket, CSS is going to read this as the most important in the list of defined things.

This was important for me to learn because it helps me to realize how to apply the styles and what’s most important on a universal basis.

<id> tags can only be used once on a page.

<class> tags can be used over and over.

Here is something that helps me remember that I got from this page: There are many people in the class, but only one person that has a unique id. Use class when there are more than one element on a page, and id if there is only one occurrence. Makes sense. Finally.

Head over to dontfeartheinternet.com when you get a chance. You’ll learn how to not fear the internet anymore.

Not sure where to head next, but I will post my findings when I get that answer. I feel less intimidated. The pace that I’m going at is slow but sure, and I really want to code now, and I haven’t had that feeling, so I must be doing something right.

30 notes

Welcome to my world of coding…

I decided to teach myself how to code after reading Tim Ferriss’ blog post: 8 Steps to Getting What You Want… Without Formal Credentials. Michael Ellsberg suggested a test and that was to try to seek out to teach yourself everything that you ever wanted to learn, document it and grow from the process.

I’m looking forward to this journey. So far I started learning some javascript at www.codeacademy.com. I felt that I was going out of order though so I’m going to start here: www.dontfeartheinternet.com. It’s with one of my favorite designers, Jessice Hische, and it teaches you in a few videos how to start with HTML & CSS. I’m excited because I want to change the structure of my business, and learn how to bust code’s ass. 

Here is my lighthearted plan:

  1. Don’t Fear the Internet: http://www.dontfeartheinternet.com/
  2. Finish up at www.codeacademy.com 
  3. Find other Designer/Coders out there to create a mini network
  4. Check out the GirlDevelopit.com group and hop in on a class for PHP/MySql
  5. Jet over to Skillshare.com and sign up for some Ruby on Rails classes.
  6. Check out iPhone & Android Dev
  7. Breathe.
  8. Be awesome and refine.

Clearly this list is a little all over the place and intimidating, but I hope to learn quickly and swiftly. My goal is to do this in a 5 month time period.

Let’s go!

70 notes

other news is designed by manasto jones, powered by tumblr and best viewed with safari.