6 ms·

Learn Foundation with interactive lessons

94 points by imkevinxu 13y ago

deweller 13y ago
Nice signup process. Very low friction.
dkimdkimdkim 13y ago
Great splash page with clear demo. I've been looking to stretch out my Foundation knowledge, this sounds like a good place to start.
scottmagdalein 13y ago
Had a tough time getting passed the first lesson. It's not clear that you want me to duplicate the buttons in the lesson exactly.
danso 13y ago
I think the requirement of account creation is a hinderance to helping spread the word of the site...I don't really have any intention of following these lessons (because I've used Foundation before and know CSS pretty well) but I would recommend them if, after skimming them, the site's implementation is well done. I understand the desire to gauge user interest and get their contact info, but why not let the signup process be more organic (i.e. you sign up after the first few lessons because you recognize the value of the service), as it is for Codecademy? (there is a "view lessons" in the top right, but it's not intuitive, given the signup modal)
- biscarch 13y ago
  You also get to more lessons if you complete the button example on the landing page.
showerst 13y ago
I have to say I've been using foundation 4 for some side projects since it was released, and really love it. It's well documented, gets out of the way, and is just much more intuitive/less crufty to me than bootstrap or skeleton.
- edoloughlin 13y ago
  I'm using it too and find it really nice to work with. The one reservation I have is the lack of keyboard navigation on custom form elements (e.g., checkboxes, combo boxes).
ricardobeat 13y ago
I wish zurb would invest the time to improve the documentation instead, or upgrading the javascript modules to work with v4.
jfunez 13y ago
cant submit password. Http Error 500.
msluyter 13y ago
For me, it's hanging on the create account splash screen (using Chrome). The HN effect, perhaps?
- imkevinxu 13y ago
  Should be fixed! Please let me know if theres any other bugs :)
brebory 13y ago
I'm running into a bug on the second lesson. Unless there's something subtle I'm not noticing. http://i.imgur.com/n2WcCzY.png http://i.imgur.com/n2WcCzY.png
- imkevinxu 13y ago
  Oh that had a little trick, the last button was actually a "large alert radius button". Sorry for that! Just pushed a fix to make it more fair, no longer a radius.
  - brebory 13y ago
    Ok, cool! Nice work on this!
  - sek 13y ago
    Funny how fast that was, I just did it and wondered what was wrong with his.
mcintyre1994 13y ago
I'd definitely add the examples pane from the actual lessons to the home page tutorial. My impression after trying <button>Button</button> was that I need to go read the Foundation docs instead. They're pretty impressive, I doubt I'd have come back if I'd left to do that.
seivan 13y ago
This is impressive wants me to start using Curb just because it's easier to pick up this way. I am still waiting for the grid parts for now though :)
deleted 13y ago
[deleted]
swat535 13y ago
This is really great, can you make the same thing for bootstrap?
eranation 13y ago
Oh how I wish if Bootstrap had something like that!
rahilsondhi 13y ago
Looking forward to advanced lessons on writing semantic markup using grid mixins + their options (eg nest, collapse, etc).
- pault 13y ago
  Why use semantic markup with a CSS framework? It makes your CSS increase linearly with your content.
  - rahilsondhi 13y ago
    Well what I meant is HTML with minimal presentational classes like span6 push1 or something. I'd like the CSS classes in my HTML to be related to the object, not whatever grid framework I happen to be using. I'm using SASS and the Foundation grid mixins to define visual components of the site (eg tag, display-picture, etc) that can be put on any page and have different sub classes (eg tag-small, display-picture-large). With this, the goal is not to have CSS increase linearly with the number of pages/content because I've defined all the visual components of the site and they can be shared across pages.
nichodges 13y ago
This is something that I've always felt Foundation needed. I'm a side-project hacker, and as much as I love Twitter Bootstrap I always wanted something different. I used Foundation for a few projects but found myself gravitating back to Bootstrap because of the abundance of tutorials that have built up my familiarity. The structure of these lessons is great - probably more useful than Bootstrap 'getting started' pages. The use of JSFiddle style learning is awesome. The only thing I don't like is that it requires email/password - however given it's not built by Zurb I can see why the makers have gone down that path. Perhaps a better method would have been to only ask for those details once a user wants to go beyond the first few lessons?
- imkevinxu 13y ago
  Thanks for the honest feedback, we tried to place a lot of emphasis on interactivity and problem-solving based learning. Asking to create an account later makes sense, the lessons are open to try without creating an account here http://www.tryfoundation.io/learn/ http://www.tryfoundation.io/learn/. We wanted users to create accounts in order for them to save progress and code especially for further bigger projects, thoughts?
  - nichodges 13y ago
    I did not see that link initially, I think it would be worth a/b testing a version where the option to play without signing up button is visually as dominant as the signup. Visitors that know that they don't know enough will always signup. I knew that I'd like to learn more Foundation, so immediately submitted my email address. But I would suggest that a decent slice of your users don't know what they don't know - ie. that there is a Bootstrap alternative that is just as flexible, powerful, and easy to learn. Getting those people three steps down the path before giving them a hurdle of signup would, in my opinion, result in a larger user count and greater project impact in the long run.
losethos 13y ago
God's temple. It's inevitable. God will be manifest. Soon, no more atheists. God says... me go, I pray thee; for our family hath a sacrifice in the city; and my brother, he hath commanded me to be there: and now, if I have found favour in thine eyes, let me get away, I pray thee, and see my brethren. Therefore he cometh not unto the king's table. 20:30 Then Saul's anger was kindled against Jonathan, and he said unto him, Thou son of the perverse rebellious woman, do not I know that thou hast chosen the son of Jesse to thine own confusion, and unto the confusion of thy mother's nakedness? 20:31 For as long as the son of Jesse liveth upon the ground, thou shalt not be established, nor thy kingdom. Wherefore now send and fetch him unto me, for he shall surely die. 20:32 And Jonathan answered Saul his father, and said unto him, Wherefore shall he be slain? what hath he done? 20:33 And Saul cast a javelin at him to smite him: whereby Jonathan knew that it was determined of his father to slay David. 20:34 So Jonathan arose from the table in fierce anger, and did eat no meat the second day of the month: for he was grieved for David, because his father had done him shame.

94 points by imkevinxu 13y ago

Nice signup process. Very low friction.

Great splash page with clear demo. I've been looking to stretch out my Foundation knowledge, this sounds like a good place to start.

scottmagdalein 13y ago

Had a tough time getting passed the first lesson. It's not clear that you want me to duplicate the buttons in the lesson exactly.

danso 13y ago

I think the requirement of account creation is a hinderance to helping spread the word of the site...I don't really have any intention of following these lessons (because I've used Foundation before and know CSS pretty well) but I would recommend them if, after skimming them, the site's implementation is well done. I understand the desire to gauge user interest and get their contact info, but why not let the signup process be more organic (i.e. you sign up after the first few lessons because you recognize the value of the service), as it is for Codecademy? (there is a "view lessons" in the top right, but it's not intuitive, given the signup modal)

biscarch 13y ago
You also get to more lessons if you complete the button example on the landing page.

showerst 13y ago

I have to say I've been using foundation 4 for some side projects since it was released, and really love it. It's well documented, gets out of the way, and is just much more intuitive/less crufty to me than bootstrap or skeleton.

edoloughlin 13y ago
I'm using it too and find it really nice to work with. The one reservation I have is the lack of keyboard navigation on custom form elements (e.g., checkboxes, combo boxes).

ricardobeat 13y ago

I wish zurb would invest the time to improve the documentation instead, or upgrading the javascript modules to work with v4.

jfunez 13y ago

cant submit password. Http Error 500.

msluyter 13y ago

For me, it's hanging on the create account splash screen (using Chrome). The HN effect, perhaps?

imkevinxu 13y ago
Should be fixed! Please let me know if theres any other bugs :)

brebory 13y ago

I'm running into a bug on the second lesson. Unless there's something subtle I'm not noticing. http://i.imgur.com/n2WcCzY.png http://i.imgur.com/n2WcCzY.png

imkevinxu 13y ago
Oh that had a little trick, the last button was actually a "large alert radius button". Sorry for that! Just pushed a fix to make it more fair, no longer a radius.
- brebory 13y ago
  Ok, cool! Nice work on this!
- sek 13y ago
  Funny how fast that was, I just did it and wondered what was wrong with his.

mcintyre1994 13y ago

I'd definitely add the examples pane from the actual lessons to the home page tutorial. My impression after trying <button>Button</button> was that I need to go read the Foundation docs instead. They're pretty impressive, I doubt I'd have come back if I'd left to do that.

seivan 13y ago

This is impressive wants me to start using Curb just because it's easier to pick up this way. I am still waiting for the grid parts for now though :)

deleted 13y ago

[deleted]

swat535 13y ago

This is really great, can you make the same thing for bootstrap?

eranation 13y ago

Oh how I wish if Bootstrap had something like that!

rahilsondhi 13y ago

Looking forward to advanced lessons on writing semantic markup using grid mixins + their options (eg nest, collapse, etc).

pault 13y ago
Why use semantic markup with a CSS framework? It makes your CSS increase linearly with your content.
- rahilsondhi 13y ago
  Well what I meant is HTML with minimal presentational classes like span6 push1 or something. I'd like the CSS classes in my HTML to be related to the object, not whatever grid framework I happen to be using. I'm using SASS and the Foundation grid mixins to define visual components of the site (eg tag, display-picture, etc) that can be put on any page and have different sub classes (eg tag-small, display-picture-large). With this, the goal is not to have CSS increase linearly with the number of pages/content because I've defined all the visual components of the site and they can be shared across pages.

nichodges 13y ago

This is something that I've always felt Foundation needed. I'm a side-project hacker, and as much as I love Twitter Bootstrap I always wanted something different. I used Foundation for a few projects but found myself gravitating back to Bootstrap because of the abundance of tutorials that have built up my familiarity. The structure of these lessons is great - probably more useful than Bootstrap 'getting started' pages. The use of JSFiddle style learning is awesome. The only thing I don't like is that it requires email/password - however given it's not built by Zurb I can see why the makers have gone down that path. Perhaps a better method would have been to only ask for those details once a user wants to go beyond the first few lessons?

imkevinxu 13y ago
Thanks for the honest feedback, we tried to place a lot of emphasis on interactivity and problem-solving based learning. Asking to create an account later makes sense, the lessons are open to try without creating an account here http://www.tryfoundation.io/learn/ http://www.tryfoundation.io/learn/. We wanted users to create accounts in order for them to save progress and code especially for further bigger projects, thoughts?
- nichodges 13y ago
  I did not see that link initially, I think it would be worth a/b testing a version where the option to play without signing up button is visually as dominant as the signup. Visitors that know that they don't know enough will always signup. I knew that I'd like to learn more Foundation, so immediately submitted my email address. But I would suggest that a decent slice of your users don't know what they don't know - ie. that there is a Bootstrap alternative that is just as flexible, powerful, and easy to learn. Getting those people three steps down the path before giving them a hurdle of signup would, in my opinion, result in a larger user count and greater project impact in the long run.

losethos 13y ago

God's temple. It's inevitable. God will be manifest. Soon, no more atheists. God says... me go, I pray thee; for our family hath a sacrifice in the city; and my brother, he hath commanded me to be there: and now, if I have found favour in thine eyes, let me get away, I pray thee, and see my brethren. Therefore he cometh not unto the king's table. 20:30 Then Saul's anger was kindled against Jonathan, and he said unto him, Thou son of the perverse rebellious woman, do not I know that thou hast chosen the son of Jesse to thine own confusion, and unto the confusion of thy mother's nakedness? 20:31 For as long as the son of Jesse liveth upon the ground, thou shalt not be established, nor thy kingdom. Wherefore now send and fetch him unto me, for he shall surely die. 20:32 And Jonathan answered Saul his father, and said unto him, Wherefore shall he be slain? what hath he done? 20:33 And Saul cast a javelin at him to smite him: whereby Jonathan knew that it was determined of his father to slay David. 20:34 So Jonathan arose from the table in fierce anger, and did eat no meat the second day of the month: for he was grieved for David, because his father had done him shame.