

The First Website of a Beginner Coder - dcpdx
http://www.findthepixel.com/
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.<p>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.<p>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 :)
======
dcpdx
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
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](http://webchat.freenode.net/?channels=node.js&uio=d4)

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

------
davetong
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

~~~
smz
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?

~~~
davetong
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
Might want to check out <http://jsdo.it> for more Inspiring CSS (ab)use

------
doctororange
Firebug found the pixel!

