iantopple's posterous

more updates...

I finally added an image to the header and I created a contact page. For the contact form, I was able to lay it out all in CSS and I actually understand what I'm doing and why I need to do things a certain way. I watched a video tutorial on Lynda.com on how to layout a contact form using pure css but I didn't always understand it. Usually I would copy and paste the code and try to manipulate it a little. This time, I was actually figuring it out on my own and really understanding what I was doing. It's def a lot more convenient than using a table. 

So far, only the home page and contact page are up. I'm going to work on my resume page next. I don't yet have the contact page functional but I'll save that at a later time. 

I added a drop down menu and some more stuff to my site...


To see the update and progress on my site, click the link in the last post.

For my website, under portfolio, I ended up creating a drop down menu using pure css without any javascript. I was also abble to figure out how to create a sub menu when you hover over graphic design. To the right of it, is a sub menu with more options. I'm pretty proud of myself for figuring out how to create the sub menu because it was a challenge. I think after doing this, I gained a better grasp of the concept of how the drop down menu in css works.
If you view it different browsers, different things happen. In Safari,, you see more of the blinking animation but in other browsers, the links just get bigger and in IE just the color changes.

Also, when you click on the resume link, it's just a blank page right now but the resume blinking animation gets slower. You can only view this in Safari or Chrome. On other browsers, nothing happens yet.

I think it's pretty cool that all this code I've found and borrowed is all coming together and I'm really understand how to use and manipulate it to do what I want it to.

Still no image yet in the header. I'll try to get to that some time this week.

here is the website so far

I realized after I posted that my website link didn't work. You can view it here. http://www.iantopple.com/Portfolio%20Site/template.html

I actually took the image on the header out for now. I need to replace it with something else so right now the left side of the header is blank. 

I also added some blinking animation when you hover over the nav buttons using CSS3. The animation will only show up in Safari and Chrome. That's def a draw back for the animation in CSS3. Safari and Chrome are the only browsers that support it right now.  If you look at the site in Firefox or Opera, the nav buttons scale bigger when you hover over them. Not as exciting but at least it does something interesting. 

Oh and this is the link to download free fonts. I made a mistake on that in my last post too. http://www.dafont.com/

I'm finally redesigning my website...(and yes, I know I haven't updated in a long time)

I have been telling myself to redesign my website for about two months now and I finally took the next step. I'm in the process of redesigning my portfolio site. The reason why I'm redesigning my website is because they way the site is now, it's very difficult and time consuming to update and the loading time takes too long. There is also so much crap on it that I really need to clean it out. Most of my work that is posted isn't even necessary, plus it's old anyway and I have stronger and more updated work to show.

Since I'm redesigning my website, I decided to play around with CSS3. One of the cool features about CSS3 is that you can use any font you want now. You aren't limited to basic web fonts anymore. I downloaded some fonts on www.dafonts.com. They are a really good resource btw. I ended up getting the fonts to work and it's really easy to do. I bought a magazine that is all about CSS3 and all the cool things you can do with it. It was a good bargain because it gives you a lot of great websites to go to that are CSS3 generators. They had a website listed that converts the font files you download into all the correct files you need so that it will show up on the web. It's really cool. I'll post the url in another post. I don't remember it right now.

Anyway, this is what I have so far. The image at the top left of the header will change. I just have it as a placeholder for now. I also want to add some animation and effects with CSS3 also. I'm going to add some glowy effects to the nav buttons when you hover over them hopefully by tonight.

I also figured out how to add an icon next to the url name. It's pretty simple actually.

htp://www.iantopple.com/Portfolio Site/template.html.

Stay tuned for more progress on my site.

playing around with HTML 5

Since HTML 5 is getting more and more popular I figured I would play around with it a little bit. I used some of the new tag elements featured in html 5. I'm still going to play around with it some more and I think I'm going to design my next website using HTML 5.0. There are still a ton of new tag elements I haven't used yet. I was playing around with creating a basic layout for a page. To view the html, you can check out the source code on your browser. 

http://www.iantopple.com/testing%20html5.html

more progress on the site...

http://www.iantopple.com/Dads%20Website%20Redesigned%20again/home.html

Okay, so now I have the questionnaire page of the website almost completed. I didn't add the php code in it yet to officially work but I did add some javascript to it. If you don't fill in your name and e-mail address than you will get an alert message warning you about that. The exciting thing that I did(even though it's really simple to do which I didn't realize until now) is that I was able to have where it takes you back to the top of the page and the name input textfield is highlighted. This way, you don't have to scroll up at the top of the page. I've been trying to figure out how to have textfields highlighted if you didn't fill something out so I'm getting closer to it. I thought that was pretty cool. I ended up finding some of the source code online which really helped. If you don't fill in anything and click the submit button, you will know what I mean. 

I also added some hover functionality using css. 

More to come soon!