The First Website of a Beginner Coder

http://www.findthepixel.com/

by dcpdx • 15 years ago

13 9 15 years ago

I'm an aspiring entrepreneur currently teaching myself how to code in order to build a MVP for a product I've fully mocked up in Illustrator and see a huge need for. This idea came to me when learning about the :hover pseudo class in CSS. I basically just created a bunch of divs for each "pixel" element with height/width of 25px and transparent background, absolute positioning in %, then set the :hover class of each div id with a url of the background image and the specified height and width.

I figure this will be a cool "sandbox" for me to play around with as I continue learning. I haven't yet reached Javascript (done w/HTML _for now_ and nearing completion of CSS), but when I do I imagine there will be some more cool effects I can add.

Anyway, feel free to comment or offer suggestions for resources that may help me along the way as I learn to code. I know the site is bush league (the title is intentional btw) but even a journey of a thousand miles begins with a single step. And hopefully it will put a smile on the faces of a few Star Wars fans :)

dcpdx3• 15 years ago

I'm an aspiring entrepreneur about 3 weeks into teaching myself how to code in order to build a MVP of a product I've fully mocked up in Illustrator and see a huge need for. This idea came to me when learning about the :hover psuedo class in CSS. I basically just created a bunch of divs for each "pixel" element with a height/width of 25px, transparent background, and absolute positioning %, then added a :hover class for each div with the background image url, height, and width defined.

I figure this will make for a cool "sandbox" as I continue to learn new aspects of programming. I haven't yet reached actual _programming_ (just HTML and CSS), but will be diving into Javascript soon and look forward to messing around with it some more.

Anyway, I welcome your comments and suggestions for resources that may help me as I learn to code. I know the site is bush league (the title is intentional btw) but even a journey of a thousand miles begins with a single step. Plus, hopefully it will put a smile the on the faces of a few Star Wars fans :)

DTrejo• 15 years ago

If you decide to learn JS and want to do anything server side, try installing node[1] and stopping into the #node.js[2] irc channel!

[1] https://github.com/joyent/node/wiki/Installation

[2] http://webchat.freenode.net/?channels=node.js&uio=d4

dcpdx3• 15 years ago

Thanks! I will definitely check it out as I move into JS.

doctororange• 15 years ago

Firebug found the pixel!

davetong2• 15 years ago

I love it! Try looking into these things:

1. CSS Sprites: merge all of your images into one large image so when your page loads, it makes one request for the css sprite. When the right pixels are found by the user, your images will appear straight away without being pixelated as the CSS sprite would have loaded at the start so the web page will not need to load a new request

2. jQuery (javascript framework): This is a great JS framework that is easy to implement that will allow you to start displaying your images using "Star Wars" type effects! e.g. http://jqueryui.com/demos/show/#default

3. source control: if you want to get into programming, you should look into using source control to manage your code... even if you're starting off using html and css, it's good practice. Later on when you start doing some complex stuff, you'll find that it'll save your bacon more than a few times. I would recommend using git because all the cool kids are. Just sign-up for a free account at http://github.com and you should be right with their great documentation

All the best, Star Wars fan at heart!

i dont want to get into a git vs svn debate here so I won't even begin to list reasons for my preference

dcpdx3• 15 years ago

1. That's great stuff! It was bothering me how the images wouldn't load right away; when I tried it on my work comp (IE7) it was basically unusable as you had to roll the cursor over the divs suuuuuper slow. I will look into CSS sprites right away!

2. I had heard of jQuery and had a faint idea of how it works but now that I know you can display Star Wars effects I'll be all over it!

3. Good advice. I just registered at git thanks to @DTrejo.

Thanks for all the suggestions, I really appreciate it!

smz• 15 years ago

It never ceases to amaze me how serendipitous I find the comments on HN to be. Like the dcpdx, I've also been working on my first website and have been looking for a feature exactly like the effects you've linked.

I've also been debating with myself on github vs svn (or in my case, bitbucket). Care to explain your choice?

davetong2• 15 years ago

For me, I love it because I can work with it offline and it's branching and merging rocks compared to other version control systems. Checkout this page for a good detailed explanation: http://learn.github.com/p/intro.html. One last reason why I love it... because github rocks! It's all setup for you with a large range of third party add-ons that I find useful.

minikomi• 15 years ago

Might want to check out http://jsdo.it for more Inspiring CSS (ab)use

The First Website of a Beginner Coder

Related Stories