gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

style divs a little better

Browse Source
This commit is contained in:
Michael Q Larson
2014-10-25 10:27:09 -07:00
parent 121a9339e1
commit 10ca4ebd01
23 changed files with 187 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
public/css/styles.less
View File

@ -89,7 +89,7 @@ h1, h2, h3, h4, h5, h6, p, li {
}
.non-profit-cta {
font-size: 24.9px;
font-size: 28px;
}
.btn {
@ -153,6 +153,11 @@ ul {
color: #5cb85c;
}
.delay-half {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.delay-1 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
@ -168,11 +173,28 @@ ul {
animation-delay: 3s;
}
.delay-4 {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.delay-5 {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.fast-animation {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.slow-animation {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.disabled {
pointer-events: none;
cursor: default;
color: graytext !important;
}

6
views/challenges/add-dynamic-content-to-your-website.jade
View File

@ -1,9 +1,9 @@
extends ../layout
block content
.row
.col-sm-8.col-xs-12
.col-sm-12.col-md-8.col-xs-12
include ./partials/challenge
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/challenges
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/courses

6
views/challenges/create-and-deploy-a-website.jade
View File

@ -1,9 +1,9 @@
extends ../layout
block content
.row
.col-sm-8.col-xs-12
.col-sm-12.col-md-8.col-xs-12
include ./partials/challenge
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/challenges
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/courses

6
views/challenges/experiment-with-html-and-css-in-codepen.jade
View File

@ -1,9 +1,9 @@
extends ../layout
block content
.row
.col-sm-8.col-xs-12
.col-sm-12.col-md-8.col-xs-12
include ./partials/challenge
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/challenges
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/courses

29
views/challenges/partials/challenge.jade
View File

@ -3,21 +3,22 @@
.panel.panel-body
.responsive-container.animated.zoomIn.delay-1
iframe(src='//player.vimeo.com/video/#{video}', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
h3 Instructions:
for direction in directions
p= direction
.animated.fadeIn.delay-2
h3 Instructions:
for direction in directions
p= direction
h3 Relevant Links (these open up in a new tab):
ol
for link in links
li
a(href=link, target="blank")= link
br
h3 Challenges:
ol
for challenge in challenges
li= challenge
.btn.btn-primary.btn-large.btn-block.completed-challenge I've completed this challenge
h3 Relevant Links (these open up in a new tab):
ol
for link in links
li
a(href=link, target="blank")= link
br
h3 Challenges:
ol
for challenge in challenges
li= challenge
.btn.btn-primary.btn-large.btn-block.completed-challenge I've completed this challenge
script.
$('.completed-challenge').on("click", function() {
$('#modal-dialog').modal('show');

6
views/challenges/start-a-pair-programming-session.jade
View File

@ -1,9 +1,9 @@
extends ../layout
block content
.row
.col-sm-8.col-xs-12
.col-sm-12.col-md-8.col-xs-12
include ./partials/challenge
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/challenges
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/courses

16
views/contact.jade
View File

@ -2,18 +2,18 @@ extends layout
block content
.jumbotron
h1.animated.lightSpeedIn.text-center Let's do things faster and better with software!
h1.animated.lightSpeedIn.text-center We'll help you do things faster and better with custom software!
.animated.fadeIn.delay-2.landing-panel-body
h3 Our students will help you build that donor tracking system, community message board, or whatever your organization needs, at no cost.
h3 Our students will help you build that donor tracking system, community message board, or whatever your organization needs, 
strong at no cost.
h3 In exchange, we ask only that you:
h4
ul
li &#8226 meet with them regularly in person. If that's not possible, you can teleconference with them. This way, you can collaboratively establish and review milestones.
li &#8226 clearly communicate your goals for the project: what will this project solve, and for whom?
li &#8226 know that they will use cutting edge JavaScript frameworks to build your project. Please don't expect them to use Wordpress or other proprietary or old-school technologies.
li &#8226 don't lower your expectiations. Their goal is to produce work that's up to your standards.
h3 If you're OK with all this, great! We can help you!
h4 Fill this out and we'll get right back to you.
li &#8226 meet with them regularly to provide direction and answer questions.
li &#8226 clearly communicate your project's goals: what will this project solve, and for whom?
li &#8226 understand that they will build your project using JavaScript frameworks (as opposed to older or proprietary tools)
li &#8226 keep your expectiations high. Our students' goal is to produce work that's up to your standards.
h3 If you're OK with these terms, great! We'd love to help you! Fill in this form and we'll get right back to you.
form.form-horizontal(role='form', method='POST')
input(type='hidden', name='_csrf', value=_csrf)
.form-group

6
views/courses/code-school-discover-devtools-course.jade
View File

@ -1,9 +1,9 @@
extends ../layout
block content
.row
.col-sm-8.col-xs-12
.col-sm-12.col-md-8.col-xs-12
include ./partials/course
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/challenges
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/courses

6
views/courses/code-school-real-time-with-node-js-course.jade
View File

@ -1,9 +1,9 @@
extends ../layout
block content
.row
.col-sm-8.col-xs-12
.col-sm-12.col-md-8.col-xs-12
include ./partials/course
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/challenges
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/courses

6
views/courses/code-school-shaping-up-with-angular-js-course.jade
View File

@ -1,9 +1,9 @@
extends ../layout
block content
.row
.col-sm-8.col-xs-12
.col-sm-12.col-md-8.col-xs-12
include ./partials/course
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/challenges
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/courses

6
views/courses/code-school-try-git-course.jade
View File

@ -1,9 +1,9 @@
extends ../layout
block content
.row
.col-sm-8.col-xs-12
.col-sm-12.col-md-8.col-xs-12
include ./partials/course
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/challenges
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/courses

6
views/courses/code-school-try-jquery-course.jade
View File

@ -1,9 +1,9 @@
extends ../layout
block content
.row
.col-sm-8.col-xs-12
.col-sm-12.col-md-8.col-xs-12
include ./partials/course
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/challenges
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/courses

6
views/courses/codecademy-html-and-css-track.jade
View File

@ -1,9 +1,9 @@
extends ../layout
block content
.row
.col-sm-8.col-xs-12
.col-sm-12.col-md-8.col-xs-12
include ./partials/course
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/challenges
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/courses

6
views/courses/codecademy-javascript-track.jade
View File

@ -1,9 +1,9 @@
extends ../layout
block content
.row
.col-sm-8.col-xs-12
.col-sm-12.col-md-8.col-xs-12
include ./partials/course
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/challenges
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/courses

6
views/courses/harvard-introduction-to-computer-science-cs50-course.jade
View File

@ -1,9 +1,9 @@
extends ../layout
block content
.row
.col-sm-8.col-xs-12
.col-sm-12.col-md-8.col-xs-12
include ./partials/course
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/challenges
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/courses

6
views/courses/linux-command-line-tutorial.jade
View File

@ -1,9 +1,9 @@
extends ../layout
block content
.row
.col-sm-8.col-xs-12
.col-sm-12.col-md-8.col-xs-12
include ./partials/course
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/challenges
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/courses

6
views/courses/m101js-mongodb-for-node-js-developers-course.jade
View File

@ -1,9 +1,9 @@
extends ../layout
block content
.row
.col-sm-8.col-xs-12
.col-sm-12.col-md-8.col-xs-12
include ./partials/course
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/challenges
.col-sm-4.col-xs-12
.col-sm-12.col-md-4.col-xs-12
include ./../partials/courses

29
views/courses/partials/course.jade
View File

@ -1,10 +1,29 @@
.panel.panel-primary
.panel-heading Course: #{name}
.panel.panel-body
img.img-center.img-responsive(src=image)
h3 Takes about #{time} hours to complete
.animated.zoomIn.delay-1
img.img-center.img-responsive(src=image)
.animated.fadeIn.delay-2
h3 Takes about #{time} hours to complete
for direction in directions
p= direction
for direction in directions
p= direction
a.btn.btn-primary.btn-large.btn-block(href=link, target="blank") Go to course
a.btn.btn-success.btn-large.btn-block(href=link, target="blank") Go to course
br
br
.btn.btn-primary.btn-large.btn-block.completed-challenge I've completed this challenge
script.
$('.completed-challenge').on("click", function() {
$('#modal-dialog').modal('show');
});
#modal-dialog.modal
.modal-dialog.animated.zoomIn.fast-animation
.modal-content
.modal-header
a.close(href='#', data-dismiss='modal', aria-hidden='true') ×
.text-center
h1.animated.zoomInDown Nicely done!
.animated.zoomInUp.delay-1
span.landing-icon.ion-checkmark-circled.text-success
a.animated.fadeIn.delay-2.btn.btn-primary.btn-block(href='/curriculum', aria-hidden='true') Take me back to my curriculum

25
views/curriculum/curriculum.jade
View File

@ -1,22 +1,23 @@
extends ../layout
block content
.row
.col-xs-12.col-sm-8
.col-xs-12.col-sm-12.col-md-8
.panel.panel-primary
.panel-heading Your Curriculum
.panel.panel-body
.responsive-container.animated.zoomIn.delay-1
iframe(src='//player.vimeo.com/video/#{video}', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
h3 Instructions:
p Here are a few quick tips:
ol
li Work through our challenges in order. Many challenges are self-graded. If you want our feedback, 
a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") tweet a link to your project to @freecodecamp.
li If you get stuck, try working through our recommended (free) courses. They're super helpful, but totally optional. You can pair program on them, too.
li Challenge #2 will show you how to start a pair programming session. Pair program as much as possible. It's more fun, and you'll learn better that way.
p We're working to create more challenges. If you have an idea for a challenge you'd like us to implement,&nbsp
a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") tweet it to @freecodecamp.
.col-sm-4.col-xs-12.animated.flipInY.delay-2
.animated.fadeIn.delay-2
h3 Instructions:
p Here are a few quick tips:
ol
li Work through our challenges in order. Many challenges are self-graded. If you want our feedback, 
a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") tweet a link to your project to @freecodecamp.
li If you get stuck, try working through our recommended (free) courses. They're super helpful, but totally optional. You can pair program on them, too.
li Challenge #2 will show you how to start a pair programming session. Pair program as much as possible. It's more fun, and you'll learn better that way.
p We're working to create more challenges. If you have an idea for a challenge you'd like us to implement,&nbsp
a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") tweet it to @freecodecamp.
.col-sm-12.col-md-4.col-xs-12.animated.fadeInDown.delay-3
include ./../partials/challenges
.col-sm-4.col-xs-12.animated.flipInY.delay-2
.col-sm-12.col-md-4.col-xs-12.animated.fadeInUp.delay-3
include ./../partials/courses

54
views/home.jade
View File

@ -4,31 +4,31 @@ block content
.text-center
.animated.pulse
h1 Become a Software Engineer
h2 Learn to code by collaborating on projects for non-profits
.delay-2.animated.fadeIn
.row
.col-xs-12.col-sm-12.col-md-4
h3 Technical Mastery
.negative-10
span.landing-icon.ion-settings.text-primary
.negative-10
p You'll learn to code by pair programming (where two people code together on one computer) through our coding challenges.
.col-xs-12.col-sm-12.col-md-4
h3 Unique Portfolio Projects
.negative-10
span.landing-icon.ion-social-github.text-primary
.negative-10
p You'll use your new coding skills to build software solutions for non-profits. Your portfolio projects will have grateful users.
.col-xs-12.col-sm-12.col-md-4
h3 Glowing References
.negative-10
span.landing-icon.ion-thumbsup.text-primary
.negative-10
p You'll gain the respect of your peers and the non-profits you help. These types of connections are critical to your job search.
a.btn.btn-cta.btn-primary(href="/login") Sign in now to start coding (it's free)
br
br
a.btn.non-profit-cta.btn-success(href="/contact") I'm with a non-profit and want free help coding something
.delay-1.animated.pulse.slow-animation
h2 Learn to code by collaborating on projects for non-profits
.row
.col-xs-12.col-sm-12.col-md-4
h3.delay-3.animated.pulse Technical Mastery
.negative-10
span.landing-icon.ion-settings.text-primary
.negative-10
p You'll learn to code by pair programming (where two people code together on one computer) through our coding challenges.
.col-xs-12.col-sm-12.col-md-4
h3.delay-4.animated.pulse Unique Portfolio Projects
.negative-10
span.landing-icon.ion-social-github.text-primary
.negative-10
p You'll use your new coding skills to build software solutions for non-profits. Your portfolio projects will have grateful users.
.col-xs-12.col-sm-12.col-md-4
h3.delay-5.animated.pulse Glowing References
.negative-10
span.landing-icon.ion-thumbsup.text-primary
.negative-10
p You'll gain the respect of your peers and the non-profits you help. These types of connections are critical to your job search.
a.btn.btn-cta.btn-primary(href="/login") Sign in now to start coding (it's free)
br
br
a.btn.non-profit-cta.btn-success(href="/contact") I'm with a non-profit and need something coded up
br
.panel.panel-primary
.panel-heading.landing-panel-heading Frequently Asked Questions
@ -91,9 +91,9 @@ block content
p We love Python and Ruby. But even if you learn them, you'll still need to learn JavaScript. JavaScript is the most important language of all - it's the language of web browsers. It's also the most popular language.
br
img.img-center.img-responsive(src="http://dberkholz-media.redmonk.com/dberkholz/files/2014/04/github_new_repos-custom.png", style="max-height: 300px;")
h2 Will I really be able to job afterward?
h2 Will I be ready to get a software engineer job after this?
ul
p At the end of Free Code Camp, you will have pair programmed around 1,000 hours with dozens of other students, built a portfolio of projects that people are actively using, and a roster of glowing references from non-profits you've helped. 75% of bootcamp graduates get software engineering jobs, and make an average annual salary of $76,000.
p At the end of Free Code Camp, you will have pair programmed around 1,000 hours with dozens of other students, built a portfolio of projects that people are actively using, and a roster of glowing references from non-profits you've helped. On average, 75% of bootcamp graduates get software engineering jobs within 6 months, and earn an average annual salary of $76,000.
img.img-center.img-responsive(src="https://www.evernote.com/shard/s116/sh/4bb05639-d86c-4c15-b3a8-e4a43fa22d89/7cf00ed01124fac6e6741b97f8fb9e6f/deep/0/https---www.coursereport.com-2014-graduate-survey.pdf.png")
h2 Is this really free? Do you claim part of my first year's salary like some bootcamps do?
ul

41
views/partials/challenges.jade
View File

@ -1,20 +1,43 @@
.panel.panel-primary.animated.flipInY.delay-2
.panel.panel-primary
.panel-heading Challenges
.panel-body
ol
li Web Design:
ol
li
a(href="/challenges/create-and-deploy-a-website") Learn how to create a website and deploy it to the internet
a(href="/challenges/create-and-deploy-a-website") Create a website and deploy it to the internet
li
a(href="/challenges/start-a-pair-programming-session") Learn how to start Pair Programming session
a(href="/challenges/start-a-pair-programming-session") Start Pair Programming session
li
a(href="/challenges/add-dynamic-content-to-your-website") Learn how to add dynamic content to your website
a(href="/challenges/add-dynamic-content-to-your-website") Add dynamic content to your website
li
a(href="/challenges/experiment-with-html-and-css-in-codepen") Learn how to experiment with HTML and CSS in Codepen
a(href="/challenges/experiment-with-html-and-css-in-codepen") Experiment with HTML and CSS in CodePen
li
a.disabled(href="#") Solve a mystery using Chrome DevTools
li
a.disabled(href="#") Augment a form with jQuery
li JavaScript and Computer Science:
ul
li Coming soon
ol
li
a.disabled(href="#") Get Help, The Hacker Way
li
a.disabled(href="#") Code 20 Algorithms on CoderByte
li
a.disabled(href="#") Build a Text-based Adventure
li
a.disabled(href="#") Build an Interview Question Machine
li
a.disabled(href="#") Explore your Network with the LinkedIn API
li Full Stack JavaScript Development:
ul
li Coming soon
ol
li
a.disabled(href="#") Reverse Engineer SnapChat
li
a.disabled(href="#") Reverse Engineer Reddit
li
a.disabled(href="#") Reverse Engineer Pintrest
li
a.disabled(href="#") Help a Non-profit: Team Project
li
a.disabled(href="#") Help a Non-profit: Solo Project

2
views/partials/courses.jade
View File

@ -1,4 +1,4 @@
.panel.panel-primary.animated.flipInY.delay-2
.panel.panel-primary
.panel-heading Recommended (Free) Courses
.panel-body
ol

4
views/partials/footer.jade
View File

@ -1,10 +1,10 @@
.container
.row
.col-xs-12.col-sm-8
.col-xs-12.col-sm-12.col-md-8
a.btn.btn-success.btn-large.btn-block(href='https://www.hipchat.com/invite/178107/cc2f6ea4dfac9e48b9a88b305adae48a') Meet a new friend to pair program with in the Free Code Camp Chatroom
.visible-xs
br
br
br
.col-xs-12.col-sm-4
.col-xs-12.col-sm-12.col-md-4
a.btn.btn-primary.btn-large.btn-block(href='http://twitter.com/intent/user?screen_name=FreeCodeCamp') Follow the discussion on Twitter