Summertime and the living is easy…

Time For your CheckUp!
Time for your Check Up!

Hello! I’m back today with not a lot on techiness my mind, but just with a kid-summer-fun roundup. I packed up the girls and we are staying with my parents for a couple of weeks. DD1 is Grandpa’s shadow. She loves going on walks and helping pick up sticks and branches that have fallen from the windy storms that graced the Midwest over the course of the week. We have gone to the zoo, had a picnic with GreatGrandma, and visited many friends and fellow toddlers. Today we had a pool-and-pizza party in my long-time childhood friend’s yard.

DD wearing Auntie's sunglasses
Looking good in Auntie’s childhood shades!

I was thinking I would have a lot of free time to work on my hobbies as well…but it turns out that toddlers and babies don’t magically sleep better at Grandma’s. 🙂 But we are making a lot of great memories!

Advertisements

How to use JSBin

Now that we know how to create a webpage by saving an HTML file on your desktop, I want to tell you about a really helpful tool: JSBin.com. It serves as a type of Notepad or TextEdit, but breaks your screen into multiple screens and immediately allows you to see what your code will look like when run. jsbin html code example   The great thing about JSbin is that it will indent and auto-populate many parts of the HTML for you. In the above example, I only had to add the < p > paragraph section – everything else was already there when I went to the website. There are also options to add CSS or JavaScript code, but we will work on those later.

Frank the Crooner

HTML Lesson 1

By some miracle, both babies are alseep, so let’s get to work before they wake up! Playing bubbles must have worn them out:

HTML has a basic structure that might look daunting at first glance:<!/ h1>

 sample HTML Code:DOCTYPE html

frankcode

       Let’s break down the code together.

< > and </> —- these angle brackets are called “tags” and when we place certain commands or words inside, the browser will understand you are providing prompts to display some text or graphics in HTML. There are two sets < > are used at the beginning of a line of code, and the backslash </> closes the tag. This closing tag is needed to indicated to the computer that you are finished with a section or paragraph of text or graphics.

<!–DOCTYPE html> — The computer needs to know what type of file you are creating, so here you delcare doctype html within the <>. Easy enough.

< head > — Just like this happy crooner, (Let’s call him Frank) HMTL code has a head and a body.


crooner-154620_1280
The head is the identifying part of Frank. In HTML, the < head > tag is where you can store information regarding your webpage, such as the title of the page, a link to the style sheet, or metadata, which will be necessary for Google and other search engines to find and track your page.

< body > — the body tag will have all the additional text and graphics that you want to include in your webpage. It will have a lot of additional tags for your site content that I will outline in my next post. Stay Tuned! (and yep, the kids are awake!)Frank

HTML5: Week 1 Review

NYCIn my last post, I suggested trying out the EdX.org course on HTML5. I started it this week, and it wasn’t exactly what I was expecting, but I am still plugging away at it. It is definitely not a course for HTML beginners. Instead, it is assumes you have a solid foundation of the basic HTML. Most web designers are using HTML4 (although it is not really called that). HTML5 was released last year, and it was the first revision of the language since 1998. So much has changed in the tech world in 15 years, so the developers of HTML thought it was time to also revise HTML. HTML5 attempts to streamline and fix certain aspects of the HTML code that everyone currently uses.

For example, a large focus of this week’s material has been on the new structural elements. In the normal HTML(non-html5) code, the

tag (which stands for division) is the commonly used tag for dividing up a page into sections. If you wanted a header section, a sidebar for navigation, and a regular “body” section, you would create a div for each part. Now, with HTML5, you could simply use “header” “footer” and “nav” tags instead of making them div tags.

Additionally, the course contains mostly pages and PDFs to read and work through, not videos as I was expecting. That is okay, just different than the other online courses I have used. I haven’t taken the quiz yet so I’ll check back in when I have the results!

W3C HTML5 Course

Hi Everyone! I’m back with a suggestion for a great new course that will be offered through EdX and the W3C organizations. W3C (World Wide Web Consortium) is a community that helps set the industry standards on the Web, and it has lots of helpful learning tools in its website. This June, EdX is offering a 6 week course on HTML5- the latest version of HTML for web design.

I have signed up and will be blogging about my weekly assignments and work. I received an email today about the course, and it said only 18% of the 60,000 enrolled students are women. So, I challenge anyone who is interested (and especially women readers!) to sign up and check it out!