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 { .non-profit-cta {
font-size: 24.9px; font-size: 28px;
} }
.btn { .btn {
@ -153,6 +153,11 @@ ul {
color: #5cb85c; color: #5cb85c;
} }
.delay-half {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.delay-1 { .delay-1 {
-webkit-animation-delay: 1s; -webkit-animation-delay: 1s;
animation-delay: 1s; animation-delay: 1s;
@ -168,11 +173,28 @@ ul {
animation-delay: 3s; animation-delay: 3s;
} }
.delay-4 {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.delay-5 { .delay-5 {
-webkit-animation-delay: 5s; -webkit-animation-delay: 5s;
animation-delay: 5s; animation-delay: 5s;
} }
.fast-animation { .fast-animation {
-webkit-animation-duration: 0.5s; -webkit-animation-duration: 0.5s;
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 extends ../layout
block content block content
.row .row
.col-sm-8.col-xs-12 .col-sm-12.col-md-8.col-xs-12
include ./partials/challenge include ./partials/challenge
.col-sm-4.col-xs-12 .col-sm-12.col-md-4.col-xs-12
include ./../partials/challenges include ./../partials/challenges
.col-sm-4.col-xs-12 .col-sm-12.col-md-4.col-xs-12
include ./../partials/courses include ./../partials/courses

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

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

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

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

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

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

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

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

16
views/contact.jade
View File

@ -2,18 +2,18 @@ extends layout
block content block content
.jumbotron .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 .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: h3 In exchange, we ask only that you:
h4 h4
ul 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 meet with them regularly to provide direction and answer questions.
li &#8226 clearly communicate your goals for the project: what will this project solve, and for whom? li &#8226 clearly communicate your project's goals: 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 understand that they will build your project using JavaScript frameworks (as opposed to older or proprietary tools)
li &#8226 don't lower your expectiations. Their goal is to produce work that's up to your standards. 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 all this, great! We can help you! 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.
h4 Fill this out and we'll get right back to you.
form.form-horizontal(role='form', method='POST') form.form-horizontal(role='form', method='POST')
input(type='hidden', name='_csrf', value=_csrf) input(type='hidden', name='_csrf', value=_csrf)
.form-group .form-group

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,10 +1,29 @@
.panel.panel-primary .panel.panel-primary
.panel-heading Course: #{name} .panel-heading Course: #{name}
.panel.panel-body .panel.panel-body
img.img-center.img-responsive(src=image) .animated.zoomIn.delay-1
h3 Takes about #{time} hours to complete img.img-center.img-responsive(src=image)
.animated.fadeIn.delay-2
h3 Takes about #{time} hours to complete
for direction in directions for direction in directions
p= direction 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 extends ../layout
block content block content
.row .row
.col-xs-12.col-sm-8 .col-xs-12.col-sm-12.col-md-8
.panel.panel-primary .panel.panel-primary
.panel-heading Your Curriculum .panel-heading Your Curriculum
.panel.panel-body .panel.panel-body
.responsive-container.animated.zoomIn.delay-1 .responsive-container.animated.zoomIn.delay-1
iframe(src='//player.vimeo.com/video/#{video}', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='') iframe(src='//player.vimeo.com/video/#{video}', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
h3 Instructions: .animated.fadeIn.delay-2
p Here are a few quick tips: h3 Instructions:
ol p Here are a few quick tips:
li Work through our challenges in order. Many challenges are self-graded. If you want our feedback,  ol
a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") tweet a link to your project to @freecodecamp. li Work through our challenges in order. Many challenges are self-graded. If you want our feedback, 
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. a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") tweet a link to your project to @freecodecamp.
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. 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.
p We're working to create more challenges. If you have an idea for a challenge you'd like us to implement,&nbsp 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.
a(href="https://twitter.com/intent/tweet?text=Hey%20@freecodecamp") tweet it to @freecodecamp. p We're working to create more challenges. If you have an idea for a challenge you'd like us to implement,&nbsp
.col-sm-4.col-xs-12.animated.flipInY.delay-2 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 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 include ./../partials/courses

54
views/home.jade
View File

@ -4,31 +4,31 @@ block content
.text-center .text-center
.animated.pulse .animated.pulse
h1 Become a Software Engineer h1 Become a Software Engineer
h2 Learn to code by collaborating on projects for non-profits .delay-1.animated.pulse.slow-animation
.delay-2.animated.fadeIn h2 Learn to code by collaborating on projects for non-profits
.row .row
.col-xs-12.col-sm-12.col-md-4 .col-xs-12.col-sm-12.col-md-4
h3 Technical Mastery h3.delay-3.animated.pulse Technical Mastery
.negative-10 .negative-10
span.landing-icon.ion-settings.text-primary span.landing-icon.ion-settings.text-primary
.negative-10 .negative-10
p You'll learn to code by pair programming (where two people code together on one computer) through our coding challenges. 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 .col-xs-12.col-sm-12.col-md-4
h3 Unique Portfolio Projects h3.delay-4.animated.pulse Unique Portfolio Projects
.negative-10 .negative-10
span.landing-icon.ion-social-github.text-primary span.landing-icon.ion-social-github.text-primary
.negative-10 .negative-10
p You'll use your new coding skills to build software solutions for non-profits. Your portfolio projects will have grateful users. 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 .col-xs-12.col-sm-12.col-md-4
h3 Glowing References h3.delay-5.animated.pulse Glowing References
.negative-10 .negative-10
span.landing-icon.ion-thumbsup.text-primary span.landing-icon.ion-thumbsup.text-primary
.negative-10 .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. 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) a.btn.btn-cta.btn-primary(href="/login") Sign in now to start coding (it's free)
br br
br br
a.btn.non-profit-cta.btn-success(href="/contact") I'm with a non-profit and want free help coding something a.btn.non-profit-cta.btn-success(href="/contact") I'm with a non-profit and need something coded up
br br
.panel.panel-primary .panel.panel-primary
.panel-heading.landing-panel-heading Frequently Asked Questions .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. 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 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;") 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 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") 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? h2 Is this really free? Do you claim part of my first year's salary like some bootcamps do?
ul 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-heading Challenges
.panel-body .panel-body
ol ol
li Web Design: li Web Design:
ol ol
li 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 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 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 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: li JavaScript and Computer Science:
ul ol
li Coming soon 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: li Full Stack JavaScript Development:
ul ol
li Coming soon 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-heading Recommended (Free) Courses
.panel-body .panel-body
ol ol

4
views/partials/footer.jade
View File

@ -1,10 +1,10 @@
.container .container
.row .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 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 .visible-xs
br br
br 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 a.btn.btn-primary.btn-large.btn-block(href='http://twitter.com/intent/user?screen_name=FreeCodeCamp') Follow the discussion on Twitter