From 0fa97530bbdce83eb7309fdce63e821e14bde5cf Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Wed, 30 Aug 2017 17:35:35 -0700 Subject: [PATCH] feat(challenges): Added math challenge stubs --- .../00-getting-started/getting-started.json | 1925 ++ .../applied-accessibility.json | 1160 + .../applied-visual-design.json | 2749 +++ .../01-responsive-web-design/basic-css.json | 3625 +++ .../basic-html-and-html5.json | 2134 ++ ...our-responsive-web-design-certificate.json | 108 + .../01-responsive-web-design/css-flexbox.json | 1161 + .../responsive-web-design-projects.json | 319 + .../responsive-web-design.json | 247 + .../basic-algorithm-scripting.json | 971 + .../basic-data-structures.json | 825 + .../basic-javascript.json | 5690 +++++ ...script-algorithms-and-data-structures.json | 240 + .../debugging.json | 386 + .../es6.json | 841 + .../functional-programming.json | 1288 + .../intermediate-algorithm-scripting.json | 1418 ++ .../object-oriented-programming.json | 1063 + .../regular-expressions.json | 998 + .../03-front-end-libraries/bootstrap.json | 2543 ++ ...-your-front-end-libraries-certificate.json | 108 + .../front-end-libraries-projects.json | 138 + .../03-front-end-libraries/jquery.json | 1527 ++ .../react-and-redux.json | 27 + .../03-front-end-libraries/react.json | 33 + .../03-front-end-libraries/redux.json | 33 + .../03-front-end-libraries/sass.json | 481 + ...m-your-data-visualization-certificate.json | 108 + .../data-visualization-projects.json | 128 + .../data-visualization-with-d3.json | 1804 ++ .../json-apis-and-ajax.json | 692 + .../api-and-microservice-projects.json | 207 + .../basic-node-and-express.json | 312 + ...ur-apis-and-microservices-certificate.json | 108 + .../managing-packages-with-npm.json | 307 + .../mongodb-and-mongoose.json | 285 + .../advanced-express-tools.json | 787 + ...ity-and-quality-assurance-certificate.json | 108 + .../information-security-with-helmetjs.json | 400 + ...nce-and-information-security-projects.json | 298 + ...ality-assurance-and-testing-with-chai.json | 858 + ...te-to-open-source-and-help-nonprofits.json | 28 + .../coding-interview-algorithm-questions.json | 642 + ...ng-interview-data-structure-questions.json | 2834 +++ .../javascript-multiple-choice-questions.json | 112 + .../project-euler-problems.json | 20548 ++++++++++++++++ .../take-home-interview-projects.json | 681 + .../adding-and-subtracting-decimals.json | 58 + .../adding-and-subtracting-fractions.json | 84 + .../adding-and-subtracting-mixed-numbers.json | 71 + .../additon-and-subtraction.json | 45 + .../30-arithmetic/basic-decimals.json | 71 + .../30-arithmetic/basic-place-value.json | 58 + .../30-arithmetic/compare-decimals.json | 45 + .../30-arithmetic/converting-decimals.json | 71 + .../30-arithmetic/converting-fractions.json | 84 + .../30-arithmetic/converting-percentages.json | 32 + .../30-arithmetic/division.json | 71 + .../30-arithmetic/exponents-and-roots.json | 58 + .../30-arithmetic/factors.json | 97 + .../30-arithmetic/fractions.json | 136 + .../30-arithmetic/integer-operations.json | 149 + .../30-arithmetic/long-division.json | 71 + .../30-arithmetic/multiplication.json | 136 + .../multiplying-and-dividing-decimals.json | 58 + .../multiplying-and-dividing-fractions.json | 162 + .../30-arithmetic/order-of-operations.json | 123 + .../30-arithmetic/percentages.json | 110 + .../30-arithmetic/powers-of-ten.json | 58 + .../rational-and-irrational-numbers.json | 97 + .../math-challenges/30-arithmetic/ratios.json | 71 + .../30-arithmetic/round-decimals.json | 32 + .../algebra-expressions-and-variables.json | 84 + seed/math-challenges/31-algebra/integers.json | 71 + ...properties-and-axioms-of-real-numbers.json | 136 + ...real-number-variables-and-expressions.json | 32 + .../31-algebra/simplifying-expressions.json | 58 + .../31-algebra/the-order-of-operations.json | 71 + ...-and-subtracting-rational-expressions.json | 45 + .../32-linear-equations/basic-equations.json | 97 + .../direct-variations.json | 45 + .../distance-rate-and-time.json | 97 + ...xponential-growth-and-decay-functions.json | 110 + .../exponents-and-irrational-numbers.json | 58 + .../functions-and-function-notation.json | 97 + .../graphing-in-the-coordinate-plane.json | 123 + .../graphing-linear-equations.json | 97 + .../graphing-polynomials.json | 58 + .../graphing-quadratic-functions.json | 71 + .../32-linear-equations/graphing-slope.json | 58 + .../introduction-to-polynomials.json | 45 + .../introduction-to-rational-expressions.json | 58 + ...erse-variation-and-rational-functions.json | 149 + .../linear-equations-in-the-real-world.json | 58 + ...near-exponential-and-quadratic-models.json | 58 + .../linear-inequalities.json | 162 + .../32-linear-equations/linear-systems.json | 58 + .../32-linear-equations/logarithms.json | 110 + .../32-linear-equations/matrix-algebra.json | 97 + .../32-linear-equations/matrix-equations.json | 110 + .../multi-step-equations.json | 123 + ...ing-and-dividing-rational-expressions.json | 58 + .../one-step-equations.json | 84 + .../parallel-and-perpendicular-lines.json | 58 + .../32-linear-equations/percentages.json | 58 + .../polynomial-division.json | 71 + .../polynomial-factoring.json | 32 + .../polynomial-multiplication.json | 58 + .../polynomial-special-products.json | 58 + ...-of-exponents-in-variable-expressions.json | 58 + .../proportion-and-scale.json | 45 + .../32-linear-equations/proportions.json | 58 + .../quadratic-expressions.json | 84 + .../radical-equations.json | 123 + .../radical-expressions.json | 71 + .../solving-linear-systems.json | 136 + .../solving-quadratic-equations.json | 136 + ...olving-systems-of-linear-inequalities.json | 84 + .../the-equation-of-a-line.json | 97 + .../the-forms-of-a-linear-equation.json | 58 + .../the-pythagorean-theorem.json | 97 + .../two-step-equations.json | 97 + .../33-geometry/angle-pairs.json | 71 + seed/math-challenges/33-geometry/angles.json | 84 + .../33-geometry/arcs-and-chords.json | 71 + .../33-geometry/area-of-a-circle.json | 45 + .../33-geometry/basic-polygons.json | 45 + .../basic-squares-and-rectangles.json | 84 + .../33-geometry/circles-and-angles.json | 58 + .../33-geometry/classifying-triangles.json | 71 + .../composition-of-transformations.json | 45 + seed/math-challenges/33-geometry/cones.json | 45 + ...ctions-and-basic-solids-of-revolution.json | 45 + .../33-geometry/cylinders.json | 58 + .../math-challenges/33-geometry/dilation.json | 58 + .../33-geometry/geometry-of-circles.json | 71 + .../33-geometry/geometry-proofs.json | 97 + .../introduction-to-solid-figures.json | 71 + .../introduction-to-transformation.json | 19 + .../33-geometry/line-segments.json | 58 + .../lines-in-the-coordinate-plane.json | 45 + seed/math-challenges/33-geometry/lines.json | 32 + .../33-geometry/logic-statements.json | 71 + .../33-geometry/polygon-angle-measures.json | 45 + .../math-challenges/33-geometry/polygons.json | 84 + seed/math-challenges/33-geometry/prisms.json | 84 + .../33-geometry/properties-and-proofs.json | 97 + .../math-challenges/33-geometry/pyramids.json | 32 + .../33-geometry/pythagorean-theorem.json | 136 + .../33-geometry/quadrilaterals.json | 175 + .../33-geometry/reflections.json | 45 + .../33-geometry/rotations.json | 32 + seed/math-challenges/33-geometry/shapes.json | 58 + .../33-geometry/similarity.json | 84 + .../33-geometry/special-triangles.json | 58 + seed/math-challenges/33-geometry/spheres.json | 45 + .../math-challenges/33-geometry/symmetry.json | 45 + .../tangent-lines-and-theorems.json | 58 + .../33-geometry/the-distance-formula.json | 84 + .../33-geometry/translations.json | 58 + .../33-geometry/transversals.json | 84 + .../triangle-area-and-perimeter.json | 45 + .../33-geometry/triangle-congruency.json | 110 + .../33-geometry/triangle-proportionality.json | 71 + .../33-geometry/triangle-relationships.json | 149 + .../33-geometry/triangle-similarity.json | 45 + .../area-of-non-right-triangles.json | 71 + .../basic-trig-identity-applications.json | 110 + .../double-and-half-angle-identities.json | 84 + .../introduction-to-trigonometry.json | 162 + .../inverse-trigonometric-functions.json | 84 + .../non-right-triangle-trigonometry.json | 136 + ...ar-curves-and-rectangular-conversions.json | 84 + .../34-trigonometry/radians.json | 110 + .../sine-and-cosine-graphs.json | 123 + .../six-trig-function-graphs.json | 84 + .../34-trigonometry/solving-triangles.json | 97 + .../sum-and-difference-identities.json | 110 + ...-to-product-and-triple-angle-formulas.json | 45 + ...-polar-coordinate-system-and-graphing.json | 71 + .../34-trigonometry/trig-functions.json | 97 + .../trig-in-the-unit-circle.json | 136 + .../trigonometric-identities.json | 84 + .../introduction-to-complex-numbers.json | 162 + .../36-precalculus/analytic-geometry.json | 97 + .../36-precalculus/analytic-trigonometry.json | 71 + ...exponential-and-logarithmic-functions.json | 71 + .../36-precalculus/functions.json | 136 + .../36-precalculus/fundamentals.json | 136 + .../polar-coordinates-and-vectors.json | 84 + .../polynomial-and-rational-functions.json | 84 + .../36-precalculus/sequences-and-series.json | 71 + ...systems-of-equations-and-inequalities.json | 123 + .../trigonometric-functions-of-angles.json | 71 + ...igonometric-functions-of-real-numbers.json | 58 + .../applications-of-differentiation.json | 97 + .../applications-of-integration.json | 58 + .../differential-equations.json | 71 + .../differentiation.json | 136 + .../functions-and-models.json | 71 + .../further-applications-of-integration.json | 58 + .../infinite-sequences-and-series.json | 149 + .../integrals.json | 71 + .../limits-and-derivatives.json | 97 + .../parametric-equations.json | 32 + .../polar-coordinates.json | 32 + .../techniques-of-integration.json | 97 + .../multiple-integrals.json | 136 + .../partial-derivatives.json | 110 + .../second-order-differential-equations.json | 58 + .../vector-calculus.json | 123 + .../vector-functions.json | 58 + .../vectors-and-the-geometry-of-space.json | 84 + .../39-linear-algebra/determinants.json | 32 + .../39-linear-algebra/eigenvalues.json | 45 + .../linear-transformations.json | 58 + .../39-linear-algebra/matrices.json | 84 + .../39-linear-algebra/representations.json | 58 + .../systems-of-linear-equations.json | 84 + .../39-linear-algebra/vector-spaces.json | 84 + .../39-linear-algebra/vectors.json | 84 + ...ary-value-problems-and-fourier-series.json | 97 + .../first-order-differential-equations.json | 123 + .../higher-order-differential-equations.json | 97 + ...ntroduction-to-differential-equations.json | 32 + .../laplace-transforms.json | 136 + .../partial-differential-equations.json | 123 + .../second-order-differential-equations.json | 149 + .../series-solutions.json | 32 + .../systems-of-differential-equations.json | 110 + .../41-proofs/cardinality-of-sets.json | 58 + .../41-proofs/contrapositive-proof.json | 45 + seed/math-challenges/41-proofs/counting.json | 71 + .../41-proofs/direct-proof.json | 71 + seed/math-challenges/41-proofs/disproof.json | 45 + seed/math-challenges/41-proofs/functions.json | 84 + seed/math-challenges/41-proofs/logic.json | 136 + .../41-proofs/mathematical-induction.json | 45 + .../41-proofs/proof-by-contradiction.json | 45 + .../41-proofs/proofs-involving-sets.json | 58 + .../proving-non-conditional-statements.json | 58 + seed/math-challenges/41-proofs/relations.json | 71 + seed/math-challenges/41-proofs/sets.json | 136 + .../covering-circuits-and-graph-coloring.json | 58 + .../elements-of-graph-theory.json | 58 + .../42-combinatorics/games-with-graphs.json | 32 + .../42-combinatorics/general-enumeration.json | 71 + .../generating-functions.json | 58 + .../42-combinatorics/inclusion-exclusion.json | 45 + .../42-combinatorics/network-algorithms.json | 71 + .../polya-enumeration-formula.json | 58 + .../recurrence-relations.json | 71 + .../42-combinatorics/trees-and-searching.json | 58 + .../algebraic-coding-theory.json | 58 + .../cosets-and-lagrange-theorem.json | 45 + .../43-abstract-algebra/cyclic-groups.json | 45 + .../43-abstract-algebra/fields.json | 45 + .../43-abstract-algebra/finite-fields.json | 32 + .../43-abstract-algebra/galois-theory.json | 45 + .../43-abstract-algebra/group-actions.json | 45 + .../43-abstract-algebra/groups.json | 45 + .../43-abstract-algebra/homomorphisms.json | 32 + .../43-abstract-algebra/integers.json | 32 + .../43-abstract-algebra/integral-domains.json | 32 + .../intro-to-cryptography.json | 32 + .../43-abstract-algebra/isomorphisms.json | 32 + .../lattices-and-boolean-algebras.json | 45 + .../matrix-group-and-symmetry.json | 32 + .../normal-subgroups-and-factor-groups.json | 32 + .../permutation-groups.json | 32 + .../43-abstract-algebra/polynomials.json | 45 + .../43-abstract-algebra/preliminaries.json | 19 + .../43-abstract-algebra/rings.json | 58 + .../structure-of-groups.json | 32 + .../the-sylow-theorems.json | 32 + .../44-number-theory/abelian-groups.json | 84 + .../algorithms-for-finite-fields.json | 84 + .../basic-properties-of-integers.json | 45 + .../computing-with-large-integers.json | 71 + .../44-number-theory/congruences.json | 110 + .../deterministic-primality-testing.json | 32 + .../distribution-of-primes.json | 71 + .../44-number-theory/euclid-algorithm.json | 97 + ...ors-and-discrete-logarithms-in-zpstar.json | 45 + ...nd-discrete-probability-distributions.json | 136 + .../44-number-theory/finite-fields.json | 58 + ...-generated-sequences-and-applications.json | 84 + .../44-number-theory/matrices.json | 71 + .../modules-and-vector-spaces.json | 71 + .../44-number-theory/more-rings.json | 123 + ...olynomial-arithmetic-and-applications.json | 84 + .../probabilistic-algorithms.json | 97 + .../probabilistic-primary-testing.json | 58 + ...ty-and-computing-modular-square-roots.json | 84 + .../44-number-theory/rings.json | 71 + ...ime-discrete-logarithms-and-factoring.json | 45 + ...ms-for-the-discrete-logarithm-problem.json | 58 + .../45-cryptography/block-ciphers.json | 84 + .../45-cryptography/copyright-protection.json | 58 + .../45-cryptography/cryptanalysis.json | 71 + .../differential-cryptanalysis.json | 97 + ...rete-logarithm-algorithms-in-practice.json | 19 + .../45-cryptography/elliptic-curves.json | 71 + .../45-cryptography/factoring-algorithms.json | 58 + .../45-cryptography/finite-fields.json | 19 + .../45-cryptography/future-of-pki.json | 45 + .../45-cryptography/genetic-algorithms.json | 19 + .../45-cryptography/hash-functions.json | 123 + ...ion-schemes-and-entity-authentication.json | 162 + ...troduction-to-public-key-cryptography.json | 19 + .../key-agreement-schemes.json | 136 + .../key-distribution-patterns.json | 32 + .../45-cryptography/key-distribution.json | 58 + .../message-authentication-codes-mac.json | 32 + .../45-cryptography/more-number-theory.json | 32 + .../45-cryptography/multicast-security.json | 97 + .../45-cryptography/other-attacks-on-rsa.json | 45 + .../45-cryptography/primality-testing.json | 58 + .../pseudo-random-number-generation.json | 97 + ...-cryptography-and-discrete-logarithms.json | 19 + .../public-key-infrastructure.json | 58 + .../45-cryptography/rabin-cryptosystem.json | 19 + ...a-cryptosystem-and-factoring-integers.json | 19 + .../45-cryptography/rsa-cryptosystem.json | 19 + .../secret-sharing-schemes.json | 123 + .../security-of-elgamal-systems.json | 45 + .../semantic-security-of-rsa.json | 32 + .../session-key-distribution-schemes.json | 58 + .../45-cryptography/shannons-theory.json | 110 + .../45-cryptography/signature-schemes.json | 175 + .../45-cryptography/simple-cryptosystems.json | 97 + .../45-cryptography/trust-models.json | 58 + .../unconditionally-secure-macs.json | 32 + .../chi-square-distribution.json | 45 + .../46-statistics/confidence-intervals.json | 71 + .../continuous-random-variables.json | 45 + seed/math-challenges/46-statistics/data.json | 58 + .../46-statistics/descriptive-statistics.json | 58 + .../46-statistics/discrete-distributions.json | 58 + ...ing-single-mean-and-single-proportion.json | 123 + .../linear-regression-and-correlation.json | 84 + .../46-statistics/probability.json | 45 + .../the-central-limit-theorem.json | 45 + .../the-normal-distribution.json | 45 + .../47-probability/central-limit-theorem.json | 45 + .../47-probability/combinatorics.json | 45 + .../conditional-probability.json | 45 + .../continuous-probability-densities.json | 32 + .../discrete-probability-distributions.json | 32 + .../distributions-and-densities.json | 32 + .../expected-value-and-variance.json | 45 + .../47-probability/generating-functions.json | 45 + .../47-probability/law-of-large-numbers.json | 32 + .../47-probability/markov-chains.json | 71 + .../47-probability/random-walks.json | 45 + .../sums-of-random-variables.json | 32 + 356 files changed, 85679 insertions(+) create mode 100644 seed/math-challenges/00-getting-started/getting-started.json create mode 100644 seed/math-challenges/01-responsive-web-design/applied-accessibility.json create mode 100644 seed/math-challenges/01-responsive-web-design/applied-visual-design.json create mode 100644 seed/math-challenges/01-responsive-web-design/basic-css.json create mode 100644 seed/math-challenges/01-responsive-web-design/basic-html-and-html5.json create mode 100644 seed/math-challenges/01-responsive-web-design/claim-your-responsive-web-design-certificate.json create mode 100644 seed/math-challenges/01-responsive-web-design/css-flexbox.json create mode 100644 seed/math-challenges/01-responsive-web-design/responsive-web-design-projects.json create mode 100644 seed/math-challenges/01-responsive-web-design/responsive-web-design.json create mode 100644 seed/math-challenges/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting.json create mode 100644 seed/math-challenges/02-javascript-algorithms-and-data-structures/basic-data-structures.json create mode 100644 seed/math-challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json create mode 100644 seed/math-challenges/02-javascript-algorithms-and-data-structures/claim-your-javascript-algorithms-and-data-structures.json create mode 100644 seed/math-challenges/02-javascript-algorithms-and-data-structures/debugging.json create mode 100644 seed/math-challenges/02-javascript-algorithms-and-data-structures/es6.json create mode 100644 seed/math-challenges/02-javascript-algorithms-and-data-structures/functional-programming.json create mode 100644 seed/math-challenges/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.json create mode 100644 seed/math-challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json create mode 100644 seed/math-challenges/02-javascript-algorithms-and-data-structures/regular-expressions.json create mode 100644 seed/math-challenges/03-front-end-libraries/bootstrap.json create mode 100644 seed/math-challenges/03-front-end-libraries/claim-your-front-end-libraries-certificate.json create mode 100644 seed/math-challenges/03-front-end-libraries/front-end-libraries-projects.json create mode 100644 seed/math-challenges/03-front-end-libraries/jquery.json create mode 100644 seed/math-challenges/03-front-end-libraries/react-and-redux.json create mode 100644 seed/math-challenges/03-front-end-libraries/react.json create mode 100644 seed/math-challenges/03-front-end-libraries/redux.json create mode 100644 seed/math-challenges/03-front-end-libraries/sass.json create mode 100644 seed/math-challenges/04-data-visualization/claim-your-data-visualization-certificate.json create mode 100644 seed/math-challenges/04-data-visualization/data-visualization-projects.json create mode 100644 seed/math-challenges/04-data-visualization/data-visualization-with-d3.json create mode 100644 seed/math-challenges/04-data-visualization/json-apis-and-ajax.json create mode 100644 seed/math-challenges/05-apis-and-microservices/api-and-microservice-projects.json create mode 100644 seed/math-challenges/05-apis-and-microservices/basic-node-and-express.json create mode 100644 seed/math-challenges/05-apis-and-microservices/claim-your-apis-and-microservices-certificate.json create mode 100644 seed/math-challenges/05-apis-and-microservices/managing-packages-with-npm.json create mode 100644 seed/math-challenges/05-apis-and-microservices/mongodb-and-mongoose.json create mode 100644 seed/math-challenges/06-information-security-and-quality-assurance/advanced-express-tools.json create mode 100644 seed/math-challenges/06-information-security-and-quality-assurance/claim-your-information-security-and-quality-assurance-certificate.json create mode 100644 seed/math-challenges/06-information-security-and-quality-assurance/information-security-with-helmetjs.json create mode 100644 seed/math-challenges/06-information-security-and-quality-assurance/quality-assurance-and-information-security-projects.json create mode 100644 seed/math-challenges/06-information-security-and-quality-assurance/quality-assurance-and-testing-with-chai.json create mode 100644 seed/math-challenges/07-contribute-to-open-source-and-help-nonprofits/contribute-to-open-source-and-help-nonprofits.json create mode 100644 seed/math-challenges/08-coding-interview-questions-and-take-home-assignments/coding-interview-algorithm-questions.json create mode 100644 seed/math-challenges/08-coding-interview-questions-and-take-home-assignments/coding-interview-data-structure-questions.json create mode 100644 seed/math-challenges/08-coding-interview-questions-and-take-home-assignments/javascript-multiple-choice-questions.json create mode 100644 seed/math-challenges/08-coding-interview-questions-and-take-home-assignments/project-euler-problems.json create mode 100644 seed/math-challenges/08-coding-interview-questions-and-take-home-assignments/take-home-interview-projects.json create mode 100644 seed/math-challenges/30-arithmetic/adding-and-subtracting-decimals.json create mode 100644 seed/math-challenges/30-arithmetic/adding-and-subtracting-fractions.json create mode 100644 seed/math-challenges/30-arithmetic/adding-and-subtracting-mixed-numbers.json create mode 100644 seed/math-challenges/30-arithmetic/additon-and-subtraction.json create mode 100644 seed/math-challenges/30-arithmetic/basic-decimals.json create mode 100644 seed/math-challenges/30-arithmetic/basic-place-value.json create mode 100644 seed/math-challenges/30-arithmetic/compare-decimals.json create mode 100644 seed/math-challenges/30-arithmetic/converting-decimals.json create mode 100644 seed/math-challenges/30-arithmetic/converting-fractions.json create mode 100644 seed/math-challenges/30-arithmetic/converting-percentages.json create mode 100644 seed/math-challenges/30-arithmetic/division.json create mode 100644 seed/math-challenges/30-arithmetic/exponents-and-roots.json create mode 100644 seed/math-challenges/30-arithmetic/factors.json create mode 100644 seed/math-challenges/30-arithmetic/fractions.json create mode 100644 seed/math-challenges/30-arithmetic/integer-operations.json create mode 100644 seed/math-challenges/30-arithmetic/long-division.json create mode 100644 seed/math-challenges/30-arithmetic/multiplication.json create mode 100644 seed/math-challenges/30-arithmetic/multiplying-and-dividing-decimals.json create mode 100644 seed/math-challenges/30-arithmetic/multiplying-and-dividing-fractions.json create mode 100644 seed/math-challenges/30-arithmetic/order-of-operations.json create mode 100644 seed/math-challenges/30-arithmetic/percentages.json create mode 100644 seed/math-challenges/30-arithmetic/powers-of-ten.json create mode 100644 seed/math-challenges/30-arithmetic/rational-and-irrational-numbers.json create mode 100644 seed/math-challenges/30-arithmetic/ratios.json create mode 100644 seed/math-challenges/30-arithmetic/round-decimals.json create mode 100644 seed/math-challenges/31-algebra/algebra-expressions-and-variables.json create mode 100644 seed/math-challenges/31-algebra/integers.json create mode 100644 seed/math-challenges/31-algebra/properties-and-axioms-of-real-numbers.json create mode 100644 seed/math-challenges/31-algebra/real-number-variables-and-expressions.json create mode 100644 seed/math-challenges/31-algebra/simplifying-expressions.json create mode 100644 seed/math-challenges/31-algebra/the-order-of-operations.json create mode 100644 seed/math-challenges/32-linear-equations/adding-and-subtracting-rational-expressions.json create mode 100644 seed/math-challenges/32-linear-equations/basic-equations.json create mode 100644 seed/math-challenges/32-linear-equations/direct-variations.json create mode 100644 seed/math-challenges/32-linear-equations/distance-rate-and-time.json create mode 100644 seed/math-challenges/32-linear-equations/exponential-growth-and-decay-functions.json create mode 100644 seed/math-challenges/32-linear-equations/exponents-and-irrational-numbers.json create mode 100644 seed/math-challenges/32-linear-equations/functions-and-function-notation.json create mode 100644 seed/math-challenges/32-linear-equations/graphing-in-the-coordinate-plane.json create mode 100644 seed/math-challenges/32-linear-equations/graphing-linear-equations.json create mode 100644 seed/math-challenges/32-linear-equations/graphing-polynomials.json create mode 100644 seed/math-challenges/32-linear-equations/graphing-quadratic-functions.json create mode 100644 seed/math-challenges/32-linear-equations/graphing-slope.json create mode 100644 seed/math-challenges/32-linear-equations/introduction-to-polynomials.json create mode 100644 seed/math-challenges/32-linear-equations/introduction-to-rational-expressions.json create mode 100644 seed/math-challenges/32-linear-equations/inverse-variation-and-rational-functions.json create mode 100644 seed/math-challenges/32-linear-equations/linear-equations-in-the-real-world.json create mode 100644 seed/math-challenges/32-linear-equations/linear-exponential-and-quadratic-models.json create mode 100644 seed/math-challenges/32-linear-equations/linear-inequalities.json create mode 100644 seed/math-challenges/32-linear-equations/linear-systems.json create mode 100644 seed/math-challenges/32-linear-equations/logarithms.json create mode 100644 seed/math-challenges/32-linear-equations/matrix-algebra.json create mode 100644 seed/math-challenges/32-linear-equations/matrix-equations.json create mode 100644 seed/math-challenges/32-linear-equations/multi-step-equations.json create mode 100644 seed/math-challenges/32-linear-equations/multiplying-and-dividing-rational-expressions.json create mode 100644 seed/math-challenges/32-linear-equations/one-step-equations.json create mode 100644 seed/math-challenges/32-linear-equations/parallel-and-perpendicular-lines.json create mode 100644 seed/math-challenges/32-linear-equations/percentages.json create mode 100644 seed/math-challenges/32-linear-equations/polynomial-division.json create mode 100644 seed/math-challenges/32-linear-equations/polynomial-factoring.json create mode 100644 seed/math-challenges/32-linear-equations/polynomial-multiplication.json create mode 100644 seed/math-challenges/32-linear-equations/polynomial-special-products.json create mode 100644 seed/math-challenges/32-linear-equations/properties-of-exponents-in-variable-expressions.json create mode 100644 seed/math-challenges/32-linear-equations/proportion-and-scale.json create mode 100644 seed/math-challenges/32-linear-equations/proportions.json create mode 100644 seed/math-challenges/32-linear-equations/quadratic-expressions.json create mode 100644 seed/math-challenges/32-linear-equations/radical-equations.json create mode 100644 seed/math-challenges/32-linear-equations/radical-expressions.json create mode 100644 seed/math-challenges/32-linear-equations/solving-linear-systems.json create mode 100644 seed/math-challenges/32-linear-equations/solving-quadratic-equations.json create mode 100644 seed/math-challenges/32-linear-equations/solving-systems-of-linear-inequalities.json create mode 100644 seed/math-challenges/32-linear-equations/the-equation-of-a-line.json create mode 100644 seed/math-challenges/32-linear-equations/the-forms-of-a-linear-equation.json create mode 100644 seed/math-challenges/32-linear-equations/the-pythagorean-theorem.json create mode 100644 seed/math-challenges/32-linear-equations/two-step-equations.json create mode 100644 seed/math-challenges/33-geometry/angle-pairs.json create mode 100644 seed/math-challenges/33-geometry/angles.json create mode 100644 seed/math-challenges/33-geometry/arcs-and-chords.json create mode 100644 seed/math-challenges/33-geometry/area-of-a-circle.json create mode 100644 seed/math-challenges/33-geometry/basic-polygons.json create mode 100644 seed/math-challenges/33-geometry/basic-squares-and-rectangles.json create mode 100644 seed/math-challenges/33-geometry/circles-and-angles.json create mode 100644 seed/math-challenges/33-geometry/classifying-triangles.json create mode 100644 seed/math-challenges/33-geometry/composition-of-transformations.json create mode 100644 seed/math-challenges/33-geometry/cones.json create mode 100644 seed/math-challenges/33-geometry/cross-sections-and-basic-solids-of-revolution.json create mode 100644 seed/math-challenges/33-geometry/cylinders.json create mode 100644 seed/math-challenges/33-geometry/dilation.json create mode 100644 seed/math-challenges/33-geometry/geometry-of-circles.json create mode 100644 seed/math-challenges/33-geometry/geometry-proofs.json create mode 100644 seed/math-challenges/33-geometry/introduction-to-solid-figures.json create mode 100644 seed/math-challenges/33-geometry/introduction-to-transformation.json create mode 100644 seed/math-challenges/33-geometry/line-segments.json create mode 100644 seed/math-challenges/33-geometry/lines-in-the-coordinate-plane.json create mode 100644 seed/math-challenges/33-geometry/lines.json create mode 100644 seed/math-challenges/33-geometry/logic-statements.json create mode 100644 seed/math-challenges/33-geometry/polygon-angle-measures.json create mode 100644 seed/math-challenges/33-geometry/polygons.json create mode 100644 seed/math-challenges/33-geometry/prisms.json create mode 100644 seed/math-challenges/33-geometry/properties-and-proofs.json create mode 100644 seed/math-challenges/33-geometry/pyramids.json create mode 100644 seed/math-challenges/33-geometry/pythagorean-theorem.json create mode 100644 seed/math-challenges/33-geometry/quadrilaterals.json create mode 100644 seed/math-challenges/33-geometry/reflections.json create mode 100644 seed/math-challenges/33-geometry/rotations.json create mode 100644 seed/math-challenges/33-geometry/shapes.json create mode 100644 seed/math-challenges/33-geometry/similarity.json create mode 100644 seed/math-challenges/33-geometry/special-triangles.json create mode 100644 seed/math-challenges/33-geometry/spheres.json create mode 100644 seed/math-challenges/33-geometry/symmetry.json create mode 100644 seed/math-challenges/33-geometry/tangent-lines-and-theorems.json create mode 100644 seed/math-challenges/33-geometry/the-distance-formula.json create mode 100644 seed/math-challenges/33-geometry/translations.json create mode 100644 seed/math-challenges/33-geometry/transversals.json create mode 100644 seed/math-challenges/33-geometry/triangle-area-and-perimeter.json create mode 100644 seed/math-challenges/33-geometry/triangle-congruency.json create mode 100644 seed/math-challenges/33-geometry/triangle-proportionality.json create mode 100644 seed/math-challenges/33-geometry/triangle-relationships.json create mode 100644 seed/math-challenges/33-geometry/triangle-similarity.json create mode 100644 seed/math-challenges/34-trigonometry/area-of-non-right-triangles.json create mode 100644 seed/math-challenges/34-trigonometry/basic-trig-identity-applications.json create mode 100644 seed/math-challenges/34-trigonometry/double-and-half-angle-identities.json create mode 100644 seed/math-challenges/34-trigonometry/introduction-to-trigonometry.json create mode 100644 seed/math-challenges/34-trigonometry/inverse-trigonometric-functions.json create mode 100644 seed/math-challenges/34-trigonometry/non-right-triangle-trigonometry.json create mode 100644 seed/math-challenges/34-trigonometry/polar-curves-and-rectangular-conversions.json create mode 100644 seed/math-challenges/34-trigonometry/radians.json create mode 100644 seed/math-challenges/34-trigonometry/sine-and-cosine-graphs.json create mode 100644 seed/math-challenges/34-trigonometry/six-trig-function-graphs.json create mode 100644 seed/math-challenges/34-trigonometry/solving-triangles.json create mode 100644 seed/math-challenges/34-trigonometry/sum-and-difference-identities.json create mode 100644 seed/math-challenges/34-trigonometry/sum-to-product-and-triple-angle-formulas.json create mode 100644 seed/math-challenges/34-trigonometry/the-polar-coordinate-system-and-graphing.json create mode 100644 seed/math-challenges/34-trigonometry/trig-functions.json create mode 100644 seed/math-challenges/34-trigonometry/trig-in-the-unit-circle.json create mode 100644 seed/math-challenges/34-trigonometry/trigonometric-identities.json create mode 100644 seed/math-challenges/35-complex-numbers/introduction-to-complex-numbers.json create mode 100644 seed/math-challenges/36-precalculus/analytic-geometry.json create mode 100644 seed/math-challenges/36-precalculus/analytic-trigonometry.json create mode 100644 seed/math-challenges/36-precalculus/exponential-and-logarithmic-functions.json create mode 100644 seed/math-challenges/36-precalculus/functions.json create mode 100644 seed/math-challenges/36-precalculus/fundamentals.json create mode 100644 seed/math-challenges/36-precalculus/polar-coordinates-and-vectors.json create mode 100644 seed/math-challenges/36-precalculus/polynomial-and-rational-functions.json create mode 100644 seed/math-challenges/36-precalculus/sequences-and-series.json create mode 100644 seed/math-challenges/36-precalculus/systems-of-equations-and-inequalities.json create mode 100644 seed/math-challenges/36-precalculus/trigonometric-functions-of-angles.json create mode 100644 seed/math-challenges/36-precalculus/trigonometric-functions-of-real-numbers.json create mode 100644 seed/math-challenges/37-single-variable-calculus/applications-of-differentiation.json create mode 100644 seed/math-challenges/37-single-variable-calculus/applications-of-integration.json create mode 100644 seed/math-challenges/37-single-variable-calculus/differential-equations.json create mode 100644 seed/math-challenges/37-single-variable-calculus/differentiation.json create mode 100644 seed/math-challenges/37-single-variable-calculus/functions-and-models.json create mode 100644 seed/math-challenges/37-single-variable-calculus/further-applications-of-integration.json create mode 100644 seed/math-challenges/37-single-variable-calculus/infinite-sequences-and-series.json create mode 100644 seed/math-challenges/37-single-variable-calculus/integrals.json create mode 100644 seed/math-challenges/37-single-variable-calculus/limits-and-derivatives.json create mode 100644 seed/math-challenges/37-single-variable-calculus/parametric-equations.json create mode 100644 seed/math-challenges/37-single-variable-calculus/polar-coordinates.json create mode 100644 seed/math-challenges/37-single-variable-calculus/techniques-of-integration.json create mode 100644 seed/math-challenges/38-multivariable-calculus/multiple-integrals.json create mode 100644 seed/math-challenges/38-multivariable-calculus/partial-derivatives.json create mode 100644 seed/math-challenges/38-multivariable-calculus/second-order-differential-equations.json create mode 100644 seed/math-challenges/38-multivariable-calculus/vector-calculus.json create mode 100644 seed/math-challenges/38-multivariable-calculus/vector-functions.json create mode 100644 seed/math-challenges/38-multivariable-calculus/vectors-and-the-geometry-of-space.json create mode 100644 seed/math-challenges/39-linear-algebra/determinants.json create mode 100644 seed/math-challenges/39-linear-algebra/eigenvalues.json create mode 100644 seed/math-challenges/39-linear-algebra/linear-transformations.json create mode 100644 seed/math-challenges/39-linear-algebra/matrices.json create mode 100644 seed/math-challenges/39-linear-algebra/representations.json create mode 100644 seed/math-challenges/39-linear-algebra/systems-of-linear-equations.json create mode 100644 seed/math-challenges/39-linear-algebra/vector-spaces.json create mode 100644 seed/math-challenges/39-linear-algebra/vectors.json create mode 100644 seed/math-challenges/40-differential-equations/boundary-value-problems-and-fourier-series.json create mode 100644 seed/math-challenges/40-differential-equations/first-order-differential-equations.json create mode 100644 seed/math-challenges/40-differential-equations/higher-order-differential-equations.json create mode 100644 seed/math-challenges/40-differential-equations/introduction-to-differential-equations.json create mode 100644 seed/math-challenges/40-differential-equations/laplace-transforms.json create mode 100644 seed/math-challenges/40-differential-equations/partial-differential-equations.json create mode 100644 seed/math-challenges/40-differential-equations/second-order-differential-equations.json create mode 100644 seed/math-challenges/40-differential-equations/series-solutions.json create mode 100644 seed/math-challenges/40-differential-equations/systems-of-differential-equations.json create mode 100644 seed/math-challenges/41-proofs/cardinality-of-sets.json create mode 100644 seed/math-challenges/41-proofs/contrapositive-proof.json create mode 100644 seed/math-challenges/41-proofs/counting.json create mode 100644 seed/math-challenges/41-proofs/direct-proof.json create mode 100644 seed/math-challenges/41-proofs/disproof.json create mode 100644 seed/math-challenges/41-proofs/functions.json create mode 100644 seed/math-challenges/41-proofs/logic.json create mode 100644 seed/math-challenges/41-proofs/mathematical-induction.json create mode 100644 seed/math-challenges/41-proofs/proof-by-contradiction.json create mode 100644 seed/math-challenges/41-proofs/proofs-involving-sets.json create mode 100644 seed/math-challenges/41-proofs/proving-non-conditional-statements.json create mode 100644 seed/math-challenges/41-proofs/relations.json create mode 100644 seed/math-challenges/41-proofs/sets.json create mode 100644 seed/math-challenges/42-combinatorics/covering-circuits-and-graph-coloring.json create mode 100644 seed/math-challenges/42-combinatorics/elements-of-graph-theory.json create mode 100644 seed/math-challenges/42-combinatorics/games-with-graphs.json create mode 100644 seed/math-challenges/42-combinatorics/general-enumeration.json create mode 100644 seed/math-challenges/42-combinatorics/generating-functions.json create mode 100644 seed/math-challenges/42-combinatorics/inclusion-exclusion.json create mode 100644 seed/math-challenges/42-combinatorics/network-algorithms.json create mode 100644 seed/math-challenges/42-combinatorics/polya-enumeration-formula.json create mode 100644 seed/math-challenges/42-combinatorics/recurrence-relations.json create mode 100644 seed/math-challenges/42-combinatorics/trees-and-searching.json create mode 100644 seed/math-challenges/43-abstract-algebra/algebraic-coding-theory.json create mode 100644 seed/math-challenges/43-abstract-algebra/cosets-and-lagrange-theorem.json create mode 100644 seed/math-challenges/43-abstract-algebra/cyclic-groups.json create mode 100644 seed/math-challenges/43-abstract-algebra/fields.json create mode 100644 seed/math-challenges/43-abstract-algebra/finite-fields.json create mode 100644 seed/math-challenges/43-abstract-algebra/galois-theory.json create mode 100644 seed/math-challenges/43-abstract-algebra/group-actions.json create mode 100644 seed/math-challenges/43-abstract-algebra/groups.json create mode 100644 seed/math-challenges/43-abstract-algebra/homomorphisms.json create mode 100644 seed/math-challenges/43-abstract-algebra/integers.json create mode 100644 seed/math-challenges/43-abstract-algebra/integral-domains.json create mode 100644 seed/math-challenges/43-abstract-algebra/intro-to-cryptography.json create mode 100644 seed/math-challenges/43-abstract-algebra/isomorphisms.json create mode 100644 seed/math-challenges/43-abstract-algebra/lattices-and-boolean-algebras.json create mode 100644 seed/math-challenges/43-abstract-algebra/matrix-group-and-symmetry.json create mode 100644 seed/math-challenges/43-abstract-algebra/normal-subgroups-and-factor-groups.json create mode 100644 seed/math-challenges/43-abstract-algebra/permutation-groups.json create mode 100644 seed/math-challenges/43-abstract-algebra/polynomials.json create mode 100644 seed/math-challenges/43-abstract-algebra/preliminaries.json create mode 100644 seed/math-challenges/43-abstract-algebra/rings.json create mode 100644 seed/math-challenges/43-abstract-algebra/structure-of-groups.json create mode 100644 seed/math-challenges/43-abstract-algebra/the-sylow-theorems.json create mode 100644 seed/math-challenges/44-number-theory/abelian-groups.json create mode 100644 seed/math-challenges/44-number-theory/algorithms-for-finite-fields.json create mode 100644 seed/math-challenges/44-number-theory/basic-properties-of-integers.json create mode 100644 seed/math-challenges/44-number-theory/computing-with-large-integers.json create mode 100644 seed/math-challenges/44-number-theory/congruences.json create mode 100644 seed/math-challenges/44-number-theory/deterministic-primality-testing.json create mode 100644 seed/math-challenges/44-number-theory/distribution-of-primes.json create mode 100644 seed/math-challenges/44-number-theory/euclid-algorithm.json create mode 100644 seed/math-challenges/44-number-theory/finding-generators-and-discrete-logarithms-in-zpstar.json create mode 100644 seed/math-challenges/44-number-theory/finite-and-discrete-probability-distributions.json create mode 100644 seed/math-challenges/44-number-theory/finite-fields.json create mode 100644 seed/math-challenges/44-number-theory/linearly-generated-sequences-and-applications.json create mode 100644 seed/math-challenges/44-number-theory/matrices.json create mode 100644 seed/math-challenges/44-number-theory/modules-and-vector-spaces.json create mode 100644 seed/math-challenges/44-number-theory/more-rings.json create mode 100644 seed/math-challenges/44-number-theory/polynomial-arithmetic-and-applications.json create mode 100644 seed/math-challenges/44-number-theory/probabilistic-algorithms.json create mode 100644 seed/math-challenges/44-number-theory/probabilistic-primary-testing.json create mode 100644 seed/math-challenges/44-number-theory/quadratic-reciprocity-and-computing-modular-square-roots.json create mode 100644 seed/math-challenges/44-number-theory/rings.json create mode 100644 seed/math-challenges/44-number-theory/subexponential-time-discrete-logarithms-and-factoring.json create mode 100644 seed/math-challenges/45-cryptography/algorithms-for-the-discrete-logarithm-problem.json create mode 100644 seed/math-challenges/45-cryptography/block-ciphers.json create mode 100644 seed/math-challenges/45-cryptography/copyright-protection.json create mode 100644 seed/math-challenges/45-cryptography/cryptanalysis.json create mode 100644 seed/math-challenges/45-cryptography/differential-cryptanalysis.json create mode 100644 seed/math-challenges/45-cryptography/discrete-logarithm-algorithms-in-practice.json create mode 100644 seed/math-challenges/45-cryptography/elliptic-curves.json create mode 100644 seed/math-challenges/45-cryptography/factoring-algorithms.json create mode 100644 seed/math-challenges/45-cryptography/finite-fields.json create mode 100644 seed/math-challenges/45-cryptography/future-of-pki.json create mode 100644 seed/math-challenges/45-cryptography/genetic-algorithms.json create mode 100644 seed/math-challenges/45-cryptography/hash-functions.json create mode 100644 seed/math-challenges/45-cryptography/identification-schemes-and-entity-authentication.json create mode 100644 seed/math-challenges/45-cryptography/introduction-to-public-key-cryptography.json create mode 100644 seed/math-challenges/45-cryptography/key-agreement-schemes.json create mode 100644 seed/math-challenges/45-cryptography/key-distribution-patterns.json create mode 100644 seed/math-challenges/45-cryptography/key-distribution.json create mode 100644 seed/math-challenges/45-cryptography/message-authentication-codes-mac.json create mode 100644 seed/math-challenges/45-cryptography/more-number-theory.json create mode 100644 seed/math-challenges/45-cryptography/multicast-security.json create mode 100644 seed/math-challenges/45-cryptography/other-attacks-on-rsa.json create mode 100644 seed/math-challenges/45-cryptography/primality-testing.json create mode 100644 seed/math-challenges/45-cryptography/pseudo-random-number-generation.json create mode 100644 seed/math-challenges/45-cryptography/public-key-cryptography-and-discrete-logarithms.json create mode 100644 seed/math-challenges/45-cryptography/public-key-infrastructure.json create mode 100644 seed/math-challenges/45-cryptography/rabin-cryptosystem.json create mode 100644 seed/math-challenges/45-cryptography/rsa-cryptosystem-and-factoring-integers.json create mode 100644 seed/math-challenges/45-cryptography/rsa-cryptosystem.json create mode 100644 seed/math-challenges/45-cryptography/secret-sharing-schemes.json create mode 100644 seed/math-challenges/45-cryptography/security-of-elgamal-systems.json create mode 100644 seed/math-challenges/45-cryptography/semantic-security-of-rsa.json create mode 100644 seed/math-challenges/45-cryptography/session-key-distribution-schemes.json create mode 100644 seed/math-challenges/45-cryptography/shannons-theory.json create mode 100644 seed/math-challenges/45-cryptography/signature-schemes.json create mode 100644 seed/math-challenges/45-cryptography/simple-cryptosystems.json create mode 100644 seed/math-challenges/45-cryptography/trust-models.json create mode 100644 seed/math-challenges/45-cryptography/unconditionally-secure-macs.json create mode 100644 seed/math-challenges/46-statistics/chi-square-distribution.json create mode 100644 seed/math-challenges/46-statistics/confidence-intervals.json create mode 100644 seed/math-challenges/46-statistics/continuous-random-variables.json create mode 100644 seed/math-challenges/46-statistics/data.json create mode 100644 seed/math-challenges/46-statistics/descriptive-statistics.json create mode 100644 seed/math-challenges/46-statistics/discrete-distributions.json create mode 100644 seed/math-challenges/46-statistics/hypothesis-testing-single-mean-and-single-proportion.json create mode 100644 seed/math-challenges/46-statistics/linear-regression-and-correlation.json create mode 100644 seed/math-challenges/46-statistics/probability.json create mode 100644 seed/math-challenges/46-statistics/the-central-limit-theorem.json create mode 100644 seed/math-challenges/46-statistics/the-normal-distribution.json create mode 100644 seed/math-challenges/47-probability/central-limit-theorem.json create mode 100644 seed/math-challenges/47-probability/combinatorics.json create mode 100644 seed/math-challenges/47-probability/conditional-probability.json create mode 100644 seed/math-challenges/47-probability/continuous-probability-densities.json create mode 100644 seed/math-challenges/47-probability/discrete-probability-distributions.json create mode 100644 seed/math-challenges/47-probability/distributions-and-densities.json create mode 100644 seed/math-challenges/47-probability/expected-value-and-variance.json create mode 100644 seed/math-challenges/47-probability/generating-functions.json create mode 100644 seed/math-challenges/47-probability/law-of-large-numbers.json create mode 100644 seed/math-challenges/47-probability/markov-chains.json create mode 100644 seed/math-challenges/47-probability/random-walks.json create mode 100644 seed/math-challenges/47-probability/sums-of-random-variables.json diff --git a/seed/math-challenges/00-getting-started/getting-started.json b/seed/math-challenges/00-getting-started/getting-started.json new file mode 100644 index 0000000000..a3a162e309 --- /dev/null +++ b/seed/math-challenges/00-getting-started/getting-started.json @@ -0,0 +1,1925 @@ +{ + "name": "Join the freeCodeCamp Community", + "order": 1, + "time": "15 minutes", + "helpRoom": "Help", + "challenges": [ + { + "id": "560add10cb82ac38a17513be", + "title": "Learn How freeCodeCamp Works", + "description": [ + [ + "//i.imgur.com/6ibIavQ.jpg", + "A picture of freeCodeCamp's 4 benefits: Get connected, Learn JavaScript, Build your Portfolio, Help nonprofits", + "Welcome to freeCodeCamp. We're an open source community that helps you learn to code, then practice by building projects for nonprofits.", + "" + ], + [ + "//i.imgur.com/Elb3dfj.jpg", + "A screenshot of some of our campers coding together in Toronto.", + "Learning to code is hard. To succeed, you'll need lots of practice and support. That's why we've created a rigorous curriculum and supportive community.", + "" + ], + [ + "//i.imgur.com/WD3STY6.jpg", + "Photos of three campers who got jobs after learning to code at freeCodeCamp.", + "freeCodeCamp is a proven path to your first software developer job. Companies have hired thousands of people like you who have learned to code through freeCodeCamp.", + "" + ], + [ + "//i.imgur.com/D7Y5luw.jpg", + "A graph of the rate of job growth against growth in computer science degree graduates. There are 1.4 million jobs and only 400 thousand people to fill them.", + "There are thousands of software developer jobs currently going unfilled, and the demand for coders grows every year.", + "" + ], + [ + "//i.imgur.com/vLNso6h.jpg", + "An illustration showing that you will learn HTML5, CSS3, JavaScript, Databases, Git, Node.js, React and D3.", + "We have hundreds of optional coding challenges that will teach you fundamental web development technologies like HTML5, Node.js and databases.", + "" + ], + [ + "//i.imgur.com/UVB9hxp.jpg", + "An image of a camper at a cafe building projects on freeCodeCamp.", + "We believe humans learn best by doing. So you'll spend most of your time actually building projects. We'll give you a list of specifications (agile user stories), and you'll figure out how to build apps that fulfill those specifications.", + "" + ], + [ + "//i.imgur.com/pbW7K5S.jpg", + "An image of showing our front end, back end, and data visualization certifications (400 hours each), our nonprofit projects (800 hours), and interview prep (80 hours) for a total of 2,080 hours of coding experience.", + "Our curriculum is divided into 4 certifications. These certifications are standardized, and instantly verifiable by your freelance clients and future employers. Like everything else at freeCodeCamp, these certifications are free. We recommend doing them in order, but you are free to jump around. The first three certifications take 400 hours each, and the final certification takes 800 hours, and involves building real-life projects for nonprofits.", + "" + ], + [ + "//i.imgur.com/akGfLoa.jpg", + "A screenshot of our Front End Development Certificate", + "To earn our verified Front End Development Certification, you'll build 10 projects using HTML, CSS, jQuery, and JavaScript.", + "" + ], + [ + "//i.imgur.com/ocEL0D3.jpg", + "A screenshot of our Data Visualization Certificate", + "To earn our Data Visualization Certification, you'll build 10 projects using React, Sass and D3.js.", + "" + ], + [ + "//i.imgur.com/8HCk1Od.jpg", + "A screenshot of our Back End Development Certificate", + "To earn our Back End Development Certification, you'll build 10 projects using Node.js, Express, and MongoDB. You'll use Git and Heroku to deploy them to the cloud.", + "" + ], + [ + "//i.imgur.com/yXyxbDd.jpg", + "A screen shot of our nonprofit project directory.", + "After you complete all three of these certificates, you'll team up with another camper and use agile software development methodologies to build two real-life projects for nonprofits. You'll also add functionality to two legacy code nonprofit projects. By the time you finish, you'll have a portfolio of real apps that people use every day.", + "" + ], + [ + "//i.imgur.com/PDGQ9ZM.jpg", + "An image of campers building projects together in a cafe in Seoul.", + "If you complete all 2,080 hours worth of challenges and projects, you'll earn our Full Stack Development Certification. We'll offer you free coding interview practice. We even offer a job board where employers specifically hire campers who've earned freeCodeCamp certifications.", + "" + ] + ], + "challengeSeed": [ + "function sym(args) {", + " return args;", + "}", + "", + "sym([1, 2, 3], [5, 2, 1, 4]);" + ], + "tests": [], + "type": "Waypoint", + "challengeType": 7, + "translations": { + "de": { + "title": "Lerne wie freeCodeCamp funktioniert", + "description": [ + [ + "//i.imgur.com/6ibIavQ.jpg", + "Ein Bild von den 4 Vorteilen von freeCodeCamp: Vernetz Dich, Lerne Javascript, Bau ein Portfolio auf, Hilf Non-Profit-Organisationen", + "Willkommen bei freeCodeCamp. Wir sind eine Open Source Gemeinschaft von motivierten Leuten, die programmieren lernen und Non-Profit-Organisationen helfen", + "" + ], + [ + "//i.imgur.com/Elb3dfj.jpg", + "Ein Screenshot von einigen unserer Camper beim gemeinsamen Programmieren in Toronto.", + "Programmieren zu lernen ist hart. Um erfolgreich zu sein brauchst du viel Übung und Unterstützung. Deswegen haben wir ein umfangreiches Curriculum und eine unterstützende Gemeinschaft geschaffen.", + "" + ], + [ + "//i.imgur.com/D7Y5luw.jpg", + "Ein Graph vom Verhältnis der Wachstumsrate von Jobs gegenüber der Abschlüsse von Informatik Studien. Es gibts 1,4 Millionen Jobs aber nur 400.000 Leute um diese zu füllen.", + "Es gibt tausende von unbesetzen Programmierjobs und die Nachfrage wächst jedes Jahr", + "" + ], + [ + "//i.imgur.com/WD3STY6.jpg", + "Foto von drei Campern die einen Job bekommen haben nachdem sie bei freeCodeCamp programmieren gelernt haben", + "freeCodeCamp ist ein sicherer Weg zu deinem ersten Programmierjob. Tatsächlich hat noch niemand unser komplettes Programm beendet, weil Campers bereits davor Jobs finden.", + "" + ], + [ + "//i.imgur.com/vLNso6h.jpg", + "Eine Illustration die zeigt dass du HTML5, CSS3, JavaScript, Datenbanken, Git, Node.js, React und D3 lernen wirst", + "Wir haben hunderte von optionalen Programmieraufgaben die dir die fundamentalen Webentwicklungstechnologien wie HTML5, Node.js und Datanbanken beibringen werden.", + "" + ], + [ + "//i.imgur.com/UVB9hxp.jpg", + "Ein Foto von einem Camper in einem Cafe der an freeCodeCamp Projekten arbeitet.", + "Wir glauben dass Menschen am Besten beim Tun lernen. Deswegen wirst du die meiste Zeit damit beschäftigt sein an tatsächlichen Projekten zu arbeiten. Wir werden dir eine Liste an Anforderungen (agile User Stories) geben und du wirst dich damit auseinander setzen diese zu erfüllen.", + "" + ], + [ + "//i.imgur.com/pbW7K5S.jpg", + "Ein Bild auf dem man unsere Frontend-, Backend- und Daten Visualisierungzertifikate (je 400 Stunden), unsere Non-Profit-Projekte (800 Stunden) und Bewerbungsgesprächsvorbereitung (80 Stunden) sieht mit einer Summe von 2080 Stunden Programmiererfahrung.", + "Unser Curriculum ist in 4 Zertifikate aufgeteilt. Diese Zertifikate sind standardisiert und jederzeit von deinen Kunden oder zukünftigen Arbeitgeber überprüfbar. Wie alles andere auch bei freeCodeCamp sind die Zertifikate gratis. Wir empfehlen sie in der vorgesehenen Reihenfolge zu machen, aber es steht dir offen frei zu wählen. Die ersten drei Zertifikate dauern jeweils 400 Stunden. Das letzte Zertifikat dauert 800 Stunden und beinhaltet die Umsetzung eines echten Projektes für eine Non-Profit-Organisation.", + "" + ], + [ + "//i.imgur.com/akGfLoa.jpg", + "Ein Screenshot von unserem Frontendzertifikat", + "Um sich unser geprüftes Frontend-Entwicklungszertifikat zu verdienen, wirst du 10 Projekte mit HTML, CSS, jQuery und Javascript umsetzen.", + "" + ], + [ + "//i.imgur.com/ocEL0D3.jpg", + "Ein Screenshot von unserem Datenvisualisierungszertifikat", + "Für unser Datenvisualisierungszertifikat, wirst du 10 Projekte mit React, Sass und D3.js umsetzen.", + "" + ], + [ + "//i.imgur.com/8HCk1Od.jpg", + "Ein Screenshot von unserem Backend-Entwicklungszertifikat", + "Um unser Backend-Entwicklungszertifikat zu erhalten, wirst du 10 Projekte mit Node.js, Express und MongoDB umsetzen. Du wirst Git und Heroku verwenden um sie in der Cloud zu veröffentlichen.", + "" + ], + [ + "//i.imgur.com/yXyxbDd.jpg", + "Ein Screenshot von unserem Non-Profit-Verzeichnis", + "Nachdem du alle drei von diesen Zertifikaten abgeschlossen hast, wirst du mit einem anderen Camper zusammen Methoden der agilen Softwareentwicklung verwenden und zwei echte Projekte für Non-Profit-Organisationen umsetzen. Außerdem wirst du zwei bereits existierende Non-Profit-Projekte um neue Funktionalität erweitern. Wenn du fertig bist, wirst du ein Portfolio mit zwei echten Apps besitzen, die täglich von Leuten genutzt werden.", + "" + ], + [ + "//i.imgur.com/PDGQ9ZM.jpg", + "Ein Foto von Campern die zusammen in einem Cafe in Seoul an einem Projekt arbeiten.", + "Wenn du alle 2080 Stunden an Aufgaben und Projekten absolviert hast, hast du dir unser Full Stack Development Zertifikat verdient. Wir bieten dir dann ein gratis Bewerbungstraining an. Außerdem haben wir eine Jobbörse, wo Arbeitsgeber Camper einstellen die freeCodeCamp Zertifikate erhalten haben.", + "" + ] + ] + }, + "es": { + "title": "Aprende como funciona freeCodeCamp", + "description": [ + [ + "//i.imgur.com/6ibIavQ.jpg", + "Una imagen de los 4 beneficios de freeCodeCamp: Conéctate, Aprende JavaScript, Construye tu Portafolio, Ayuda organizaciones sin ánimo de lucro", + "Bienvenido a freeCodeCamp. Somos una comunidad de código abierto formada por personas ocupadas quienes aprenden a programar y ayudan a organizaciones sin ánimo de lucro.", + "" + ], + [ + "//i.imgur.com/Elb3dfj.jpg", + "Una imagen de algunos de nuestros campistas programando juntos en Toronto.", + "Aprender a programar es difícil. Para tener éxito, necesitarás mucha práctica y apoyo. Por eso es que hemos creado un riguroso currículo y una comunidad de apoyo.", + "" + ], + [ + "//i.imgur.com/D7Y5luw.jpg", + "Una gráfica del crecimiento de trabajos en comparación con los graduados en un pregrado de ciencias de la computación. Hay 1.4 millones de empleos y solo 400 mil personas para ocuparlos.", + "Actualmente, hay miles de trabajos de programación sin ocupar, y la demanda de programadores crece cada año.", + "" + ], + [ + "//i.imgur.com/WD3STY6.jpg", + "Fotos de tres campistas quienes obtuvieron trabajos después de aprender a programar en freeCodeCamp.", + "freeCodeCamp es un camino probado para que obtengas tu primer trabajo de programación. De hecho, nadie actualmente ha completado nuestro programa entero, porque los campistas obtienen trabajos antes de poder hacerlo.", + "" + ], + [ + "//i.imgur.com/vLNso6h.jpg", + "Una ilustración mostrando que aprenderás HTML5, CSS3, JavaScript, Bases de Datos, Git, Node.js, react y D3.", + "Tenemos cientos de desafíos de programación opcionales que te enseñarán las tecnologías fundamentales para el desarrollo web como HTML5, Node.js y bases de datos.", + "" + ], + [ + "//i.imgur.com/UVB9hxp.jpg", + "Una foto de un campista en un café construyendo proyectos con freeCodeCamp.", + "Creemos que los humanos aprender mejor haciendo. Así que en realidad emplearás la mayoría de tu tiempo construyendo proyectos. Te daremos una lista de especificaciones (historias de usuario ágiles), y te las ingeniarás para construir aplicaciones que cumplan esas especificaciones.", + "" + ], + [ + "//i.imgur.com/pbW7K5S.jpgk", + "Una imagen de los tiempos de nuestras certificaciones para desarrollo de interfaces, desarrollo al lado del servidor y visualización de datos (400 horas cada uno), para nuestros proyectos sin ánimo de lucro (800 horas) y preparación para entrevistas (80 horas) que dan un total de 2,080 horas e experiencia programando.", + "Nuestro currículo se divide en 4 certificaciones. Estas certificaciones están estandarizadas, y son verificables al instante por sus clientes como trabajador independiente y por sus futuros empleadores. Tal como todo lo demás en freeCodeCamp, estas certificaciones son gratuitas. Recomendamos hacerlas en orden, pero usted es libre de saltar de una a otra. Las primeras tres certificaciones requieren 400 horas cada una, y la certificación final requiere 800 horas, e involucra construir proyectos de la vida real para organizaciones sin ánimo de lucro.", + "" + ], + [ + "//i.imgur.com/akGfLoa.jpg", + "Una imagen de nuestro Certificado de Desarrollo de Interfaces", + "Para obtener nuestra certificación verificada de Desarrollo de Interfaces, construirás 10 proyectos usando HTML, CSS, jQuery y JavaScript.", + "" + ], + [ + "//i.imgur.com/ocEL0D3.jpg", + "Una imagen de nuestro Certificado de Visualización de Datos", + "Para obtener nuestra certificación en Visualización de Datos, construirás 10 proyectos usando React, Sass y D3.js.", + "" + ], + [ + "//i.imgur.com/8HCk1Od.jpg", + "Una imagen de nuestro Certificado de Desarrollo al Lado del Servidor", + "Para obtener nuestro Certificado de Desarrollo al Lado del Servidor, construirás 10 proyectos empleando Node.js, Express y MongoDB. Usarás Git y Heroku para desplegarlos en la nube.", + "" + ], + [ + "//i.imgur.com/yXyxbDd.jpg", + "Una imagen de nuestro directorio de organizaciones sin ánimo de lucro.", + "Después de completar todos los tres certificados, harás equipo con otro campista y usarás metodologías de desarrollo ágil para construir dos proyectos de la vida real para organizaciones sin ánimo de lucro. También añadirás funcionalidad a dos proyectos de fuentes legadas de organizaciones sin ánimo de lucro. Cuando termines esto, tendrás un portafolio de aplicaciones reales que la gente usa a diario. ", + "" + ], + [ + "//i.imgur.com/PDGQ9ZM.jpg", + "Una imagen de nuestros campistas construyendo proyectos juntos en un café en Seoul.", + "Si completas todas las 2,080 horas de desafíos y proyectos, obtendrás un Certificado de Desarrollo de Pila Completa. Te ofreceremos gratuitamente una práctica en entrevistas para desarrolladores. Incluso ofrecemos un directorio de trabajos donde los empleadores contratan específicamente campistas que han recibido certificaciones de freeCodeCamp.", + "" + ] + ] + }, + "fr": { + "title": "Apprenez comment freeCodeCamp fonctionne", + "description": [ + [ + "//i.imgur.com/6ibIavQ.jpg", + "Une idée des avantages de freeCodeCamp: restez connecté , apprenez le JavaScript , construisez votre portfolio , Aidez les organismes sans but lucratif", + "Bienvenue sur freeCodeCamp . Nous sommes une communauté opensource de gens passionnés qui apprend à coder et aide les organisations à but non lucratif.", + "" + ], + [ + "//i.imgur.com/Elb3dfj.jpg", + "Une capture d'écran de certains de nos développeurs réunis à Toronto.", + "Apprendre à code est dur. Pour réussir, vous aurez besoin de beaucoup de pratique et de soutien. Voilà pourquoi nous avons créé un programme rigoureux et une communauté de soutien.", + "" + ], + [ + "//i.imgur.com/D7Y5luw.jpg", + "Un graphique de la vitesse de croissance de l'emploi face à la croissance du nombre de diplômés en études d'informatique . Il y a 1,4 million d'emplois et seulement 400 000 personnes pour les occuper.", + "Il y a des milliers d'emplois de développeurs actuellement vacants, et la demande pour les développeurs augmente chaque année.", + "" + ], + [ + "//i.imgur.com/WD3STY6.jpg", + "Photos de trois développeurs qui ont obtenu un emploi après l'apprentissage de code au freeCodeCamp.", + "freeCodeCamp est une voie éprouvée pour obtenir votre premier job de développeur. En fait , personne n'a jamais accompli l'ensemble de notre programme , car nos développeurs ont trouvé un emploi avant qu'ils ne soient en mesure de le finir notre parcours.", + "" + ], + [ + "//i.imgur.com/vLNso6h.jpg", + "Une illustration montrant que vous allez apprendre HTML5 , CSS3 , JavaScript , bases de données , Git , Node.js , React et D3.", + "Nous avons des centaines de défis de codage optionnels qui vous apprendront les fondamentaux du développement web comme HTML5 , Node.js et les bases de données.", + "" + ], + [ + "//i.imgur.com/UVB9hxp.jpg", + "Une image d'un développeur dans un café projets sur Camp Code Free.", + "Nous croyons que les êtres humains apprennent mieux par la pratique . De sorte que vous passerez la plupart de votre temps à construire efficacement des projets. Nous allons vous donner une liste de spécifications ( des témoignages d'utilisateurs agiles ) , et vous allez comprendre comment construire des applications qui répondent à ces spécifications.", + "" + ], + [ + "//i.imgur.com/pbW7K5S.jpg", + "Une image pour montrer notre front-end, back end, et data visualisation certificat ( 400 heures chacun) , nos projets à but non lucratif (800 heures) , et l'interview de préparation ( 80 heures ) pour un total de 2080 heures d'expérience de codage.", + "Notre programme est divisé en 4 certifications . Ces certifications sont standardisés , et immédiatement vérifiable par vos clients indépendants et les futurs employeurs . Comme tout le reste au Code Camp gratuit, ces certifications sont gratuits. Nous vous recommandons de les faire dans l'ordre, mais vous êtes libre d'en sauter . Les trois premièrs certifications prennent 400 heures chacune , et la certification finale prend 800 heures , et implique la construction de projets concrets pour les organisations caritatives.", + "" + ], + [ + "//i.imgur.com/akGfLoa.jpg", + "Une capture d'écran de notre certificat développeur Front-End", + "Pour réussir notre certificat Front-End vérifié, vous allez construire 10 projets utilisant HTML , CSS , jQuery et JavaScript.", + "" + ], + [ + "//i.imgur.com/ocEL0D3.jpg", + "Une capture d'écran de notre certificat de visualisation de données", + "Pour gagner notre certification de visualisation de données , vous allez construire 10 projets utilisant Réagir, Sass et D3.js.", + "" + ], + [ + "//i.imgur.com/8HCk1Od.jpg", + "Une capture d'écran de notre certificat Back-End", + "Pour gagner notre certification de développeur Back-End, vous allez construire 10 projets utilisant Node.js , Express, et MongoDB . Vous allez utiliser Git et Heroku de les déployer dans le cloud.", + "" + ], + [ + "//i.imgur.com/yXyxbDd.jpg", + "Une capture d'écran de notre répertoire de projet à but non lucratif.", + "Après avoir effectué tous les trois de ces certificats , vous faites équipe avec un autre développeur et utilisez agiles méthodologies de développement de logiciel pour construire deux projets de la vie réelle pour les organismes sans but lucratif . Vous aurez également d'ajouter des fonctionnalités à deux projets à but non lucratif de code hérité. Au moment où vous avez terminé, vous aurez un portefeuille de véritables applications que les gens utilisent tous les jours.", + "" + ], + [ + "//i.imgur.com/PDGQ9ZM.jpg", + "Une image de campeurs construction des projets ensemble dans un café de Séoul ", + "Si vous finissez les 2.080 heures de défis et projets, vous gagnerez notre certification complète Stack développement . Nous vous offrons gratuitement la pratique d'entrevue de codage . Nous offrons même un accès à notre si d'emploi où les employeurs embauchent spécifiquement les développeurs qui ont obtenu des certificats de freeCodeCamp.", + "" + ] + ] + }, + "it": { + "title": "Impara come funziona freeCodeCamp", + "description": [ + [ + "//i.imgur.com/6ibIavQ.jpg", + "Una immagine dei 4 benefici di freeCodeCamp: Creare Contatti, Imparare il JavaScript, costruire il proprio portfolio, Aiutare delle organizzazioni no-profit", + "Benvenuto in freeCodeCamp. Siamo una comunità open source di persone impegnate che imparano a programmare e aiutano le organizzazioni no-profit.", + "" + ], + [ + "//i.imgur.com/Elb3dfj.jpg", + "Uno screenshot di alcuni dei nostri camper che programmano insieme a Toronto.", + " Imparare a programmare è difficile. Per riuscirci, sono necessari un sacco di pratica e molto sostegno. Per questo motivo abbiamo creato un curriculum rigoroso e una comunità solidale.", + "" + ], + [ + "//i.imgur.com/D7Y5luw.jpg", + "Un grafico del tasso di crescita dei posti di lavoro contro la crescita di laureati in informatica (in USA). Ci sono 1,4 milioni di posti e solo 400 mila persone adatte ad occuparli.", + "Ci sono migliaia di posizioni da Sviluppatore Software attualmente vacanti, e la domanda di programmatori cresce ogni anno.", + "" + ], + [ + "//i.imgur.com/WD3STY6.jpg", + "Foto di tre camper che hanno ottenuto un lavoro dopo aver imparato a programmare con freeCodeCamp.", + "freeCodeCamp è un modo collaudato per ottenere il primo lavoro da sviluppatore. In effetti, nessuno ha ancora completato tutto il nostro programma, perché i campers trovano lavoro prima di finire il corso.", + "" + ], + [ + "//i.imgur.com/vLNso6h.jpg", + "Un esempio che mostra che qui si imparano HTML5, CSS3, JavaScript, Database, Git, Node.js, React e D3.", + "Abbiamo centinaia di problemi di programmazione opzionali che vi insegneranno tecnologie di sviluppo web fondamentali come HTML5, Node.js e Database.", + "" + ], + [ + "//i.imgur.com/UVB9hxp.jpg", + "Un'immagine di un camper in un bar che lavora ai progetti di freeCodeCamp.", + "Crediamo che gli esseri umani imparino meglio facendo. Quindi lavorerai per la maggior parte del tempo a dei progetti pratici. Ti daremo una lista di specifiche (Storie-Utente 'Agili'), e Tu dovrai decidere come sviluppare delle applicazioni che soddisfino queste specifiche.", + "" + ], + [ + "//i.imgur.com/pbW7K5S.jpg", + "Un'immagine che mostra le nostre certificazioni front-end, back-end, e visualizzazione dei dati (400 ore ciascuno), i nostri progetti no-profit (800 ore), e la preparazione ai colloqui (80 ore) per un totale di 2.080 ore di esperienza.", + "Il nostro curriculum è diviso in 4 certificazioni. Queste certificazioni sono standardizzate, e immediatamente verificabili dai tuoi clienti come freelance e dai futuri datori di lavoro. Come tutto il resto di freeCodeCamp, queste certificazioni sono gratuite. Ti consigliamo di farle in ordine, ma non è obbligatorio. Per le prime tre certificazioni, ci vogliono 400 ore ciascuna, per la certificazione finale ci vogliono 800 ore, e questa prevede lo sviluppo di progetti reali per delle organizzazioni no-profit. ", + "" + ], + [ + "//i.imgur.com/akGfLoa.jpg", + "Uno screenshot del nostro certificato di sviluppatore Front-End", + "Per ottenere la certificazione verificata di Sviluppatore Front-End, dovrai realizzare 10 progetti utilizzando HTML, CSS, jQuery, e JavaScript.", + "" + ], + [ + "//i.imgur.com/ocEL0D3.jpg", + "Uno screenshot del nostro certificato di Visualizzazione Dati", + "Per ottenere la certificazione di Visualizzazione Dati, dovrai realizzare 10 progetti utilizzando React, Sass e D3.js.", + "" + ], + [ + "//i.imgur.com/8HCk1Od.jpg", + "Uno screenshot del nostro certificato di sviluppatore Back-End", + "Per ottenere la certificazione di Sviluppatore Back-End, dovrai realizzare 10 progetti utilizzando Node.js, Express e MongoDB. Userai Git e Heroku per distribuirli in rete.", + "" + ], + [ + "//i.imgur.com/yXyxbDd.jpg", + "Una schermata della nostra directory dei progetti no-profit.", + "Dopo aver ottenuto tutti e tre i certificati, potrai collaborare con un altro camper e utilizzerai metodologie di sviluppo 'Agili' per sviluppare due progetti reali per delle organizzazioni no-profit. Inoltre dovrai aggiungere funzionalità a due progetti no-profit sviluppati precedentemente. Quando avrai finito, avrai un portafoglio di applicazioni reali utilizzate quotidianamente.", + "" + ], + [ + "//i.imgur.com/PDGQ9ZM.jpg", + "Un'immagine di alcuni campers che lavorano insieme ai progetti in un bar a Seoul.", + "Una volta completati tutti i problemi e i progetti, per l'equivalente di 2080 ore, potrai ottenere la nostra Certificazione di sviluppatore Full-Stack. Offriamo gratuitamente anche delle simulazioni di colloqui di lavoro. Abbiamo anche una Bacheca in cui i datori di lavoro stanno cercando dei campers che abbiano completato le certificazioni di freeCodeCamp. ", + "" + ] + ] + }, + "pt-br": { + "title": "Aprenda como o freeCodeCamp funciona", + "description": [ + [ + "//i.imgur.com/6ibIavQ.jpg", + "Imagem dos 4 benefícios do freeCodeCamp: Conecte-se, Aprenda Javascript, Construa seu Portfolio, Ajude Organizações Sem Fins Lucrativos", + "Bem-vindo ao freeCodeCamp. Nós somos uma comunidade open source cujo objetivo é ajudá-lo(a) a aprender a programar, e a praticar através da construção de projetos para organizações sem fins lucrativos.", + "" + ], + [ + "//i.imgur.com/Elb3dfj.jpg", + "Um screenshot de alguns dos nossos campistas programando em Toronto.", + "Aprender a programar é difícil. Para ter sucesso, você precisará de muita prática e apoio. É por isto que criamos um rigoroso programa de estudos e uma comunidade bastante acolhedora.", + "" + ], + [ + "//i.imgur.com/WD3STY6.jpg", + "Foto de três campistas que conseguiram emprego depois de aprender a programar através do freeCodeCamp.", + "freeCodeCamp é o caminho certo em direção ao seu primeiro emprego como desenvolvedor(a) de software. Várias empresas já contrataram milhares de pessoas como você que aprenderam a programar através do freeCodeCamp.", + "" + ], + [ + "//i.imgur.com/D7Y5luw.jpg", + "Gráfico da taxa de crescimento das vagas de emprego em relação ao crescimento do total de formandos em ciências da computação. Existem 1.4 milhões vagas de emprego e apenas 400 mil pessoas para preenchê-las.", + "Existem milhares de vagas de emprego não preenchidas para desenvolvedores de softwares e a demanda para programadores cresce a cada ano.", + "" + ], + [ + "//i.imgur.com/vLNso6h.jpg", + "Uma ilustração mostrando que você aprenderá HTML5, CSS3, JavaScript, Bancos de Dados, Git, Node.js, React e D3.", + "Nós temos centenas de desafios opcionais de programação que o(a) ensinarão as principais tecnologias de desenvolvimento web como HTML5, Node.js e bancos de dados.", + "" + ], + [ + "//i.imgur.com/UVB9hxp.jpg", + "Imagem de um campista numa cafeteria construindo projetos no freeCodeCamp.", + "Nós acreditamos que as pessoas aprendem melhor na prática, portanto você gastará a maior parte do seu tempo de fato construindo projetos. Nós proveremos a você uma lista de espeficicações (agile user stories), e você dará um jeito de construir aplicações que satisfaçam essas espeficações.", + "" + ], + [ + "//i.imgur.com/pbW7K5S.jpg", + "Uma imagem mostrando nossos certificados de front-end, back-end e visualização de dados (400 horas cada), nossos projetos sem fins lucrativos (800 horas) e preparação para entrevista (80 horas), totalizando 2.080 horas de experiência em programação.", + "Nosso programa de estudos está dividido em 4 certificações. Estas certificações são padronizadas e podem ser verificadas a qualquer momento por seus clientes freelance e futuros empregadores. Assim como tudo no freeCodeCamp, essas certificações são gratuitas. Nós recomendamos que elas sejam feitas em ordem, mas você é livre para fazê-las como preferir. As primeiras três certificações levam 400 horas cada e a certificação final leva 800 horas e envolve a construção de projetos reais para organizações sem fins lucrativos.", + "" + ], + [ + "//i.imgur.com/akGfLoa.jpg", + "Uma foto de nossa certificação de desenvolvimento Front End", + "Para ganhar nossa certificação verificada de desenvolvimento Front End, você terá que construir 10 projetos usando HTML, CSS, jQuery e JavaScript.", + "" + ], + [ + "//i.imgur.com/ocEL0D3.jpg", + "Uma foto de nosso certificado de Visualização de Dados", + "Para ganhar nossa certificação verificada de Visualização de Dados, você terá que construir 10 projetos usando React, Sass e D3.js.", + "" + ], + [ + "//i.imgur.com/8HCk1Od.jpg", + "Uma foto de nossa certificação de desenvolvimento Back End", + "Para ganhar nossa certificação verificada de desenvolvimento Back End, você terá que construir 10 projetos usando Node.js, Express e MongoDB. Você usará Git e Heroku para implementá-los na nuvem.", + "" + ], + [ + "//i.imgur.com/yXyxbDd.jpg", + "Uma foto de nosso diretório de projetos sem fins lucrativos.", + "Após você completar todos os três certificados, você formará uma equipe com outro campista e usará metodologias ágeis de desenvolvimento de software para construir dois projetos reais para organizações sem fins lucrativos. Você também adicionará funcionalidades a dois projetos sem fins lucrativos pré-existentes. Quando terminar, você terá um portfolio com projetos reais que pessoas usam todos os dias.", + "" + ], + [ + "//i.imgur.com/PDGQ9ZM.jpg", + "Uma imagem de campistas construindo projetos juntos em Seoul.", + "Se você completar todas as 2.080 horas de desafios e projetos, você ganhará nosso certificado de desenvolvimento Full Stack. Nós lhe ofereceremos prática gratuita para entrevistas de programação. Nós ofereceremos ainda um portal de empregos onde empregadores especificamente contratam campistas que conseguiram certificações no freeCodeCamp.", + "" + ] + ] + }, + "ru": { + "title": "Узнайте как работает freeCodeCamp", + "description": [ + [ + "//i.imgur.com/6ibIavQ.jpg", + "4 преимущества freeCodeCamp: подключайтесь, учите JavaScript, создавайте ваше портфолио, помогайте некоммерческим организациям.", + "Добро пожаловать в freeCodeCamp. Мы открытое сообщество занятых людей, которые изучают программирование и помогают некоммерческим организациям.", + "" + ], + [ + "//i.imgur.com/Elb3dfj.jpg", + "Некоторое количество наших участников, программирующих вместе в Торонто.", + "Учиться программировать сложно. Для успеха вам понадобится много практики и поддержки. Именно поэтому мы создали строгую учебную программу и поддерживающее сообщество.", + "" + ], + [ + "//i.imgur.com/D7Y5luw.jpg", + "Граф скорости роста предложений работы по сравнению со скоростью роста количества выпускников, изучивших информатику - 1.4 миллиона вакансий и только 400 тысяч людей для их заполнения.", + "Существует множество пустеющих вакансий для программистов, и спрос на программистов растёт с каждым годом.", + "" + ], + [ + "//i.imgur.com/WD3STY6.jpg", + "Фото троих участников, получивших работу после изучения программы freeCodeCamp.", + "freeCodeCamp - проверенный путь к вашей первой работе в области программирования. Фактически, мало кто выполнил нашу учебную программу целиком, так как участники получают работы до того, как успевают это сделать.", + "" + ], + [ + "//i.imgur.com/vLNso6h.jpg", + "", + "Иллюстрация, показывающая, что вы изучите HTML5, CSS3, JavaScript, Databases, Git, Node.js, React и D3.", + "У нас есть сотни необязательных заданий, которые научат вас применению основополагающих технологий web-разработки, например: HTML5, Node.js и базы данных.", + "" + ], + [ + "//i.imgur.com/UVB9hxp.jpg", + "Изображение участника, работающего над созданием проектов по программе freeCodeCamp в кафе.", + "Мы верим, что люди лучше всего учатся на практике. Поэтому большую часть своего времени вы потратите на непосредственную работу над проектами. Мы предоставим вам список спецификаций (гибких пользовательских историй), и вы разберётесь как создать приложения, которые им удовлетворяют.", + "" + ], + [ + "//i.imgur.com/pbW7K5S.jpg", + "Изображение наших сертификаций: клиентской, серверной и по визуализации данных (400 часов каждая), наших некоммерческих проектов (800 часов), и подготовки к интервью (80 часов), что складывается в 2,080 часов опыта в области программирования.", + "Наша учебная программа разделена на 4 сертификации. Эти сертификации стандартизованы и могут быть мгновенно проверены вашими клиентами и будущими работодателями. Как и всё остальное в freeCodeCamp, эти сертификации бесплатны. Мы рекоммендуем проходить эти сертификационные программы в заданной очереди, но вы можете выполнять их в любом порядке. Первые три сертификации занимают по 400 часов каждая, а конечная сертификаци занимает 800 часов и включает создание реальных проектов для некоммерческих организаций.", + "" + ], + [ + "//i.imgur.com/k8btNUB.jpg", + "Изображение нашего сертификата разработчика клиентской части", + "Для получения нашего проверенного сертификата разработчика клиентской части, вы создадите 10 проектов с применением HTML, CSS, jQuery и JavaScript.", + "" + ], + [ + "//i.imgur.com/Et3iD74.jpg", + "Изображение нашего сертификата по визуализации данных", + "Для получения нашего сертификата по визуализации данных, вы создадите 10 проектов с применением React, Sass и D3.js.", + "" + ], + [ + "//i.imgur.com/8v3t84p.jpg", + "Изображение нашего сертификата разработчика серверной части", + "Для получения нашего сертификата разработчика серверной части, вы создадите 10 проектов с применением Node.js, Express и MongoDB. Вы будете использовать Git и Heroku для их размещения в облаке.", + "" + ], + [ + "//i.imgur.com/yXyxbDd.jpg", + "Изображение нашего указателя проектов для некоммерческих организаций.", + "После завершения всех трёх сертификаций, вы объединитесь в команду с другим участником и будете применять гибкие методологии разработки программного обеспечения для создания двух реальных проектов для некоммерческих организаций. Также, вы добавите функционал к двум устаревшим некоммерческим проектам. К моменту завершения у вас в портфолио будут реальные приложения, которые люди используют каждый день.", + "" + ], + [ + "//i.imgur.com/PDGQ9ZM.jpg", + "Изображение участников, вместе работающих над проектами в кафе в Сеуле.", + "Если вы завершите всю программу, эквивалентную 2,080 часам заданий и проектов, вы получите наш сертификат разработчика полного стека. Мы предложим вам бесплатную практику прохождения интервью при приёме на работу программистом. Мы даже предоставляем доску объявлений, где работодатели целенаправленно нанимают участников проекта, получивших сертификаты.", + "" + ] + ] + }, + "tw": { + "title": "如何使用 Free Code Camp", + "description": [ + [ + "//i.imgur.com/6ibIavQ.jpg", + "Free Code Camp 四大好處: 接觸其他 Camper (開發者), 學習 JavaScript, 打造個人非凡履歷, 幫助非營利事業", + "歡迎加入 Free Code Camp. 幫助您學習程式的開源社群, 在此您可透過協助非營利事業的專案, 學習程式開發", + "" + ], + [ + "//i.imgur.com/Elb3dfj.jpg", + "多倫多的 Camper 聚會一景", + "學寫程式不簡單 想成功, 你會需要很多的練習和幫助, 因此我們準備了綿密的課程, 以及熱心幫助的社群", + "" + ], + [ + "//i.imgur.com/WD3STY6.jpg", + "三位 Camper 在 Free Code Camp 學習後順利取得工作", + "Free Code Camp 是你取得第一份軟體工作的幫手, 目前有數以千計, 像你一樣的人們在 Free Code Camp 學習完畢後順利被公司招聘", + "" + ], + [ + "//i.imgur.com/D7Y5luw.jpg", + "資訊工程學位需求圖。世上有一千四百萬的工作機會, 卻只有四百萬的供給, 數以千計的軟體工程師職缺求賢若渴著, 而需求每年都還在成長", + "" + ], + [ + "//i.imgur.com/vLNso6h.jpg", + "您會學習到關於 HTML5, CSS3, Javascript, Database, Git, Node.js, React 和 D3 等核心技術", + "數以百計的程式挑戰等著你, 讓您學到網頁開發的基礎技術例如 HTML5, Node.js 和資料庫", + "" + ], + [ + "//i.imgur.com/UVB9hxp.jpg", + "Camper 們在咖啡店開發 Free Code Camp 專案一景", + "我們相信做從中學, 因此你大多數的時間將會用於實際專案開發. 我們會給您規格的列表(agile user stories), 而您將會了解到如何打造應用程式來滿足這些需求", + "" + ], + [ + "//i.imgur.com/pbW7K5S.jpg", + "前端, 後端和資料視覺化的認證 (每個 400 小時), 非營利專案 (800 小時), 以及面試準備 (80 小時). 共 2080 小時的開發經驗", + "我們的課程分成四項認證, 均依照業界標準並可讓您的案主或雇主馬上驗證. 而就和其他在 Free Coe camp 的事情一樣, 都是免費的. 我們建議學習過程要照順序, 但您也可以依情況自由選擇. 前三個認證每個需要400小時, 最後一個需要 800 小時, 且涵蓋在真實環境中幫非營利組織實際開發專案的過程.", + "" + ], + [ + "//i.imgur.com/akGfLoa.jpg", + "前端開發認證", + "要取得前端開發認證, 您需要用 HTML, CSS, jQuery 和 Javascript 完成十個專案", + "" + ], + [ + "//i.imgur.com/ocEL0D3.jpg", + "資料視覺化認證", + "要取得資料視覺化認證, 您需要用 React, Sass 和 D3.js 完成十個專案", + "" + ], + [ + "//i.imgur.com/8HCk1Od.jpg", + "後端開發認證", + "要取得後端開發認證, 您需要用Node.js, Express 和 MongoDB 完成十個專案, 並用Git 和 Heroku 佈署到雲端", + "" + ], + [ + "//i.imgur.com/yXyxbDd.jpg", + "非營利專案一景", + "在您完成以上三個認證後, 您將會和其他 Camper 組隊, 使用敏捷開發技巧, 為非營利組織完成兩個實際專案, 以及加強兩份老舊的原始碼. 當您完成的時候, 您的個人經歷將能包含開發了正在被廣泛使用的應用程式", + "" + ], + [ + "//i.imgur.com/PDGQ9ZM.jpg", + "Campers 在首爾協同作業一景", + "如果您完成全部 2080 小時的挑戰和專案, 您將會得到全端工程師認證, 我們將提供免費的面試練習和工作機會, 有些雇主特別喜歡雇用有 Free Cade Camp 認證的 Camper 們", + "" + ] + ] + } + } + }, + { + "id": "560add37cb82ac38a17513bf", + "title": "Create a GitHub Account and Join our Chat Rooms", + "description": [ + [ + "//i.imgur.com/EAR7Lvh.jpg", + "A screenshot of our one of our Gitter chat rooms.", + "Before we start coding, let's join freeCodeCamp's chat rooms. You can come here any time of day to hang out, ask questions, or find another camper to pair program with. First you'll need a GitHub account.", + "" + ], + [ + "//i.imgur.com/n6GeSEm.gif", + "A gif showing you to click the link below to go to GitHub. Fill in the necessary fields and click submit. Then check your email inbox for an email from GitHub so you can verify your account.", + "Click the \"Open link in new tab\" button below to open up GitHub. Create a GitHub account by filling in the form. Be sure to use your real email address - GitHub will keep this private. Then check your email inbox for an email from GitHub. Open it and click the \"verify email address\" button inside it.
Note: If you already have a GitHub account, you can skip this step by clicking \"Open link in new tab\", closing the new tab that opens, then clicking \"go to my next step\". We removed our \"skip step\" button because many people would just click it repeatedly without doing these important steps.
", + "https://github.com/join" + ], + [ + "//i.imgur.com/hFqAEr8.gif", + "A gif showing you how to click the profile image in the upper right hand corner of GitHub. Upload a photo of yourself or you will continue to use the automatically generated pixel art. Then fill in the remaining form fields and click submit.", + "Click the pixel art in the upper right hand corner of GitHub, then choose settings. Upload a picture of yourself. A picture of your face works best. This is how your fellow campers will see you in our chat rooms, so look your best. You can add your city and your name if you want.", + "https://github.com/settings/profile" + ], + [ + "//i.imgur.com/ommZH5V.gif", + "A gif showing you freeCodeCamp's GitHub repo.", + "Open freeCodeCamp's open-source repository. This is where our volunteer team collaborates on building freeCodeCamp.", + "https://github.com/freeCodeCamp/freeCodeCamp" + ], + [ + "//i.imgur.com/OmRmLB4.gif", + "A gif showing you how to click the link below to go to our chat room and click the \"sign in with GitHub\" button. Then you can click into the text input field and type a message to your fellow campers.", + "Now that you have a GitHub account, you can join our main chat room by logging in with GitHub. Please do not sign in with Twitter. Introduce yourself by saying \"Hello world!\" Tell your fellow campers how you found freeCodeCamp. Also tell us why you want to learn to code.", + "https://gitter.im/FreeCodeCamp/FreeCodeCamp" + ], + [ + "//i.imgur.com/ud03jig.gif", + "A gif showing you how you can click the settings button in the upper right hand corner and modify your notification settings.", + "Our chat rooms are extremely active. You should change your settings so you're only notified if someone mentions you.", + "" + ], + [ + "//i.imgur.com/T0bGJPe.gif", + "A gif showing how you can click on a user profile image to initiate a private message with that user.", + "Please note that all of our chat rooms are visible to the public. If you need to share sensitive information, such as an email address or phone number, do it in a private message.", + "" + ], + [ + "//i.imgur.com/GqSiNn5.gif", + "A gif showing that you can tab back and forth between challenges and our chat rooms.", + "Keep our chat room open while you work through our challenges. That way, you can ask for help if you get stuck. You can also socialize with other campers when you feel like taking a break.", + "" + ], + [ + "//i.imgur.com/WvQvNGN.gif", + "A gif showing how you can click the link below to download a native chat room app for your computer.", + "You can also download the chat room app to your computer or phone.", + "https://gitter.im/apps" + ] + ], + "challengeSeed": [], + "tests": [], + "type": "Waypoint", + "challengeType": 7, + "translations": { + "de": { + "title": "Erstelle einen GitHub Account und tritt unserem Chat bei", + "description": [ + [ + "//i.imgur.com/EAR7Lvh.jpg", + "Ein Screenshot von einem userer Gitter Chats.", + "Bevor wir zu programmieren beginnen, lass uns den freeCodeCamp Chats beitreten. Hier kannst du zu jeder Tageszeit kommen, Fragen stellen oder einen anderen Camper suchen um gemeinsam zu programmieren. Doch zuerst benötigst du einen GitHub Account.", + "" + ], + [ + "//i.imgur.com/n6GeSEm.gif", + "Ein GIF das zeigt wie der unten stehenden Link angeklickt wird um auf GitHub zu kommen. Füll die notwendigen Felder aus und bestätige. Dann schau in deine Mails nach einer Nachricht von GitHub um deinen Account zu verifizieren.", + "Klicke unten auf den \"Link in neuem Tab öffnen\" Button um GitHub zu öffnen. Erstelle einen GitHub Account indem du die Felder in dem Formular ausfüllst. Überprüfe ob du deine echte Emailadresse verwendest - GitHub wird sie nicht weitergeben. Dann suche in deinem Posteingang nach einer Nachricht von GitHub. Öffne sie und klicke den darin befindenden \"Emailadresse bestätigen\" Button.
Hinweis: Wenn du bereits einen GitHub Account besitzt, kannst du diesen Schritt überspringen, indem du \"Link in neuem Tab öffnen\" drückst, den neuen Tab schließt und dann auf \"Gehe zu nächstem Schritt\" klickst. Wir haben den \"Schritt überspringen\" Button entfernt weil viele Leute sich einfach durchgeklickt haben ohne diese wichtigen Schritte zu tun
", + "https://github.com/join" + ], + [ + "//i.imgur.com/hFqAEr8.gif", + "Ein GIF das dir zeigt wie man sein Profilebild im rechten oberen Eck von GitHub anklickt. Lade ein Foto von dir hoch oder verwende weiterhin das automatisch generierte Pixelbild. Dann fülle die übrigen Formularfelder aus und klicke auf Bestätigung.", + "Klicke auf das Pixel-Art Bild in der rechten oberen Ecke von GitHub, dann gehe auf Einstellungen (settings). Lade ein Bild von dir hoch. Ein Foto von deinem Gesicht bietet sich am Besten an. So sehen dich die anderen Camper im Chat, also mach dich schick. Du kannst deine Stadt und deinen Namen hinzufügen, falls du willst.", + "https://github.com/settings/profile" + ], + [ + "//i.imgur.com/ommZH5V.gif", + "Ein GIF das dir zeigt wie man einem GitHub Repository einen Stern gibt", + "Öffne freeCodeCamp's open-source Repository. Hier arbeitet das ehrenamtliche Team zusammen an freeCodeCamp. Du kannst unserem Repositoy einen Stern geben. Das ist das GitHub Äquivalent für etwas \"liken\"", + "https://github.com/freeCodeCamp/freeCodeCamp" + ], + [ + "//i.imgur.com/OmRmLB4.gif", + "Ein GIF das dir zeigt wie der unten stehende Link geklickt, auf den Chat weitergeleitet und mit dem \"Melde dich mit GitHub an\" Button man angemeldet wird. Dann kannst du auf das Textfeld klicken und eine Nachricht an andere Camper schicken", + "Jetzt, da du einen GitHub Account besitzt, kannst du unserem Hauptchat beitreten indem du dich mit GitHub anmeldest. Bitte melde dich nicht mit Twitter an. Stell dich vor indem du \"Hello World\" schreibst. Erzähl den anderen Campern wie du freeCodeCamp gefunden hast. Außerdem könntest du uns erzählen warum du programmieren lernen willst.", + "https://gitter.im/FreeCodeCamp/FreeCodeCamp" + ], + [ + "//i.imgur.com/ud03jig.gif", + "Ein Gif das dir zeigt wie man den Einstellungsbutton im oberen rechten Eck anklickt und die Benachrichtigungseinstellungen ändert.", + "Unsere Chats sind sehr aktiv. Du solltest die Einstellungen ändern, damit du nur benachrichtigt wirst falls dich jemand erwähnt", + "" + ], + [ + "//i.imgur.com/T0bGJPe.gif", + "Ein GIF das dir zeigt wie man ein Profilbild von einem anderen User anklickt um eine private Nachricht zu versenden.", + "Sei dir bitte bewusst, dass alle unsere Chats komplett öffentlich sind. Falls du also sensible Informationen, wie zum Beispiel Emailadressen oder Telefonnummern, austauschen willst, verwende Privatnachrichten.", + "" + ], + [ + "//i.imgur.com/GqSiNn5.gif", + "Ein GIF das dir zeigt, dass du mithilfe mehrerer Tabs zwischen Aufgaben und dem Chat hin und her wechseln kannst", + "Halte den Chat offen, während du an den Aufgaben arbeitest. So kannst du jederzeit nach Hilfe fragen falls du nicht weiterkommst. Außerdem kannst du dich mit anderen Campern unterhalten falls du eine Pause brauchst.", + "" + ], + [ + "//i.imgur.com/WvQvNGN.gif", + "Ein GIF das dir zeigt wie du den den untenstehenden Link klickst um die native Chatapp für deinen Computer herunterzuladen.", + "Du kannst dir auch die Chatapp für deinen Computer oder dein Smartphone herunterladen.", + "https://gitter.im/apps" + ] + ] + }, + "es": { + "title": "Crea una Cuenta de GitHub y Únete a nuestras Salas de Chat", + "description": [ + [ + "//i.imgur.com/EAR7Lvh.jpg", + "Una imagen de una de nuestras salas de chat en Gitter.", + "Ahora únete a las salas de chat de freeCodeCamp. Puedes venir aquí en cualquier momento para charlar, hacer preguntas, o encontrar otro campista para programar juntos. Primero necesitarás una cuenta de GitHub.", + "" + ], + [ + "//i.imgur.com/n6GeSEm.gif", + "Una imagen mostrándote como pulsar en el enlace inferior para ir a GitHub, llenar los campos necesarios y enviarlos.", + "Crea una cuenta en GitHub. Asegúrate de usar tu dirección de correo real - GitHub mantendrá esto en privado.", + "https://github.com/join" + ], + [ + "//i.imgur.com/hFqAEr8.gif", + "Un gif mostrándote como pulsar en la imagen de perfil en la esquina superior derecha de GitHub. Sube una foto tuya o continuaras usando la imagen de píxeles generada automáticamente. Entonces llena los campos restantes y haz clic en enviar.", + "En la esquina superior derecha pulsa sobre la imagen de píxeles, entonces selecciona configuraciones. Sube una imagen tuya. Una foto de tu cara es mejor. Así es como tus compañeros campistas te verán en nuestras salas de chat, así que toma tu mejor ángulo. Puedes añadir tu ciudad y tu nombre si lo deseas.", + "https://github.com/settings/profile" + ], + [ + "//i.imgur.com/ommZH5V.gif", + "Un gif mostrándote como puedes dar una estrella a un repositorio de GitHub.", + "Ve al repositorio de código libre de freeCodeCamp y dale una \"estrella\". Las \"estrellas\" son el equivalente en GitHub de los \"me gusta\".", + "Si quieres, ve al repositorio de código libre de freeCodeCamp.", + "https://github.com/freeCodeCamp/freeCodeCamp" + ], + [ + "//i.imgur.com/OmRmLB4.gif", + "Un gif mostrándote como pulsar en el enlace inferior para ir a nuestra sala de chat y pulsar en el botón de \"iniciar sesión con GitHub\". Entonces puedes pulsar en el próximo campo de texto y escribir un mensaje a tus compañeros campistas.", + "Ahora que tienes una cuenta de GitHub, puedes unirte a nuestro chat principal al iniciar sesión con GitHub. Por favor no ingrese con Twitter. Preséntate diciendo \"Hello world!\" Cuéntales a los tus compañeros campistas como encontraste freeCodeCamp. Además cuéntanos porque deseas aprender a programar.", + "https://gitter.im/FreeCodeCamp/FreeCodeCamp" + ], + [ + "//i.imgur.com/ud03jig.gif", + "Un gif mostrándote como puedes pulsar en el botón de configuraciones en la esquina superior derecha y modificar tus configuraciones de notificaciones.", + "Nuestras salas de chat son extremadamente activas. Deberías cambiar tus configuraciones para ser notificado únicamente si alguien te menciona.", + "" + ], + [ + "//i.imgur.com/T0bGJPe.gif", + "Un gif mostrándote como puedes pulsar en la imagen de perfil de un usuario para iniciar una conversación privada con ese usuario.", + "Por favor nota que todas nuestras salas de chat son visibles para el público. Si necesitas compartir información privada, como una dirección de correo o un número de teléfono, hazlo en un mensaje privado.", + "" + ], + [ + "//i.imgur.com/GqSiNn5.gif", + "Un gif mostrándote que puedes cambiar entre desafíos y nuestras salas de chat.", + "Mantén nuestra sala de chat abierta mientras trabajas en nuestros desafíos. De esta manera, puedes pedir ayuda si quedas atascado. Además puedes socializar con otros campistas cuando quieras tomar un descanso.", + "" + ], + [ + "//i.imgur.com/WvQvNGN.gif", + "Un gif mostrándote como puedes pulsar abajo para descargar una aplicación de chat nativa para tu computadora.", + "También puedes descargar la aplicación de chat para tu computadora o teléfono móvil.", + "https://gitter.im/apps" + ] + ] + }, + "fr": { + "title": "Créer un compte GitHub et rejoignez nos Salons de chat", + "description": [ + [ + "//i.imgur.com/EAR7Lvh.jpg", + "Une capture d'écran de notre l'un de nos Gitter salles de chat.", + "Avant de commencer à coder, nous allons rejoindre les salles de chat de Camp Code Free . Vous pouvez venir ici tout moment de la journée pour se détendre , poser des questions , ou trouver un autre camping de jumeler programme avec. D'abord, vous aurez besoin d'un compte GitHub.", + "" + ], + [ + "//i.imgur.com/n6GeSEm.gif", + "Un gif vous montrant à cliquer sur le lien ci-dessous pour aller à GitHub . Remplissez les champs nécessaires et cliquez sur soumettre . Ensuite, vérifiez votre boîte de réception pour un courriel de GitHub sorte que vous pouvez vérifier votre compte.", + "Cliquez sur le \"lien Ouvrir dans une nouvelle touche de tabulation\" ci-dessous pour ouvrir GitHub. Créer un compte GitHub en remplissant le formulaire . Assurez-vous d'utiliser votre adresse email réelle - GitHub gardera cette privé. Ensuite, vérifiez votre boîte de réception pour un courriel de GitHub. Ouvrez-le et cliquez sur \"l'adresse email sur vérifier\" l'intérieur.
Remarque: Si vous avez déjà un compte GitHub , vous pouvez sauter cette étape en cliquant sur \"Ouvrir le lien dans un nouvel onglet\", fermeture le nouvel onglet qui ouvre, puis en cliquant \"aller à ma prochaine étape\". Nous avons retiré notre bouton de \"l'étape de saut\" , car beaucoup de gens il suffit de cliquer à plusieurs reprises sans faire ces étapes importantes.
", + "https://github.com/join" + ], + [ + "//i.imgur.com/hFqAEr8.gif", + "Un gif vous montrant comment cliquez sur l' image de profil dans le coin supérieur droit de GitHub. Télécharger une photo de vous-même ou vous allez continuer à utiliser l'art de pixel généré automatiquement . Ensuite, remplissez les champs du formulaire restants et cliquez sur soumettre.", + "Cliquez sur le pixel art dans le coin supérieur droit de GitHub , puis choisissez les paramètres . Télécharger une photo de vous-même. Une photo de votre visage qui fonctionne le mieux . Voici comment les autres campeurs vous voir dans nos salles de chat , donc regarder votre meilleur . Vous pouvez ajouter votre ville et votre nom si vous voulez.", + "https://github.com/settings/profile" + ], + [ + "//i.imgur.com/ommZH5V.gif", + "Un gif montrant comment vous pouvez activer un repo GitHub.", + "Ouvrez open-source du dépôt central de Camp Code Free . Ceci est où notre équipe de bénévoles collabore à la construction de Camp Code Free.", + "https://github.com/freeCodeCamp/freeCodeCamp" + ], + [ + "//i.imgur.com/OmRmLB4.gif", + "Un gif vous montrant comment Cliquez sur le lien ci-dessous pour accéder à notre salle de chat et cliquez sur \"Se connecter avec\" bouton GitHub. Puis vous pouvez cliquer dans le champ de saisie de texte et saisissez un message à vos amis campeurs.", + "Maintenant que vous avez une GitHub compte, vous pouvez vous joindre à notre principale salle de chat en vous connectant à GitHub. Ne connectez-vous pas avec Twitter. Présentez-vous en disant \"Hello World!\" avertissez votre amis campeurs comment vous avez trouvé Libre Code Camp. Aussi nous dire pourquoi vous voulez apprendre à code.", + "https://gitter.im/FreeCodeCamp/FreeCodeCamp" + ], + [ + "//i.imgur.com/ud03jig.gif", + "Un gif vous montrant comment vous pouvez cliquez sur le bouton Réglages dans le coin supérieur droit et modifier vos paramètres de notification.", + "Nos salles de chat sont extrêmement actifs. Vous devez modifier vos paramètres pour vous're notifié que si quelqu'un vous mentionne.", + "" + ], + [ + "//i.imgur.com/T0bGJPe.gif", + "Un gif montrant comment vous pouvez cliquer sur une image de profil utilisateur pour lancer un message privé avec cet utilisateur.", + "Veuillez noter que tous nos salons de chat sont visibles pour le public. Si vous avez besoin de partager des informations sensibles, comme un numéro de téléphone ou l'adresse e-mail, faites-le dans un message privé.", + "" + ], + [ + "//i.imgur.com/GqSiNn5.gif", + "Un gif montrant que vous pouvez Tab et retour entre défis et nos salles de chat.", + "Garder notre salle de discussion ouverte pendant que vous travaillez à travers nos défis. De cette façon, vous pouvez demander de l'aide si vous êtes coincé. Vous pouvez également socialiser avec d'autres campeurs lorsque vous sentez comme prendre une pause.", + "" + ], + [ + "//i.imgur.com/WvQvNGN.gif", + "Un gif montrant comment vous pouvez cliquer sur le lien ci-dessous pour télécharger un natif salle de chat app pour votre ordinateur.", + "Vous pouvez également télécharger la salle de chat app pour votre ordinateur ou votre téléphone.", + "https://gitter.im/apps" + ] + ] + }, + "it": { + "title": "Crea un account GitHub e iscriviti alle nostre Chat Rooms", + "description": [ + [ + "//i.imgur.com/EAR7Lvh.jpg", + "Uno screenshot di una delle nostre chat rooms in Gitter.", + "Prima di iniziare a scrivere codice, entra nelle chat di freeCodeCamp. Potrai venire qui in ogni momento della giornata per chiacchierare, fare domande, o trovare un altro camper per programmare in coppia. Prima di tutto avrai bisogno di un account GitHub.", + "" + ], + [ + "//i.imgur.com/n6GeSEm.gif", + "Una gif che invita a cliccare sul link qui sotto per andare su GitHub. Compila i campi necessari e fare clic su Invia. Quindi controlla la tua casella di posta elettronica, riceverai una e-mail da GitHub per verificare il tuo account.", + "Clicca sul pulsante \" Apri link in una nuova scheda \" qui sotto per aprire GitHub. Crea un account compilando il modulo. Assicurati di utilizzare un indirizzo email reale - GitHub lo terrà privato. Poi controlla la tua casella di posta, riceverai un'e-mail da GitHub. Aprila e clicca il pulsante \"verificare l'indirizzo e-mail \" al suo interno
. Nota: Se disponi già di un account GitHub, è possibile saltare questo passaggio cliccando \"Apri link in una nuova scheda \", chiudendo poi la scheda appena aperta, quindi facendo clic su \"Vai al mio prossimo passo \". Abbiamo rimosso il pulsante \"Salta il passaggio \" perché molte persone lo premerebbero ripetutamente, saltando questi importanti passaggi. ", + "https://github.com/join" + ], + [ + "//i.imgur.com/hFqAEr8.gif", + "Una gif che mostra come cliccare l'immagine del profilo nell'angolo in alto a destra di GitHub. Carica una foto di te altrimenti continuerai ad utilizzare la pixel art generata automaticamente. Poi, compila gli altri campi del modulo e fai clic su Invia.", + "Clicca sulla pixel art nell'angolo in alto a destra di GitHub, quindi seleziona impostazioni. Carica una foto di te stesso. Una foto del viso è la scelta migliore. Gli altri campers ti vedranno così nelle nostre chat rooms, quindi cerca di apparire al meglio . È anche possibile aggiungere la tua città e il tuo nome.", + "https://github.com/settings/profile" + ], + [ + "//i.imgur.com/ommZH5V.gif", + "Una gif che mostra la repository GitHub di freeCodeCamp.", + "Apri la repository open-source di freeCodeCamp. E' qui che il nostro team di volontari collabora allo sviluppo di freeCodeCamp.", + "https://github.com/freeCodeCamp/freeCodeCamp" + ], + [ + "//i.imgur.com/OmRmLB4.gif", + "Una gif che mostra come cliccare sul link qui sotto per andare alla nostra chat room e fare clic sul pulsante \" accedi con GitHub \". Quindi potrai cliccare nel campo di immissione testo e digitare un messaggio agli altri campers.", + "Ora che disponi di un account GitHub, puoi aggiungerti alla nostra chat principale effettuando il login con GitHub. Si prega di non accedere con Twitter. Presentati dicendo \" Hello World! \"Dì ai campers come hai trovato freeCodeCamp. Dicci anche perché vuoi imparare a programmare. ", + "https://gitter.im/FreeCodeCamp/FreeCodeCamp" + ], + [ + "//i.imgur.com/ud03jig.gif", + "Una gif che mostra come cliccare sul pulsante Impostazioni nell'angolo in alto a destra e modificare le impostazioni di notifica.", + "Le nostre chat rooms sono estremamente attive. È preferibile modificare le impostazioni in modo da essere notificati solo se qualcuno ti menziona direttamente.", + "" + ], + [ + "//i.imgur.com/T0bGJPe.gif", + "Una gif che mostra come cliccare sull'immagine di un profilo utente per avviare una conversazione privata con quell'utente.", + "Ti preghiamo di notare che tutte le nostre chat rooms sono visibili al pubblico. Se hai bisogno di condividere le informazioni sensibili, come ad esempio un indirizzo email o il numero di telefono, fallo in un messaggio privato.", + "" + ], + [ + "//i.imgur.com/GqSiNn5.gif", + "Una gif che mostra come passare ripetutamente tra i problemi e le nostre chat rooms.", + "Mantieni aperta la nostra chat mentre lavori ai nostri problemi. In questo modo, potrai chiedere aiuto se ti troverai in ​​difficoltà. Potrai anche socializzare con gli altri campers, quando avrai voglia di prendere una pausa.", + "" + ], + [ + "//i.imgur.com/WvQvNGN.gif", + "Una gif che mostra come è possibile fare clic sul link qui sotto per scaricare applicazione di chat nativa per il computer.", + "È anche possibile scaricare un'applicazione nativa per il computer o il telefono.", + "https://gitter.im/apps" + ] + ] + }, + "ja": { + "title": "Githubアカウントを作成し、チャットに参加しましょう", + "description": [ + [ + "//i.imgur.com/EAR7Lvh.jpg", + "Gitterチャットルームの一場面です。", + "コーディングを始める前に、freeCodeCamp のチャットルームに参加してください。いつでも、雑談や質問ができたりペアプログラミングをするための仲間を見つけ流ことができます。最初に GitHub アカウントが必要です。", + "" + ], + [ + "//i.imgur.com/n6GeSEm.gif", + "この gif は GitHub を開始するまでの流れを表しています。必要な欄に情報を入れて登録をしてください。そして GitHub からあなたのメールアドレス宛にメールが届きますのでアカウントを承認してください。", + "\"Open link in new tab\"をクリックして GitHub を開いてください。 必要な欄に情報を入力して GitHub アカウントを作ってください。実際に使われている email アドレスかを確認してください( GitHub にはこの情報が保存されます )。メールアドレス宛に GitHub からメールが来たことを確認してください。 メールにある\"verify email address\"をクリックして開いてください。
注意: もしすでに GitHub アカウントを持っていたら、あなたは \"Open link in new tab\" をクリックすることでこのステップを飛ばすことができます、新しく開かれたタブを閉じて \"go to my next step\" をクリックしてください。私たちはこの大事なステップが飛ばされてしまうのを防ぐために \"このステップを飛ばす\" ボタンは削除してあります。
", + "https://github.com/join" + ], + [ + "//i.imgur.com/hFqAEr8.gif", + "この gif は GitHub の右上にあるプロフィール画像をクリックする方法です。あなたの写真をアップロードするか、自動で生成されるピクセルアートを利用してください。そして、残りの欄に情報を入力し submit ボタンを押してください。", + "GitHub の右上に表示されているピクセルアートをクリックしてください、そして settings を選んでください。あなたの画像をアップロードしてください。画像はあなたの顔が写っていると良いです。他のキャンパーズの仲間たちがチャットルームであなたを見かけるようになります。住んでいる場所や名前を登録することもできます", + "https://github.com/settings/profile" + ], + [ + "//i.imgur.com/ommZH5V.gif", + "この gif は GitHub のレポジトリへのスターをつける方法です。", + "オープンソースの freeCodeCamp のレポジトリを開いてください。これは私たちボランティアチームの協力者が freeCodeCamp で作っているものです。", + "https://github.com/freeCodeCamp/freeCodeCamp" + ], + [ + "//i.imgur.com/OmRmLB4.gif", + "この git は私たちのチャットルームへのリンクをクリックして、\"sign in with GitHub\" ボタンをクリックしています。そして、テキストを入力してキャンパーズの仲間へメッセージを送る方法を表しています。", + "あなたは GitHub のアカウントを持っているので、私たちのチャットルームへ GitHub を利用してログインできます。\"Hellow world!\" と言って自己紹介をし、あなたがどうやって freeCodeCamp を見つけたかや何故プログラミングを学びたいのかを私たちに話してください。", + "https://gitter.im/FreeCodeCamp/FreeCodeCamp" + ], + [ + "//i.imgur.com/ud03jig.gif", + "この gif は右上の settings ボタンを押すことで、通知の設定を変更する方法を表しています。", + "私たちのチャットルームはとても活発です。あなたは誰かがあなたに対してメンションを送った時にだけ通知してもらうように設定を変更した方が良いでしょう。", + "" + ], + [ + "//i.imgur.com/T0bGJPe.gif", + "この gif はどうやって該当するユーザに向けて個人的なメーッセージを送れるようにするかを表しています。", + "私たちのチャットルームは全て公開されているので、もしあなたが個人的な情報(メールアドレスや電話番号)を共有したい場合には、プライベートメッセージを利用してください。", + "" + ], + [ + "//i.imgur.com/GqSiNn5.gif", + "この gif はチャレンジとチャットルームへの行き来がタブを戻すことでできることを表しています。", + "私たちのチャレンジを通して作業をしている間はチャットルームを開いておくと良いでしょう。そうすることで、必要な時に助けを求めることができます。あなたは休憩をしているかのように他のキャンパーズと関わりを持てるでしょう。", + "" + ], + [ + "//i.imgur.com/WvQvNGN.gif", + "この gif は、チャットルームアプリをあなたのコンピュータに直接インストールするためにダウンロードする方法を表しています。", + "チャットルームのアプリをスマホや自分のパソコンにダウンロードして使うことができます。", + "https://gitter.im/apps" + ] + ] + }, + "pt-br": { + "title": "Crie uma conta no Github e junte-se a nossas salas de bate-papo", + "description": [ + [ + "//i.imgur.com/EAR7Lvh.jpg", + "Um screenshot de uma de nossas salas de bate-papo Gitter.", + "Antes de começarmos a programar, vamos nos juntar às salas de bate-papo do freeCodeCamp. Você pode vir aqui a qualquer hora do dia para socializar, fazer perguntas ou encontar outro campista para programar em dupla. Primeiro, você precisará de uma conta no GitHub.", + "" + ], + [ + "//i.imgur.com/n6GeSEm.gif", + "Um gif mostrando o processo para você clicar no botão abaixo para ir ao site do GitHub. Preencha os campos necessários em clique em enviar. Então acesse sua caixa de e-mails e encontre um e-mail enviado pelo GitHub para que você verifique sua conta.", + "Clique no botão \"Abrir link em nova aba\" abaixo para abrir o GitHub. Crie uma conta ao preencher o formulário. Certifique-se que você está usando seu e-mail real - o GitHub o manterá em sigilo. Então acesse sua caixa de e-mails e encontre um e-mail enviado pelo GitHub para que você verifique sua conta. Abra-o e clique no botão \"Verifique seu e-mail\" dentro do e-mail recebido.
Nota: Se você já possui uma conta no GitHub, pode pular este passo clicando em \"Abrir link em nova aba\", fechando a nova aba que abrirá e então clicando em \"avançar para o próximo passo\". Nós removemos o botão \"pular passo\" porque muitas pessoas estavam clicando nele repetidamente sem seguir as instruções.
", + "https://github.com/join" + ], + [ + "//i.imgur.com/hFqAEr8.gif", + "Um gif mostrando como clicar na sua foto de perfil no canto superior direito na página do GitHub. Faça o upload de uma foto sua ou você continuará a usar a foto gerada automaticamente. Preencha os campos restantes no formulário e clique em enviar.", + "Clique na foto no canto superior direito na página do GitHub e clique em opções. Faça o upload de uma foto sua. Recomendamos uma foto de seu rosto. É assim que você será visto(a) por seus amigos campistas nas salas de bate-papo. Você pode adicionar sua cidade e seu nome se quiser.", + "https://github.com/settings/profile" + ], + [ + "//i.imgur.com/pYk0wOk.gif", + "Um gif mostrando o repositório do freeCodeCamp no GitHub.", + "Abra o repositório open-source do freeCodeCamp. É lá que nossa equipe voluntária colabora em construir o freeCodeCamp.", + "https://github.com/freeCodeCamp/freeCodeCamp" + ], + [ + "//i.imgur.com/OmRmLB4.gif", + "Um gif mostrando como clicar no link abaixo para ir à nossa sala de bate-papo e clicar no botão \"entre com GitHub\". Em seguida, você pode clicar no campo de entrada de texto e digitar uma mensagem para os seus colegas campistas.", + "Agora que você tem uma conta GitHub, você pode se juntar à nossa sala de chat principal, fazendo login com GitHub. Por favor, não faça login no Twitter. Apresente-se, diga \"Hello world! \" e diga a seus colegas campistas como você encontrou o freeCodeCamp. Também diga-nos por que você quer aprender a programar.", + "https://gitter.im/FreeCodeCamp/FreeCodeCamp" + ], + [ + "//i.imgur.com/Ecs5XAd.gif", + "Um gif mostrando como você pode clicar no botão Configurações no canto superior direito e modificar suas configurações de notificação.", + "Nossas salas de chat são extremamente ativas. Você deve alterar as configurações para que você seja notificado somente se alguém mencionar seu nome.", + "" + ], + [ + "//i.imgur.com/T0bGJPe.gif", + "Um gif mostrando como você pode clicar em uma imagem de perfil para iniciar uma conversa em particular com outro usuário.", + "Por favor, note que todas as nossas salas de chat são visíveis ao público. Se você precisa compartilhar informações pessoais, tais como um endereço de e-mail ou número de telefone, compartilhe através de uma mensagem privada.", + "" + ], + [ + "//i.imgur.com/vDTMJSh.gif", + "Um gif mostrando que você pode alternar entre os desafios e nossas salas de chat.", + "Mantenha a nossa sala de chat aberta enquanto você trabalha nos desafios. Dessa forma, você pode pedir ajuda se ficar empacado(a) numa parte difícil. Você também pode socializar com outros campistas quando quiser fazer uma pausa.", + "" + ], + [ + "//i.imgur.com/WvQvNGN.gif", + "Um gif mostrando como você pode clicar no link abaixo para baixar um aplicativo de bate-papo nativo para o seu computador.", + "Você também pode baixar o app da sala de chat para o seu computador ou telefone.", + "https://gitter.im/apps" + ] + ] + }, + "ru": { + "title": "Создайте учётную запись на GitHub и присоединяйтесь к нашим чатам", + "description": [ + [ + "//i.imgur.com/EAR7Lvh.jpg", + "Изображение одного из наших чатов в Gitter", + "Давайте, перед тем как приступить к программированию, присоединимся к чатам freeCodeCamp. Вы можете подсоединяться к ним в любое время суток, чтобы просто позависать, позадавать вопросы, или найти другого участника, с которым вы можете объединиться для парной работы. Для начала вам понадобится учётная запись на GitHub.", + "" + ], + [ + "//i.imgur.com/n6GeSEm.gif", + "Анимация, показывающая нажатие на ссылку, расположенную ниже, для перехода на GitHub. Заполните требуемые поля и подтвердите отправку данных. Затем проверьте вашу электронную почту на предмет получения письма от GitHub, чтобы вы могли подтвердить создание вашей учётной записи.", + "Нажмите кнопку \"Открыть ссылку в новой вкладке\", расположенную ниже, чтобы открыть GitHub. Создайте учётную запись GitHub путём заполнения формы. Убедитесь, что вы используете ваш настоящий адрес электронной почты - GitHub не публикует эту информацию. Затем проверьте ваши входящие на предмет получения письма от GitHub. Откройте его и нажмите кнопку в теле письма \"подтвердить адрес электронной почты\".
Заметка: Если у вас уже есть учётная запись GitHub, вы можете пропустить этот шаг путём нажатия на \"Открыть ссылку в новой вкладке\", закрывания открывшейся вкладки, последующего нажатия \"перейти к следующему шагу\". Мы убрали кнопку \"пропустить шаг\", так как многие склонны нажимать её повторно несколько раз подряд, пропуская эти важные шаги.
", + "https://github.com/join" + ], + [ + "//i.imgur.com/hFqAEr8.gif", + "Анимация, показывающая нажатие на изображение профиля в верхнем правом углу экрана на GitHub. Загрузите ваше фото или вы продолжите использование автоматически сгенерированного пиксельного изображения. Затем заполните оставшиеся поля формы и подтвердите отправку данных", + "Нажмите на пиксельное изображение в правом верхнем углу экрана на GitHub, выберите настройки. Загрузите фаше фото. Изображение вашего лица работает наилучшим образом. Именно так вас будут видеть участники проекта в наших чатах, так что постарайтесь выглядеть наилучшим образом. Вы можете указать ваш город и имя, если хотите.", + "https://github.com/settings/profile" + ], + [ + "//i.imgur.com/ommZH5V.gif", + "Анимация, показывающая как вы можете установить отметку в виде звезды к репо на GitHub.", + "Откройте репозиторий freeCodeCamp с открытым кодом. Это место, где наша команда добровольцев сотрудничает над созданием freeCodeCamp. Вы можете отметить наш репозиторий звездой. Эта отметка на GitHub эквивалентна функции \"нравится\".", + "https://github.com/freeCodeCamp/freeCodeCamp" + ], + [ + "//i.imgur.com/OmRmLB4.gif", + "Анимация, показывающая нажатие на ссылку, расположенную ниже, для перехода в чат и нажатие на кнопку \"войти с помощью GitHub\". Затем вы можете нажать на область поля ввода и напечатать сообщение для ваших приятелей, являющихся участниками проекта.", + "Теперь, когда у вас есть учётная запись GitHub, вы можете присоединиться к нашему основному чату, войдя с помощью GitHub. Представьтесь отправив фразу \"Hello world!\". Сообщите вашим приятелям, участвующим в проекте, что вы нашли freeCodeCamp. Также, сообщите нам почему вы хотите изучать программирование.", + "https://gitter.im/FreeCodeCamp/FreeCodeCamp" + ], + [ + "//i.imgur.com/ud03jig.gif", + "Анимация, показывающая нажатие на кнопку настроек в правом верхнем углу экрана и изменение ваших настроек уведомлений.", + "Наши чаты очень активны. Вам следует изменить ваши настройки уведомлений, чтобы вы видели только когда кто-то упоминает вас.", + "" + ], + [ + "//i.imgur.com/T0bGJPe.gif", + "Анимация, показывающая нажатие на изображение профиля пользователя для начала личной переписки с этим пользователем.", + "Пожалуйста, обратите внимание, что все наши чаты доступны публично. Если вам нужно поделиться чувствительной информацией, например, адресом электронной почты или номером телефона, пользуйтесь для этого личной перепиской.", + "" + ], + [ + "//i.imgur.com/GqSiNn5.gif", + "Анимация, показывающая перемещение между заданиями и чатами.", + "Сохраняйте наши чаты открытыми в процессе работы над заданиями. Таким образом вы сможете обратиться за помощью, если застрянете в процессе выполнения задания. Также, вы можете социализироваться с другими участниками проекта, когда решите сделать перерыв.", + "" + ], + [ + "//i.imgur.com/WvQvNGN.gif", + "Анимация, показывающая нажатие на ссылку, расположенную ниже, для скачивания приложения-чата на ваш компьютер.", + "Также, вы можете скачать и установить приложение-чат на ваш компьютер или телефон.", + "https://gitter.im/apps" + ] + ] + }, + "tw": { + "title": "建立 Github 帳號與加入聊天室", + "description": [ + [ + "//i.imgur.com/EAR7Lvh.jpg", + "我們的 Gitter 聊天室一景", + "在開始之前, 讓我們先加入 Free Code Camp 的聊天室, 你可以隨時隨地加入, 問問題, 或找夥伴一起寫程式. 但您會需要先申請一個 Github 帳號", + "" + ], + [ + "//i.imgur.com/n6GeSEm.gif", + "點選下方連結前往 Github 示意圖. 填完必填欄位後送出, 並到您的電子信箱收取認證信, 通過 Github帳號認證", + "點選 \"Open link in new tab\" 新開視窗前往 Github. 填寫表單建立 Github 帳號. 請填寫使用中的電子信箱 - Github 將會保密. 送出後在您的信箱中找到 Github 的信件並打開, 點選 \"verify email address\" 按鈕.
注意: 如果您已經有Github帳號, 可跳過此步驟並點選\"Open link in new tab\"然後關閉新開的視窗, 再點選 \"go to my next step\". 我們移除了 \"skip step\" (略過此步驟)的按鈕因為太多人在沒有建立Github帳號的情況下直接跳過此步驟
", + "https://github.com/join" + ], + [ + "//i.imgur.com/hFqAEr8.gif", + "Github 個人帳號區示意圖. 上傳照片或使用預設的像素圖, 填寫相關欄位後並送出", + "點選右上角像素圖, 選設定(settings), 上傳自己的示意照, 個人相片尤佳, 這能讓其他的 camper 在聊天室中看見你. 你也可以新增城市和名稱.", + "https://github.com/settings/profile" + ], + [ + "//i.imgur.com/ommZH5V.gif", + "Free Code Camp 的 GitHub repo", + "打開 Free Code Camp 的開放原始碼 repository. 這裡是由志工們合作開發的 Free Code Camp 程式.", + "https://github.com/freecodecamp/freecodecamp" + ], + [ + "//i.imgur.com/OmRmLB4.gif", + "進入聊天室和 登入Github (\"sign in with GitHub\") 按鈕示意圖. 點選輸入框傳送訊息給其他Camper夥伴", + "在建立好 Github 帳號後, 您可以使用該帳號加入聊天室. 說句 \"Hello world!\" 介紹自己吧!和其他人聊聊你是怎麼發現 Free Code Camp, 同時也分享一下學寫程式的動機", + "https://gitter.im/FreeCodeCamp/FreeCodeCamp" + ], + [ + "//i.imgur.com/ud03jig.gif", + "點選右上方設定按鈕, 設定通知訊息", + "我們的聊天室內非常活耀, 建議您更改您的通知設定, 以保證只收到有提到您的訊息", + "" + ], + [ + "//i.imgur.com/T0bGJPe.gif", + "點選使用者圖示並發送個人訊息的示意圖", + "請記得, 所有我們的聊天室都是公開的, 如果你需要發送敏感資訊, 例如電子郵件位置或電話號碼, 請透過私人訊息發送", + "" + ], + [ + "//i.imgur.com/GqSiNn5.gif", + "在挑戰(challenges)和聊天室中互切換的示意圖", + "當你練習我們的挑戰時, 記得打開聊天室. 如果有問題可以隨時隨地發問, 想忙裡偷閒時也可與其他 Camper 互動", + "" + ], + [ + "//i.imgur.com/WvQvNGN.gif", + "下載聊天應用程式到電腦中的示意圖", + "您更可下載聊天室 App 到你的電腦或手機中", + "https://gitter.im/apps" + ] + ] + } + } + }, + { + "id": "560add56cb82ac38a17513c0", + "title": "Configure Your Code Portfolio", + "description": [ + [ + "//i.imgur.com/Tw5allJ.gif", + "A gif showing how you can click your profile image in your upper right hand corner to your code portfolio and connect GitHub.", + "Check out your code portfolio. Click your picture in your upper right hand corner. To activate your code portfolio, you'll need to link your GitHub account with freeCodeCamp. Your code portfolio shows your progress and how many Brownie Points you have. You can get Brownie Points by completing challenges and by helping other campers in our chat rooms. If you get Brownie Points on several days in a row, you'll get a streak.", + "" + ] + ], + "challengeSeed": [], + "tests": [], + "type": "Waypoint", + "challengeType": 7, + "translations": { + "de": { + "title": "Erstelle dein Code Portfolio", + "description": [ + [ + "//i.imgur.com/Tw5allJ.gif", + "Ein GIF das dir zeigt wie man sein Profilbild in der rechten oberen Ecke anklickt um zu deinem Code Portfolio zu gelangen und mit GitHub zu verbinden", + "Schau dir dein Code Portfolio an. Klick auf dein Profilbild in der rechten oberen Ecke. Um dein Portfolio zu aktivieren musst du deinen GitHub Account mit freeCodeCamp verbinden. Dein Code Portfolio zeigt deinen Fortschritt und wieviele Brownie Punkte du hast. Du bekommst Brownie Punkte wenn du Aufgaben löst oder anderen Campern im Chat hilfst. Wenn du an mehreren Tagen in Folge Brownie Punkte erhälst bekommst du einen \"streak\"", + "" + ] + ] + }, + "es": { + "title": "Configura tu portafolio de código", + "description": [ + [ + "//i.imgur.com/Tw5allJ.gif", + "Un gif mostrándote como puedes pulsar en tu imagen de perfil en la esquina superior derecha conectar tu portafolio y GitHub.", + "Dale un vistazo de tu portafolio de código. Pulsa en tu imagen en la esquina superior derecha. Para activar tu portafolio de código, necesitaras conectar tu cuenta de GitHub con freeCodeCamp. Tu portafolio de código muestra tu progreso y cuantos Puntos Cafés tienes. Puedes obtener Puntos Cafés completando desafíos y ayudando a otros campistas en nuestras salas de chat. Si obtienes Puntos Cafés varios días consecutivos, obtendrás una racha.", + "" + ] + ] + }, + "fr": { + "title": "Configurer votre code portefeuille", + "description": [ + [ + "//i.imgur.com/Tw5allJ.gif", + "Un gif montrant comment vous pouvez cliquez sur l'image de votre profil dans votre coin supérieur droit à votre code portefeuille et connectez GitHub.", + "Vérifiez votre code portefeuille. Cliquez sur votre photo dans votre coin supérieur droit. Pour activer votre code portefeuille, vous'll nécessité de lier votre compte avec code sans GitHub Camp. Votre code portefeuille affiche votre progression et combien de bons points vous avez. Vous pouvez obtenir de bons points par remplir les défis et en aidant d'autres campeurs dans nos salles de chat. Si vous obtenez Brownie Points sur plusieurs jours d'affilée, vous'll obtenez une rayure.", + "" + ] + ] + }, + "it": { + "title": "Configura il tuo portfolio da programmatore", + "description": [ + [ + "//i.imgur.com/Tw5allJ.gif", + "Una gif che mostra come puoi cliccare l'immagine del profilo in alto a destra per collegare a GitHub il tuo portfolio da programmatore.", + "Controlla il tuo portfolio da programmatore. Clicca l'immagine in alto a destra. Per attivare il portfolio da programmatore, è necessario collegare il tuo account GitHub con freeCodeCamp. Il tuo portfolio da programmatore mostra i tuoi progressi e quanti Brownie Points hai. È possibile ottenere i Brownie Points completando i problemi e aiutando altri campers nelle nostre chat rooms. Se si ricevono Brownie Points per diversi giorni di fila, si otterrà uno \"Streak\". ", + "" + ] + ] + }, + "pt-br": { + "title": "Configure o seu portfolio de código", + "description": [ + [ + "//i.imgur.com/tP2ccTE.gif", + "Um gif mostrando como você pode clicar em sua imagem de perfil no canto superior direito para seu portifólio de código e se conectar com GitHub.", + "Confira seu portfolio de código. Clique na sua imagem no canto superior direito. Para ativar seu portfolio de código, você precisa vincular sua conta do GitHub com o freeCodeCamp. Seu portfolio de código mostra o seu progresso e quantos Brownie Points você tem. Você pode obter Brownie Points completando desafios e ajudando outros campistas em nossas salas de chat. Se você receber Brownie Points em vários dias seguidos, você vai ter um \"streak\".", + "" + ] + ] + }, + "ru": { + "title": "Настройте ваше портфолио с кодом", + "description": [ + [ + "//i.imgur.com/Tw5allJ.gif", + "Анимация, показывающая нажатие на изображение профиля в правом верхнем углу экрана от вашего портфолио с кодом и соединение с GitHub.", + "Просмотрите ваше портфолио с кодом. Нажмите на ваше изображение в правом верхнем углу экрана. Для активации вашего портфолио с кодом, вам нужно будет присоединить свою учётную запись GitHub к freeCodeCamp. Ваше портфолио с кодом отражает выполнение вами программы и количество набранных очков прогресса. Вы можете получить очки прогресса завершая задания или помогая другим участникам проекта в наших чатах. Если вы получаете очки прогресса несколько дней подряд, вы получите полосу.", + "" + ] + ] + }, + "tw": { + "title": "設定您的個人履歷", + "description": [ + [ + "//i.imgur.com/Tw5allJ.gif", + "點選右上角個人圖示, 前往您的個人程式履歷 (Code portfolio) 以及和 Github 帳號連結", + "要檢查您個人的程式履歷, 點選右上角的個人照片. 要啟用您的程式履歷, 您必須要將Free Code Camp 和您的 Github 帳號連結, 您的程式履歷顯示您的學習進度, 以及你擁有多少布朗尼點(Brownie Points). 您可藉由完成挑戰, 或在聊天室幫助其他人取得布朗尼點, 如果連續數天都有取得點數, 你會進入得到取得點數狀態", + "" + ] + ] + } + } + }, + { + "id": "560add71cb82ac38a17513c2", + "title": "Join a freeCodeCamp Group in Your City", + "description": [ + [ + "//i.imgur.com/XugIMb4.jpg", + "A picture of some of our campers meeting in a local cafe.", + "You can code together with other campers in your city by joining a local freeCodeCamp group.", + "" + ], + [ + "//i.imgur.com/iBctF6s.gif", + "A gif showing how you can click the link below, find your city on the list of local groups.", + "Find your city on this list and click it. This will take you to its Facebook page. Click the \"Join group\" button. Someone from the group should approve you shortly. If your city isn't on this list, scroll to the top of the wiki article for instructions on how you can start a group in your city.", + "http://forum.freeCodeCamp.com/t/free-code-camp-city-based-local-groups/19574" + ] + ], + "challengeSeed": [], + "tests": [], + "type": "Waypoint", + "challengeType": 7, + "translations": { + "de": { + "title": "Tritt einem Campsite in deiner Stadt bei", + "description": [ + [ + "//i.imgur.com/XugIMb4.jpg", + "Ein Foto von einigen Campern bei einem Treffen in einem lokalen Cafe.", + "Unsere Campsites sind Facebook Gruppen die dir helfen dich mit anderen Campern aus deiner Stadt zu treffen. Du kannst diese Gruppen verwenden um an \"Coffee-and-Code\" Treffen, wo du andere Camper in einem Cafe triffst um gemeinsam zu programmieren, teilzunehmen oder zu organisieren", + "" + ], + [ + "//i.imgur.com/iBctF6s.gif", + "Ein GIF das zeigt wie du auf den untenstehenden Link klickst, deine Stadt aus der Liste aller Campsites suchst, auf den Facebook Link klickst und der Facebook Gruppe beitrittst.", + "Finde deine Stadt auf dieser Liste und klick sie an. Du wirst auf die Facebook Gruppe des Campsites deiner Stadt geleitet. Klick den \"Gruppe beitreten\" Button um eine Beitrittsanfrage zu stellen. Jemand aus der Gruppe sollte dich in kürzester Zeit annehmen. Falls deine Stadt nicht auf der Liste ist, scrolle zum Ende des Wiki Artikels für eine Anleitung wie du ein Campsite für deine Stadt erstellst.", + "http://forum.freeCodeCamp.com/t/free-code-camp-city-based-local-groups/19574" + ] + ] + }, + "es": { + "title": "Únete a un Campamento en Tu Ciudad", + "description": [ + [ + "//i.imgur.com/NAOFJWN.jpg", + "Una imagen de algunos de nuestros campistas compartiendo en un café local. 3 hombres y 3 mujeres están sentados alrededor de una mesa con portátiles afuera, y están sonriendo y programando.", + "Nuestros Campamentos te ayudan a programar con otros campistas en tu ciudad. Puedes coordinar grupos de estudio o atender eventos de programación locales juntos.", + "" + ], + [ + "//i.imgur.com/iBctF6s.gif", + "Un gif mostrándote como puedes pulsar en el enlace inferior, encontrar tu ciudad en la lista de Campamentos, entonces haz clic en el enlace de Facebook para tu ciudad y unirte al grupo de Facebook de tu ciudad.", + "Encuentra tu ciudad en esta lista y haz clic en esta. Esto te llevara al grupo de Facebook del Campamento de tu ciudad. Da clic en el botón de \"Unirse al grupo\" para unirte a el grupo. Alguien del mismo campamento debería aprobarte en breve. Si tu ciudad no esta en esta lista, ve al final del articulo de la wiki para ver instrucciones de como crear un campamento para tu ciudad.", + "http://forum.freeCodeCamp.com/t/free-code-camp-city-based-local-groups/19574" + ] + ] + }, + "it": { + "title": "Unisciti ad un gruppo freeCodeCamp nella tua città", + "description": [ + [ + "//i.imgur.com/XugIMb4.jpg", + "Una foto di alcuni dei nostri camper riuniti in un bar locale.", + "È possibile programmare insieme ad altri campers nella tua città aderendo ad un gruppo freeCodeCamp vicino a te.", + "" + ], + [ + "//i.imgur.com/iBctF6s.gif", + "Una gif che mostra come è possibile fare clic sul link qui sotto, e trovare la tua città nella lista dei gruppi locali.", + "Trova la tua città in questa lista e cliccala. Verrai indirizzato alla sua pagina Facebook. Fai clic sul pulsante \" Entra nel gruppo \". Qualcuno del gruppo dovrebbe approvare a breve la tua richiesta. Se la tua città non è in questo elenco, scorri alla parte superiore di questo articolo wiki per le istruzioni su come iniziare un gruppo nella tua città. ", + "http://forum.freeCodeCamp.com/t/free-code-camp-city-based-local-groups/19574" + ] + ] + }, + "pt-br": { + "title": "Junte-se a um grupo do freeCodeCamp em sua cidade", + "description": [ + [ + "//i.imgur.com/XugIMb4.jpg", + "Uma imagem de alguns de nossos campistas reunidos em uma cafeteria local.", + "Você pode programar em conjunto com outros campistas em sua cidade ao se juntar em um grupo local do freeCodeCamp.", + "" + ], + [ + "//i.imgur.com/fTFMjwf.gif", + "Um gif mostrando como você pode clicar no link abaixo e encontrar a sua cidade na lista de grupos locais.", + "Encontre sua cidade na lista e clique nela. Isto irá levá-lo à sua respectiva página do Facebook. Clique no botão \"Entrar no grupo\". Alguém do grupo irá aprová-lo em breve. Se a sua cidade não está nesta lista, vá ao topo do artigo wiki para obter instruções sobre como você pode começar um grupo em sua cidade.", + "http://forum.freeCodeCamp.com/t/free-code-camp-city-based-local-groups/19574" + ] + ] + }, + "ru": { + "title": "Присоединяйтесь к группе freeCodeCamp в вашем городе", + "description": [ + [ + "//i.imgur.com/XugIMb4.jpg", + "Изображение встречи нескольких участников проекта в кафе.", + "Наши лагери - это группы в Facebook, которые помогают вам встречаться с другими участниками проекта в вашем городе. Вы можете использовать эти группы для планирования и посещения нерегулярных событий \"кофе-и-код\", на которых вы встречаетесь с другими участниками проекта в кафе и программируете вместе.", + "" + ], + [ + "//i.imgur.com/iBctF6s.gif", + "Анимация, показывающая нажатие на ссылку, расположенную ниже, нахождение вашего города в списке лагерей, последующее нажатие на ссылку для перехода в Facebook и вступление в группу вашего города.", + "Найдите ваш город в списке и нажмите на его название. Так вы попадёте в группу вашего города в Facebook. Нажмите кнопку \"Вступить в группу\" для подачи заявки на вступление в группу. Кто-нибудь из участников, являющийся членом этой группы, подтвердит вашу заявку в скором времени. Если вашего города нет в списке, переместитесь в нижнюю часть wiki-статьи для получения инструкций о том, как вы можете создать группу для вашего города.", + "https://github.com/freeCodeCamp/freeCodeCamp/wiki/List-of-Free-Code-Camp-city-based-Campsites" + ] + ] + }, + "tw": { + "title": "參與您城市中的Free Code Camp 小組", + "description": [ + [ + "//i.imgur.com/XugIMb4.jpg", + "一張 Camper 在當地咖啡店開會的照片", + "您可以參加當地城市的 Free Code Camp 小組與其他 Camper 一起學習", + "" + ], + [ + "//i.imgur.com/iBctF6s.gif", + "點選下方連結, 找到您所屬城市的示意圖", + "在清單中找到您的城市並點選, 您將會前往相關的臉書專頁, 再點選加入群組(\"Join group\"). 群組中的人將會迅速審核您的申請. 若您的城市不在名單中, 請到頁面最上方的維基文章裡了解要如何在您的城市開始一個Free Code Camp小組", + "http://forum.freecodecamp.com/t/free-code-camp-city-based-local-groups/19574" + ] + ] + } + } + }, + { + "id": "560adf65cb82ac38a17513c2", + "title": "Read Coding News on our Medium Publication", + "description": [ + [ + "//i.imgur.com/AZNLvEC.gif", + "A gif showing how you can click the \"follow\" button to follow freeCodeCamp's publication.", + "Our community has a popular Medium publication where we publish tons of helpful articles about coding and technology. Once you open the link, click the \"follow\" button in the upper right hand corner. If you don't have a Medium account, you can create one in seconds.", + "https://medium.freecodecamp.com" + ] + ], + "releasedOn": "February 10, 2016", + "challengeSeed": [], + "tests": [], + "type": "Waypoint", + "challengeType": 7, + "translations": { + "de": { + "title": "Lese Programmier-Nachrichten auf unserer Medium Seite", + "description": [ + [ + "//i.imgur.com/AZNLvEC.gif", + "Ein GIF, das dir zeigt, wie du einen Medium Account anlegen kannst.", + "Unsere Community hat eine Medium Seite, auf der wir viele Artikel über Software Entwicklung veröffentlichen. Kannst du auf die Medium Seite von freeCodeCamp gehen und den \"follow\" Button klicken. Unsere Camper veröffentlichen jede Woche mehrere Artikel. Wenn du noch keinen Medium Account hast, kannst du dem Link folgen und dich entweder mit einem Account aus einem Social Network oder einer E-Mail Adresse (sie senden dir eine E-Mail, die du durchklicken kannst, um dir einen Account anzulegen.). Wenn du ein Thema ausgewählt hast, das dich interessiert, kannst du den weiteren Schritten folgen.", + "https://www.medium.com" + ] + ] + }, + "es": { + "title": "Lee noticias de codificación en nuestros canal de publicaciones Medium", + "description": [ + [ + "//i.imgur.com/AZNLvEC.gif", + "Un gif mostrando cómo crear una cuenta en Medium.", + "Nuestra comunidad tiene un canal de publicaciones Medium, donde escribimos un montón de artículos sobre desarrollo de software. Ir al canal de publicaciones de freeCodeCamp Medium y pulsar \"follow\". Nuestros campistas publican varios artículos cada semana. Si aún no dispones de una cuenta Medium, puedes seguir el enlace y registrarte usando una red social o ingresando un correo electrónico (enviarán un correo electrónico que debes abrirlo para crear tu cuenta.)", + "https://www.medium.com" + ] + ] + }, + "fr": { + "title": "Lisez les nouvelles de la programmation sur notre Publication Medium", + "description": [ + [ + "//i.imgur.com/AZNLvEC.gif", + "Une gif montrant comment tu peux créer un compte sur Medium.", + "Notre communauté a une publication sur Medium où on écrit plusieurs articles sur la programmation. Tu peux visiter la publication de freeCodeCamp sur Medium et cliquer sur \"follow\". Nos campers publient plusieurs articles chaque semaine. Si tu n’as pas encore un compte Medium, utilise le lien ci-dessous pour s’inscrire en utilisant un compte sur les médias sociaux ou en utilisant ton email (un email de confirmation sera envoyé à votre email pour terminer l’inscription). Une fois un sujet qui t’intéresse est choisi, tu peux continuer les étapes.", + "https://www.medium.com" + ] + ] + }, + "it": { + "title": "Leggi notizie sul mondo della programmazione nelle nostre pubblicazioni su Medium", + "description": [ + [ + "//i.imgur.com/AZNLvEC.gif", + "Una gif che mostra come puoi cliccare sul tasto \"follow\" per seguire le pubblicazioni di freeCodeCamp.", + "La nostra comunità ha uno spazio su Medium dove pubblica numerosi articoli pratici che parlano di programmazione e di tecnologia. Una volta aperto il link, clicca sul tasto \"follow\" in alto a destra. Se non hai un account di Medium, puoi crearne uno in pochi secondi.", + "https://medium.freecodecamp.com" + ] + ] + }, + "pt-br": { + "title": "Leia notícias sobre programação em nossas publicações no Medium", + "description": [ + [ + "//i.imgur.com/AZNLvEC.gif", + "Um gif mostrando como você pode clicar no botão \"seguir\" para acompanhar as publicações do freeCodeCamp.", + "Nossa comunidade possui um espaço na plataforma Medium onde publicamos um monte de artigos úteis sobre programação e tecnologia. Uma vez que você abrir o link, clique no botão \"seguir\" no canto superior direito. Se você não tiver uma conta no Medium, pode criar uma rapidamente.", + "https://medium.freecodecamp.com" + ] + ] + }, + "ru": { + "title": "Читайте наши публикации в Medium о новостях программирования", + "description": [ + [ + "//i.imgur.com/AZNLvEC.gif", + "Анимация, показывающая нажатие кнопки \"follow\", чтобы подписаться на публикации freeCodeCamp.", + "Наше сообщество публикует огромное количество полезных статей по программированию и технологиям на популярной платформе Medium. Когда перейдёте по ссылке, нажмите кнопку \"follow\" в правом верхнем углу экрана. Если у вас нет учётной записи Medium, вы можете создать её за несколько секунд.", + "https://medium.freecodecamp.com" + ] + ] + }, + "tw": { + "title": "訂閱我們的程式新知 Medium Publication", + "description": [ + [ + "//i.imgur.com/AZNLvEC.gif", + "點選 \"follow\" 按鈕訂閱 Free Code Camp 電子刊物", + "我們的社群也提供熱門刊物 Medium Publication, 在上面有一大堆關於程式和科技新知的文章.", + "點選連結後, 點選右上角的 \"follow\" 按鈕, 如果你沒有 Medium 帳號, 歡迎您馬上建立一個.", + "https://medium.freecodecamp.com" + ] + ] + } + } + }, + { + "id": "560add8ccb82ac38a17513c4", + "title": "Learn What to Do If You Get Stuck", + "description": [ + [ + "//i.imgur.com/3aiJZA3.jpg", + "The text \"Coding is hard.\"", + "Coding is hard. You will get stuck. Even experienced coders get stuck. The key is knowing how to get unstuck.", + "" + ], + [ + "//i.imgur.com/oBX0jzR.jpg", + "The text \"It takes time to get good at coding.\"", + "It takes time to get good at coding. You wouldn't expect to beat a chess master after playing for 3 months. Don't expect to build the next Facebook after coding for 3 months.", + "" + ], + [ + "//i.imgur.com/EoTfOyC.jpg", + "An image of some of our campers coding together in Montreal.", + "Keep practicing coding every day and hanging out with other people who code, and you will become a job-ready coder.", + "" + ], + [ + "//i.imgur.com/wK0mcVh.jpg", + "An image with the text \"1. Read the error 2. Search Google 3. Ask for help.", + "Any time you get stuck or don't know what to do next: Read-Search-Ask.", + "" + ], + [ + "//i.imgur.com/99BfAcK.jpg", + "An image showing jQuery documentation", + "First, read the documentation or error message. A key skill that good coders have is the ability to interpret and then follow instructions.", + "" + ], + [ + "//i.imgur.com/GxvrsFb.gif", + "A gif showing you how to do an advanced Google search. First, we enter the query \"jquery doesn't run when my page loads\". Then we click search tools button and change the \"Any time\" select box to \"within the last year\". Then we click on a result and read through the article and find our answer.", + "If that didn't help, search Google. Good Google queries take a lot of practice. When you search Google, you usually want to include the language or framework you're using. You also want to limit the results to a recent period.", + "" + ], + [ + "//i.imgur.com/xipwagp.gif", + "A gif showing us following the link below to go to the help chat room and ask \"jquery doesn't run when my page loads\".", + "If that didn't help, ask your friends. If you have trouble, you can ask your fellow campers in our help chat room.", + "https://gitter.im/FreeCodeCamp/Help" + ], + [ + "//i.imgur.com/Hh8RpYX.gif", + "A gif showing us scrolling through our challenge map.", + "Now you're ready to start coding. The \"Map\" button in your upper right hand corner will show you our challenge map. We recommend that you complete these from top to bottom, at a sustainable pace. Our open source community is constantly improving our challenges, so don't be surprised if they change or move around. Don't worry about going back - just keep moving forward.", + "" + ] + ], + "challengeSeed": [], + "tests": [], + "type": "Waypoint", + "challengeType": 7, + "translations": { + "de": { + "title": "Lerne was du tun kannst falls du nicht weiterkommst", + "description": [ + [ + "//i.imgur.com/3aiJZA3.jpg", + "Der Text \"Coding is hard.\"", + "Programmieren ist hart. Du wirst zeitweise nicht weiterkommen. Sogar erfahrene Programmierer bleiben manchmal hängen. Der Schlüssel zum Erfolg ist zu wissen wie man in so einer Situation weitermacht", + "" + ], + [ + "//i.imgur.com/oBX0jzR.jpg", + "Der Text \"It takes time to get good at coding.\"", + "Es dauert seine Zeit bis man gut programmieren kann. Du erwartest auch nicht einen Schachmeister nach 3 Monaten Übung zu schlagen. Erwarte also auch nicht das nächste Facebook nach 3 Monaten zu programmieren", + "" + ], + [ + "//i.imgur.com/EoTfOyC.jpg", + "Ein Foto von einigen Campern die gemeinsam in Montreal programmieren.", + "Übe programmieren jeden Tag und triff dich mit anderen Leuten die programmieren, dann wirst du bereit für einen Programmierjob.", + "" + ], + [ + "//i.imgur.com/wK0mcVh.jpg", + "Ein Bild mit dem Text \"1. Read the error 2. Search Google 3. Ask for help.", + "Wann immer du nicht weiterkommst oder nicht weißt was du als nächstes tun sollst: Lesen-Suchen-Fragen", + "" + ], + [ + "//i.imgur.com/99BfAcK.jpg", + "Ein Bild von der jQuery Dokumentation", + "Ließ zuerst die Dokumentation oder Fehlermeldung. Eine Schlüsselfähigkeit von guten Programmierern ist die ist die Fähigkeit zu interpretieren und dann Anweisungen zu folgen", + "" + ], + [ + "//i.imgur.com/GxvrsFb.gif", + "Ein GIF das eine erweiterte Google Suche zeigt. Zuerst wird die Suchanfrage \"jquery doesn't run when my page loads\" eingegeben. Dann wird in den Suchoptionen die Auswahl \"Beliebige Zeit\" zu \"Letztes Jahr\" geändert. Dann wird auf ein Ergebnis geklickt, der Artikel gelesen und die Antwort gefunden", + "Wenn das nicht geholfen hat, durchsuche Google. Gute Google Abfragen brauchen einiges an Übung. Wenn du Google durchsuchst, wirst du normalerweise die Programmiersprache oder das Framework, das du verwendest, inkludieren. Außerdem solltest du die Ergebnisse auf einen aktuellen Zeitraum limitieren.", + "" + ], + [ + "//i.imgur.com/xipwagp.gif", + "Ein GIF das zeigt wie der untenstehende Link aufgerufen wird um in den \"Help Chat\" zu kommen um dort zu fragen: \"jquery doesn't run when my page loads\".", + "Falls das nicht geholfen hat, frag deine Freunde. Wenn du Probleme hast kannst du die anderen Camper in unserem Hilfe Chat fragen.", + "https://gitter.im/FreeCodeCamp/Help" + ], + [ + "//i.imgur.com/Hh8RpYX.gif", + "Ein GIF das zeigt wie durch die Challenge Übersicht gescrollt wird", + "Jetzt bist du bereit mit Programmieren zu starten. Der \"Map\" Button in der rechten oberen Ecke zeigt dir deine Challenge Übersicht. Wir empfehlen dir diese von Oben nach Unten in einer angemessenen Geschwindikeit durchzuführen. Unsere Open-Source Gemeinschaft ist permanent am Verbessern der Challenges, wundere dich also nicht falls diese sich ändern oder verschieben. Hab keine Angst davor zurück zu gehen - schau nur dass du vorankommst. Du kommst immer zu deiner aktuellsten Aufgabe indem du den \"Learn\" Button drückst.", + "" + ] + ] + }, + "es": { + "title": "Aprende que hacer si te quedas atascado", + "description": [ + [ + "//i.imgur.com/3aiJZA3.jpg", + "El texto \"Programar es difícil.\"", + "Programar es difícil. Quedarás atascado. Incluso programadores experimentados quedan atascados. La clave es saber como desatascarse.", + "" + ], + [ + "//i.imgur.com/oBX0jzR.jpg", + "El texto \"Volverse bueno programando requiere tiempo.\"", + "Volverse bueno programando requiere tiempo. No esperarías derrotar a un maestro del ajedrez después de jugar por 3 meses. No esperes crear el próximo Facebook después de programar 3 meses.", + "" + ], + [ + "//i.imgur.com/EoTfOyC.jpg", + "Una imagen de algunos de nuestros campistas programando juntos en Montreal.", + "Sigue practicando programación cada día y sal con otras personas que programen, y te volverás un programador listo para un trabajo.", + "" + ], + [ + "//i.imgur.com/wK0mcVh.jpg", + "Una imagen con el texto \"1. Lee el error 2. Busca en Google 3. Pide ayuda.", + "En cualquier momento en el que te quedes atascado o no sepas que hacer a continuación: Lee-Busca-Pregunta.", + "" + ], + [ + "//i.imgur.com/99BfAcK.jpg", + "Una imagen mostrando la documentación de jQuery", + "Primero, lee la documentación o el mensaje de error. Una habilidad clave que los buenos programadores poseen es el poder interpretar y seguir instrucciones.", + "" + ], + [ + "//i.imgur.com/GxvrsFb.gif", + "Un gif mostrándote como hacer una búsqueda avanzada en Google. Primero, escribimos la consulta \"jquery no corre cuando mi página carga\". Entonces damos clic en el botón de herramientas y cambiamos la selección de \"En cualquier momento\" a \"en el último año\". Entonces hacemos clic en un resultado o leemos a través del artículo y encontramos nuestra respuesta.", + "Si eso no ayudo, busca en Google. Realizar buenas búsquedas en Google requiere mucha práctica. Cuando buscas en Google, usualmente querrás incluir el lenguaje o entorno (framework) que estás usando. También querrás limitar los resultados a un período reciente.", + "" + ], + [ + "//i.imgur.com/xipwagp.gif", + "Un gif mostrándonos como seguir el enlace inferior para ir a nuestra sala de chat de ayuda y preguntar \"jquery no corre cuando mi página carga\".", + "Si eso no te ayudó, pregúntale a tus amigos. Si tienes problemas, puedes preguntar a tus compañeros campistas en nuestra sala de chat.", + "https://gitter.im/FreeCodeCamp/Help" + ], + [ + "//i.imgur.com/Hh8RpYX.gif", + "Un gif mostrándonos nuestro mapa de desafíos.", + "Ahora estas listo para empezar a programar. El botón de \"Mapa\" en tu esquina superior derecha te mostrará nuestro mapa de desafíos. Te recomendaos que completes los desafíos de arriba hacía abajo, a un ritmo sostenible. Nuestra comunidad de código abierto esta constantemente mejorando nuestros desafíos, así que no te sorprendas si cambian o se mueven alrededor. No te preocupes por volver hacia atrás - solo continúa avanzando. Siempre puedes ir a tu desafío más reciente pulsando el botón de \"Aprender\".", + "" + ] + ] + }, + "fr": { + "title": "Apprenez quoi faire quand vous êtes bloqué ?", + "description": [ + [ + "//i.imgur.com/3aiJZA3.jpg", + "Le texte \"Coder est difficile.\"", + "Coder est difficile. Vous serez bloqué un jour ou l'autre. Même les développeurs expérimentés peuvent être bloqués. La solution est de savoir comment se débloquer.", + "" + ], + [ + "//i.imgur.com/oBX0jzR.jpg", + "Le texte \"Etre un bon développeur prend du temps.\"", + "Etre un bon développeur prend du temps. Vous ne pouvez pas vous attendre à battre un maitre des echecs aprés 3 mois d'apprentissage. Ne vous attendez pas de construire le prochain Facebook aprés 3 mois de coding.", + "" + ], + [ + "//i.imgur.com/EoTfOyC.jpg", + "Une image de quelques uns de nos développeurs codant ensemble à Montreal.", + "Continuez de développer tous les jours et fréquentez d'autres développeurs et vous deviendrez un développeur prêt à l'emploi.", + "" + ], + [ + "//i.imgur.com/wK0mcVh.jpg", + "Une image avec le texte \"1. Lisez l'erreur 2. Cherchez sur Google 3. Demandez de l'aide.", + "Chaque fois que vous êtes bloqué ou que vous ne savez pas quoi faire : Lisez-Cherchez-Demandez.", + "" + ], + [ + "//i.imgur.com/99BfAcK.jpg", + "Une image montrant la document jQuery", + "Lisez d'abord la documentation ou les messages d'erreurs. Le principal atout que les bon développeurs ont est la capacité d'interpréter et ensuite de suivre les instructions.", + "" + ], + [ + "//i.imgur.com/GxvrsFb.gif", + "Une image vous montrant comment fiare des recherches avancées sur Google. On commence par rentrer la requète \"jquery ne fonctionne pas lors du chargement de ma page\". Puis nous cliquons sur la barre de recherche et changeons la case à cocher \"Any time\" cochons la case \"au cours de l'année précédente\". Puis nous cliquons sur le résultat et lisons l'article et trouvons notre réponse.", + "Si cela ne vous aide pas, recherchez sur Google. De bonnes recherches sur Google demande pas mal de pratique. Quand vous recherchez sur Google, vous devez inclure le langage ou le framework que vous utilisez. Vous voulez aussi limiter vos résultats a une période récente.", + "" + ], + [ + "//i.imgur.com/xipwagp.gif", + "Une image vous montrant le lien ci-dessous pour rejoindre le char et demander \"jquery ne fonctionne pas lors du chargement de ma page\".", + "Si cela ne vous aide pas, demande à vos amis. Si vous avez des difficultés, vous pouvez demander aux autres développeurs sur le chat.", + "https://gitter.im/FreeCodeCamp/Help" + ], + [ + "//i.imgur.com/Hh8RpYX.gif", + "Une image vous montrant le cursus de notre carte des défis.", + "Maintenant vous être prêt pour commencer à coder. Le boutton \"Map\" situé en haut à droite de votre écran vous montrera notre carte des défis. Nous vous recommandons de les completer du début jusqu'à la fin, régulièrement. Notre communauté open source continue de d'améliorer nos défis, ne soyez donc pas surpris si ils changent ou évoluent. Ce n'est pas la peine de revenir en arrière, continuez à progresser. Vous pouvez toujours accéder à nos derniers défis juste en cliquant sur le boutton \"Learn\".", + "" + ] + ] + }, + "it": { + "title": "Impara Cosa fare se ti trovi in ​​difficoltà", + "description": [ + [ + "//i.imgur.com/3aiJZA3.jpg", + "Il testo \" Programmare è difficile. \"", + "Programmare è difficile. Prima o poi rimarrai bloccato. Succede anche ai programmatori esperti. La chiave è sapere come uscirne.", + "" + ], + [ + "//i.imgur.com/oBX0jzR.jpg", + "Il testo \" Ci vuole tempo per diventare bravi sviluppatori. \"", + "Ci vuole tempo per diventare bravi sviluppatori. Non ti aspetteresti di battere un campione di scacchi dopo aver giocato per 3 mesi. Non aspettarti di realizzare il prossimo Facebook dopo aver programmato per 3 mesi.", + "" + ], + [ + "//i.imgur.com/EoTfOyC.jpg", + "Un'immagine di alcuni dei nostri campers che programmano insieme a Montreal.", + "Continua ad esercitarti a programmare tutti i giorni e discuti con altre persone che programmano, e potrai diventare uno sviluppatore pronto per il lavoro.", + "" + ], + [ + "//i.imgur.com/wK0mcVh.jpg", + "Un'immagine con il testo \" 1. Leggi l'errore 2. Cerca su Google 3. Chiedi aiuto. ", + "Ogni volta che ti trovi in ​​difficoltà o non sai cosa fare. Leggi-Cerca-Chiedi", + "" + ], + [ + "//i.imgur.com/99BfAcK.jpg", + "Un'immagine che mostra la documentazione di jQuery", + "Innanzitutto, leggi la documentazione o il messaggio di errore. Una competenza chiave che i buoni programmatori hanno è la capacità di interpretare e seguire le istruzioni.", + "" + ], + [ + "//i.imgur.com/GxvrsFb.gif", + "Una gif che mostra come fare una ricerca avanzata su Google. Prima di tutto, si inserisce la query \"jquery non viene eseguito quando la mia pagina si carica\". Poi si clicca sul pulsante strumenti di ricerca e si cambia l'opzione \"Qualsiasi data\" selezionando a \"Ultimo Anno\". Poi si clicca su un risultato, si legge l'articolo e troviamo la nostra risposta.", + "Se ciò non è stato d'aiuto, cerca su Google. Ci vuole un sacco di pratica per formulare delle buone query. Quando si esegue una ricerca su Google, di solito si preferisce includere il linguaggio o il framework che si sta utilizzando. Inoltre è meglio limitare i risultati ad un periodo recente.", + "" + ], + [ + "//i.imgur.com/xipwagp.gif", + "Una gif che mostra come seguire il link qui sotto per andare alla chat room di supporto e chiedere \"jquery non viene eseguito quando la mia pagina si carica\".", + "Se anche questo non ha aiutato, chiedi ai tuoi amici. In caso di problemi, puoi chiedere ai tuoi amici campers nelle nostre chat rooms di supporto.", + "https://gitter.im/FreeCodeCamp/Help" + ], + [ + "//i.imgur.com/Hh8RpYX.gif", + "Una gif che mostra come scorrere la nostra mappa di problemi.", + "Ora sei pronto per iniziare a scrivere codice. Il tasto \"Mappa\" in alto a destra ti mostrerà la nostra mappa dei problemi. Ti consigliamo di completarli dall'alto verso il basso, ad un ritmo sostenibile. La nostra comunità open source sta migliorando costantemente i nostri problemi, quindi non stupirti se cambiano o se vengono spostati. Non preoccuparti di tornare indietro - continua ad andare avanti.", + "" + ] + ] + }, + "pt-br": { + "title": "Aprenda o que fazer se você ficar empacado(a)", + "description": [ + [ + "//i.imgur.com/lzKvwU2.jpg", + "A frase \"Programar é difícil.\"", + "Programar é difícil. Em alguns momentos você não vai conseguir sair do lugar. Acontece até com desenvolvedores experientes. A chave é saber como desempacar.", + "" + ], + [ + "//i.imgur.com/sfsidp6.jpg", + "A frase \"Leva tempo para ficar bom em programação\"", + "Leva-se tempo para ficar bom em programação. Você não esperaria vencer um mestre de xadrez depois de jogar por apenas 3 meses. Não espere conseguir construir o próximo Facebook após programar por apenas 3 meses.", + "" + ], + [ + "//i.imgur.com/EoTfOyC.jpg", + "Uma imagem de alguns dos nossos campistas programando juntos em Montreal.", + "Continue a praticar programação todos os dias, socialize com outras pessoas que programam e você se tornará um desenvolvedor pronto para o mercado de trabalho.", + "" + ], + [ + "//i.imgur.com/EWWZBag.jpg", + "Uma imagem com o texto \"1. Leia o erro 2. Pesquisa no Google 3. Peça ajuda.\"", + "Toda vez que você ficar preso ou não souber o que fazer: Leia-Pesquise-Pergunte.", + "" + ], + [ + "//i.imgur.com/99BfAcK.jpg", + "Uma imagem mostrando a documentação do jQuery", + "Primeiro, leia a documentação ou mensagem de erro. Uma habilidade fundamental que bons programadores têm é a capacidade de interpretar e, em seguida, seguir instruções.", + "" + ], + [ + "//i.imgur.com/GxvrsFb.gif", + "Um gif mostrando como fazer uma pesquisa avançada no Google. Primeiro, inserimos a consulta \"jquery não executa quando a minha página carrega\". Em seguida, clique no botão ferramentas de pesquisa e altere a caixa de seleção de \"Qualquer momento\" para \"Ano passado\". Em seguida, clique em um resultado, leia o artigo e encontre a nossa resposta.", + "Se isso não ajudar, pesquise no Google. Pesquisar no Google de maneira eficiente requer prática. Quando você pesquisa no Google, é aconselhável incluir a linguagem de programação ou framework que você está usando, e tambem limitar os resultados para um período recente.", + "" + ], + [ + "//i.imgur.com/LZYU7p2.gif", + "Um gif mostrando-nos usando link abaixo para ir na sala de bate-papo de ajuda e dizendo que \"jquery não executa quando a minha página carrega\".", + "Se isso não ajudar, pergunte a seus amigos. Se você tiver problemas, você pode perguntar a seus companheiros campistas na nossa sala de ajuda no bate-papo.", + "https://gitter.im/FreeCodeCamp/Help" + ], + [ + "//i.imgur.com/ZRgXraT.gif", + "Um gif mostrando a navegação no nosso mapa de desafios.", + "Agora você está pronto para começar a programar. O botão \"Mapa\" no canto superior direito irá mostrar o nosso mapa de desafios. Recomendamos que você complete estes desafios de cima para baixo, em um ritmo adequado. Nossa comunidade open source está constantemente melhorando os nossos desafios por isso não se surpreenda se os desafios mudarem. Não se preocupe em voltar - apenas continue seguindo em frente.", + "" + ] + ] + }, + "ru": { + "title": "Узнайте, что делать если вы застряли", + "description": [ + [ + "//i.imgur.com/3aiJZA3.jpg", + "Текст \"Программировать сложно.\"", + "Программировать сложно. Вы будете застревать. Даже опытные программисты застревают. Главное знать как выйти из этого положения.", + "" + ], + [ + "//i.imgur.com/oBX0jzR.jpg", + "Текст \"Требуется время, чтобы стать хорошим программистом.\"", + "Требуется время, чтобы стать хорошим программистом. Вы же не будете ожидать победить мастера по шахматам после игры в шахматы в течение трёх месяцев. Не ожидайте, что построите следующий Facebook через три месяца занятий программированием.", + "" + ], + [ + "//i.imgur.com/EoTfOyC.jpg", + "Изображение нескольких участников проекта, программирующих вместе в Монтреале.", + "Практикуйте ежедневное программирование и общение с другими людьми, занимающимися программированием, и вы станете подготовленным к работе программистом.", + "" + ], + [ + "//i.imgur.com/wK0mcVh.jpg", + "Изображение с текстом \"1. Читай ошибку 2. Ищи с помощью Google 3. Проси помощи.", + "В любой момент, если вы застряли или не знаете, что делать дальше: Читайте-Ищите-Спрашивайте.", + "" + ], + [ + "//i.imgur.com/99BfAcK.jpg", + "Изображение документации jQuery", + "Во-первых, читайте документацию или сообщение об ошибке. Ключевой навык, которым обладают хорошие программисты - способность истолковать и следовать инструкциям впоследствии.", + "" + ], + [ + "//i.imgur.com/GxvrsFb.gif", + "Анимация, показывающая как осуществлять продвинутый поиск Google. Во-первых, мы вводим запрос \"jquery не запускается при загрузке страницы\". Затем мы нажимаем кнопку вызова меню поисковых инструментов и меняем значение периода с \"За всё время\" на \"За год\". Затем мы нажимаем на результат и просматриваем статью на предмет наличия решения.", + "Если это не помогло, поищите с помощью Google. Способность писать хорошие Google-запросы - результат продолжительной практики. Когда вы ищите с помощью Google, обычно вам стоит указывать применяемый язык или используемую библиотеку. Также, вам стоит ограничивать результаты поиска недавним периодом.", + "" + ], + [ + "//i.imgur.com/xipwagp.gif", + "Анимация, показывающая переход по ссылке ниже в чат для помощи и задание вопроса \"jquery не запускается при загрузке страницы\".", + "Если это не помогло, спросите ваших друзей. Если вы не можете решить проблему, вы можете обратиться к вашим приятелям, участникам проекта, в нашем чате для помощи.", + "https://gitter.im/FreeCodeCamp/Help" + ], + [ + "//i.imgur.com/Hh8RpYX.gif", + "Анимация, показывающая прокрутку нашей карты заданий.", + "Теперь вы готовы начать программировать. Нажатие на кнопку \"Карта\" в правом верхнем углу вашего экрана отобразит вам нашу карту заданий. Мы рекоммендуем выполнять задания сверху-вниз в равномерном темпе. Наше открытое сообщество постоянно улучшает наши задания, так что не удивляйтесь, если они будут меняться или перемещаться. Не переживайте о том, чтобы сдвинуться назад - просто продолжайте двигаться вперёд. Вы всегда можете перейти к вашему недавнему заданию путём нажатия на кнопку \"Учиться\".", + "" + ] + ] + }, + "tw": { + "title": "了解當你卡關時該怎麼做", + "description": [ + [ + "//i.imgur.com/3aiJZA3.jpg", + "重點 \"寫程式不簡單.\"", + "寫程式很難, 你一定會卡關. 就算是資深工程師也會卡關. 關鍵是該怎麼突破難關", + "" + ], + [ + "//i.imgur.com/oBX0jzR.jpg", + "重點 \"專精需要時間\"", + "專精寫程式需要花很多時間, 你不會期待說只有學三個月的西洋棋, 就能打敗棋王, 因此也別期待只花三個月就能打造下一個臉書.", + "" + ], + [ + "//i.imgur.com/EoTfOyC.jpg", + "一些 Camper 們在蒙特羅一起開發的照片", + "每天持續的練習, 和其他工程師交流, 那麼你將能成為一個無懼於市場挑戰的工程師.", + "" + ], + [ + "//i.imgur.com/wK0mcVh.jpg", + "\"1. 了解錯誤 2. Google 搜尋 3. 問問題.\"", + "每當你卡關而不知道怎麼辦時, 記得這三個步驟", + "" + ], + [ + "//i.imgur.com/99BfAcK.jpg", + "jQuery 文件一角", + "首先, 閱讀文件或錯誤訊息, 依照步驟操作或解讀問題是好工程師的關鍵能力", + "" + ], + [ + "//i.imgur.com/GxvrsFb.gif", + "Google 進階搜尋的示意圖, 首先我們輸入 \"jquery doesn't run when my page loads\", 然後點搜尋工具按鈕, 把\"任何時間\" (Any time) 換成過去一年內(within the last year), 查看結果, 仔細閱讀文章並找到我們想要的答案.", + "如果這招沒用, 就試著再搜一次. 下搜尋關鍵字也需要很多的練習, 當搜尋時, 你通常也會想在關鍵字中加入使用的語言和框架, 你也會希望限制搜尋結果為近期的文章", + "" + ], + [ + "//i.imgur.com/xipwagp.gif", + "依以下連結在聊天室中問 \"jquery doesn't run when my page loads\" 的示意圖", + "如果搜尋沒用, 問你的朋友. 如果有問題, 歡迎在我們的聊天室中發問", + "https://gitter.im/FreeCodeCamp/Help" + ], + [ + "//i.imgur.com/Hh8RpYX.gif", + "我們的挑戰地圖的示意圖", + "現在你已經準備好開始寫程式了. 右上角的地圖(Map)按鈕可以顯示我們的挑戰地圖, 我們建議從上到下, 用輕鬆的步調完成它. 我們的開源社群會持續的更新挑戰項目, 所以如果地圖有更動, 別太意外. 別擔心你的學習進度會退後, 持續向前吧.", + "" + ] + ] + } + } + } + ] +} diff --git a/seed/math-challenges/01-responsive-web-design/applied-accessibility.json b/seed/math-challenges/01-responsive-web-design/applied-accessibility.json new file mode 100644 index 0000000000..bfebcb911f --- /dev/null +++ b/seed/math-challenges/01-responsive-web-design/applied-accessibility.json @@ -0,0 +1,1160 @@ +{ + "name": "Applied Accessibility", + "order": 3, + "time": "5 hours", + "helpRoom": "Help", + "challenges": [ + { + "id": "587d774b367417b2b2512a9b", + "title": "Introduction to the Applied Accessibility Challenges", + "description": [ + [ + "", + "", + "\"Accessibility\" generally means having web content and a user interface that can be understood, navigated, and interacted with by a broad audience. This includes people with visual, auditory, mobility, or cognitive disabilities.", + "" + ], + [ + "", + "", + "Websites should be open and accessible to everyone, regardless of a user's abilities or resources. Some users rely on assistive technology such as a screen reader or voice recognition software. Other users may be able to navigate through a site only using a keyboard. Keeping the needs of various users in mind when developing your project can go a long way towards creating an open web.", + "" + ], + [ + "", + "", + "Here are three general concepts this section will explore throughout the following challenges:


  1. have well-organized code that uses appropriate markup

  2. ensure text alternatives exist for non-text and visual content

  3. create an easily-navigated page that's keyboard-friendly



Having accessible web content is an ongoing challenge. A great resource for your projects going forward is the W3 Consortium's Web Content Accessibility Guidelines (WCAG). They set the international standard for accessibility and provide a number of criteria you can use to check your work.", + "" + ] + ], + "releasedOn": "Feb 17, 2017", + "challengeSeed": [], + "tests": [], + "type": "waypoint", + "challengeType": 7, + "isRequired": false, + "translations": {} + }, + { + "id": "587d774c367417b2b2512a9c", + "title": "Add a Text Alternative to Images for Visually Impaired Accessibility", + "description": [ + "It's likely you've seen an alt attribute on an img tag in other challenges. Alt text describes the content of the image and provides a text-alternative. This helps in case the image fails to load or can't be seen by a user. It's also used by search engines to understand what an image contains to include it in search results. Here's an example:", + "<img src="importantLogo.jpeg" alt="Company logo">", + "People with visual impairments rely on screen readers to convert web content to an audio interface. They won't get information if it's only presented visually. For images, screen readers can access the alt attribute and read its contents to deliver key information.", + "Good alt text is short but descriptive, and meant to briefly convey the meaning of the image. You should always include an alt attribute on your image. Per HTML5 specification, this is now considered mandatory.", + "
", + "Camper Cat happens to be both a coding ninja and an actual ninja, and is building a website to share his knowledge. The profile picture he wants to use shows his skills, and should be appreciated by all site visitors. Add an alt attribute in the img tag, that explains Camper Cat is doing karate. (The image src doesn't link to an actual file, so you should see the alt text in the display.)" + ], + "challengeSeed": [ + "" + ], + "tests": [ + "assert($('img').attr('alt'), 'message: Your img tag should have an alt attribute, and it should not be empty.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d774c367417b2b2512a9d", + "title": "Know When Alt Text Should be Left Blank", + "description": [ + "In the last challenge, you learned that including an alt attribute on img tags is mandatory. However, sometimes images are grouped with a caption already describing them, or are used for decoration only. In these cases alt text may seem redundant or unnecessary.", + "In situations when an image is already explained with text content, or does not add meaning to a page, the img still needs an alt attribute, but it can be set to an empty string. Here's an example:", + "<img src="visualDecoration.jpeg" alt="">", + "Background images usually fall under the 'decorative' label as well. However, they are typically applied with CSS rules, and therefore not part of the markup screen readers process.", + "Note
For images with a caption, you may still want to include alt text, since it helps search engines catalog the content of the image.", + "
", + "Camper Cat has coded a skeleton page for the blog part of his website. He's planning to add a visual break between his two articles with a decorative image of a samurai sword. Add an alt attribute to the img tag and set it to an empty string. (Note that the image src doesn't link to an actual file - don't worry that there are no swords showing in the display.)" + ], + "challengeSeed": [ + "

Deep Thoughts with Master Camper Cat

", + "
", + "

Defeating your Foe: the Red Dot is Ours!

", + "

To Come...

", + "
", + "", + "", + "", + "
", + "

Is Chuck Norris a Cat Person?

", + "

To Come...

", + "
" + ], + "tests": [ + "assert(!($('img').attr('alt') == undefined), 'message: Your img tag should have an alt attribute.');", + "assert($('img').attr('alt') == '', 'message: The alt attribute should be set to an empty string.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d774d367417b2b2512a9e", + "title": "Use Headings to Show Hierarchical Relationships of Content", + "description": [ + "Headings (h1 through h6 elements) are workhorse tags that help provide structure and labeling to your content. Screen readers can be set to read only the headings on a page so the user gets a summary. This means it is important for the heading tags in your markup to have semantic meaning and relate to each other, not be picked merely for their size values.", + "Semantic meaning means that the tag you use around content indicates the type of information it contains.", + "If you were writing a paper with an introduction, a body, and a conclusion, it wouldn't make much sense to put the conclusion as a subsection of the body in your outline. It should be its own section. Similarly, the heading tags in a webpage need to go in order and indicate the hierarchical relationships of your content.", + "Headings with equal (or higher) rank start new implied sections, headings with lower rank start subsections of the previous one.", + "As an example, a page with an h2 element followed by several subsections labeled with h4 tags would confuse a screen reader user. With six choices, it's tempting to use a tag because it looks better in a browser, but you can use CSS to edit the relative sizing.", + "One final point, each page should always have one (and only one) h1 element, which is the main subject of your content. This and the other headings are used in part by search engines to understand the topic of the page.", + "
", + "Camper Cat wants a page on his site dedicated to becoming a ninja. Help him fix the headings so his markup gives semantic meaning to the content, and shows the proper parent-child relationships of his sections. Change all the h5 tags to the proper heading level to indicate they are subsections of the h2 ones." + ], + "challengeSeed": [ + "

How to Become a Ninja

", + "
", + "

Learn the Art of Moving Stealthily

", + "
How to Hide in Plain Sight
", + "
How to Climb a Wall
", + "", + "

Learn the Art of Battle

", + "
How to Strengthen your Body
", + "
How to Fight like a Ninja
", + "", + "

Learn the Art of Living with Honor

", + "
How to Breathe Properly
", + "
How to Simplify your Life
", + "
" + ], + "tests": [ + "assert($('h3').length === 6, 'message: Your code should have six h3 tags.');", + "assert($('h5').length === 0, 'message: Your code should not have any h5 tags.');" + ], + "solutions": [], + "hints": [ + "All the h5 tags are siblings, and should be changed to the same new heading level." + ], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d774e367417b2b2512a9f", + "title": "Jump Straight to the Content Using the main Element", + "description": [ + "HTML5 introduced a number of new elements that give developers more options while also incorporating accessibility features. These tags include main, header, footer, nav, article, and section, among others.", + "By default, a browser renders these elements similarly to the humble div. However, using them where appropriate gives additional meaning in your markup. The tag name alone can indicate the type of information it contains, which adds semantic meaning to that content. Assistive technologies can access this information to provide better page summary or navigation options to their users.", + "The main element is used to wrap (you guessed it) the main content, and there should be only one per page. It's meant to surround the information that's related to the central topic of your page. It's not meant to include items that repeat across pages, like navigation links or banners.", + "The main tag also has an embedded landmark feature that assistive technology can use to quickly navigate to the main content. If you've ever seen a \"Jump to Main Content\" link at the top of a page, using a main tag automatically gives assistive devices that functionality.", + "
", + "Camper Cat has some big ideas for his ninja weapons page. Help him set up his markup by adding opening and closing main tags between the header and footer (covered in other challenges). Keep the main tags empty for now." + ], + "challengeSeed": [ + "
", + "

Weapons of the Ninja

", + "
", + "", + "", + "", + "
" + ], + "tests": [ + "assert($('main').length == 1, 'message: Your code should have one main tag.');", + "assert(code.match(/<\\/header>\\s*?
\\s*?<\\/main>/gi), 'message: The main tags should be between the closing header tag and the opening footer tag.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d774e367417b2b2512aa0", + "title": "Wrap Content in the article Element", + "description": [ + "article is another one of the new HTML5 elements that adds semantic meaning to your markup. Article is a sectioning element, and is used to wrap independent, self-contained content. The tag works well with blog entries, forum posts, or news articles.", + "Determining whether content can stand alone is usually a judgement call, but there are a couple simple tests you can use. Ask yourself if you removed all surrounding context, would that content still make sense? Similarly for text, would the content hold up if it were in an RSS feed?", + "Remember that folks using assistive technologies rely on organized, semantically meaningful markup to better understand your work.", + "Note about section and div
The section element is also new with HTML5, and has a slightly different semantic meaning than article. An article is for standalone content, and a section is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the article, then each chapter is a section. When there's no relationship between groups of content, then use a div.", + "
<div> - groups content
<section> - groups related content
<article> - groups independent, self-contained content
", + "
", + "Camper Cat used article tags to wrap the posts on his blog page, but he forgot to use them around the top one. Change the div tag to use an article tag instead." + ], + "challengeSeed": [ + "

Deep Thoughts with Master Camper Cat

", + "
", + "
", + "

The Garfield Files: Lasagna as Training Fuel?

", + "

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

", + "
", + "", + " \"\"", + "", + "
", + "

Defeating your Foe: the Red Dot is Ours!

", + "

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...

", + "
", + "", + " \"\"", + "", + "
", + "

Is Chuck Norris a Cat Person?

", + "

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

", + "
", + "
" + ], + "tests": [ + "assert($('article').length == 3, 'message: Your code should have three article tags.');", + "assert($('div').length == 0, 'message: Your code should not have any div tags.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d7787367417b2b2512aa1", + "title": "Make Screen Reader Navigation Easier with the header Landmark", + "description": [ + "The next HTML5 element that adds semantic meaning and improves accessibility is the header tag. It's used to wrap introductory information or navigation links for its parent tag, and works well around content that's repeated at the top on multiple pages.", + "header shares the embedded landmark feature you saw with main, allowing assistive technologies to quickly navigate to that content.", + "Note
header is meant for use in the body tag of your HTML document. This is different than the head element, which contains the page's title, meta information, etc.", + "
", + "Camper Cat is writing some great articles about ninja training, and wants to add a page for them to his site. Change the top div that currently contains the h1 to a header tag instead." + ], + "challengeSeed": [ + "", + "", + "
", + "

Training with Camper Cat

", + "
", + "", + "", + "
", + "
", + "

Stealth & Agility Training

", + "

Climb foliage quickly using a minimum spanning tree approach

", + "

No training is NP-complete without parkour

", + "
", + "
", + "

Combat Training

", + "

Dispatch multiple enemies with multithreaded tactics

", + "

Goodbye world: 5 proven ways to knock out an opponent

", + "
", + "
", + "

Weapons Training

", + "

Swords: the best tool to literally divide and conquer

", + "

Breadth-first or depth-first in multi-weapon training?

", + "
", + "
", + "" + ], + "tests": [ + "assert($('header').length == 1, 'message: Your code should have one header tag.');", + "assert($('header').children('h1').length == 1, 'message: Your header tags should wrap around the h1.');", + "assert($('div').length == 0, 'message: Your code should not have any div tags.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d7788367417b2b2512aa2", + "title": "Make Screen Reader Navigation Easier with the nav Landmark", + "description": [ + "The nav element is another HTML5 item with the embedded landmark feature for easy screen reader navigation. This tag is meant to wrap around the main navigation links in your page.", + "If there are repeated site links at the bottom of the page, it isn't necessary to markup those with a nav tag as well. Using a footer (covered in the next challenge) is sufficient.", + "
", + "Camper Cat included navigation links at the top of his training page, but wrapped them in a div. Change the div to a nav tag to improve the accessibility on his page." + ], + "challengeSeed": [ + "", + "
", + "

Training with Camper Cat

", + "", + "
", + " ", + "
", + "", + "
", + "
", + "
", + "

Stealth & Agility Training

", + "

Climb foliage quickly using a minimum spanning tree approach

", + "

No training is NP-complete without parkour

", + "
", + "
", + "

Combat Training

", + "

Dispatch multiple enemies with multithreaded tactics

", + "

Goodbye world: 5 proven ways to knock out an opponent

", + "
", + "
", + "

Weapons Training

", + "

Swords: the best tool to literally divide and conquer

", + "

Breadth-first or depth-first in multi-weapon training?

", + "
", + "
", + "" + ], + "tests": [ + "assert($('nav').length == 1, 'message: Your code should have one nav tag.');", + "assert($('nav').children('ul').length == 1, 'message: Your nav tags should wrap around the ul and its list items.');", + "assert($('div').length == 0, 'message: Your code should not have any div tags.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d7788367417b2b2512aa3", + "title": "Make Screen Reader Navigation Easier with the footer Landmark", + "description": [ + "Similar to header and nav, the footer element has a built-in landmark feature that allows assistive devices to quickly navigate to it. It's primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page.", + "
", + "Camper Cat's training page is making good progress. Change the div he used to wrap his copyright information at the bottom of the page to a footer element." + ], + "challengeSeed": [ + "", + "
", + "

Training

", + " ", + "
", + "
", + "
", + "

Stealth & Agility Training

", + "

Climb foliage quickly using a minimum spanning tree approach

", + "

No training is NP-complete without parkour

", + "
", + "
", + "

Combat Training

", + "

Dispatch multiple enemies with multithreaded tactics

", + "

Goodbye world: 5 proven ways to knock out an opponent

", + "
", + "
", + "

Weapons Training

", + "

Swords: the best tool to literally divide and conquer

", + "

Breadth-first or depth-first in multi-weapon training?

", + "
", + "
", + "", + "", + "
© 2016 Camper Cat
", + "", + "", + "" + ], + "tests": [ + "assert($('footer').length == 1, 'message: Your code should have one footer tag.');", + "assert($('div').length == 0, 'message: Your code should not have any div tags.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d7789367417b2b2512aa4", + "title": "Improve Accessibility of Audio Content with the audio Element", + "description": [ + "HTML5's audio element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to the deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript.", + "The audio tag supports the controls attribute. This shows the browser default play, pause, and other controls, and supports keyboard functionality. This is a boolean attribute, meaning it doesn't need a value, its presence on the tag turns the setting on.", + "Here's an example:", + "
<audio id="meowClip" controls>
<source src="audio/meow.mp3" type="audio/mpeg" />
<source src="audio/meow.ogg" type="audio/ogg" />
</audio>
", + "Note
Multimedia content usually has both visual and auditory components. It needs synchronized captions and a transcript so users with visual and/or auditory impairments can access it. Generally, a web developer is not responsible for creating the captions or transcript, but needs to know to include them.", + "
", + "Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an audio element after the p. Include the controls attribute. Then place a source tag inside the audio tags with the src attribute set to \"https://s3.amazonaws.com/freecodecamp/screen-reader.mp3\" and type attribute set to \"audio/mpeg\".", + "Note
The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users." + ], + "challengeSeed": [ + "", + "
", + "

Real Coding Ninjas

", + "
", + "
", + "

A sound clip of Zersiax's screen reader in action.

", + " ", + " ", + " ", + "
", + "" + ], + "tests": [ + "assert($('audio').length === 1, 'message: Your code should have one audio tag.');", + "assert($('audio').attr('controls'), 'message: The audio tag should have the controls attribute.');", + "assert($('source').length === 1, 'message: Your code should have one source tag.');", + "assert($('audio').children('source').length === 1, 'message: Your source tag should be inside the audio tags.');", + "assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3', 'message: The value for the src attribute on the source tag should match the link in the instructions exactly.');", + "assert($('source').attr('type') === 'audio/mpeg', 'message: Your code should include a type attribute on the source tag with a value of audio/mpeg.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d778a367417b2b2512aa5", + "title": "Improve Chart Accessibility with the figure Element", + "description": [ + "HTML5 introduced the figure element, along with the related figcaption. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. This gives a two-fold accessibility boost by both semantically grouping related content, and providing a text alternative that explains the figure.", + "For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments. Another challenge covers how to move a table version of the chart's data off-screen (using CSS) for screen reader users.", + "Here's an example - note that the figcaption goes inside the figure tags and can be combined with other elements:", + "
<figure>
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
<br>
<figcaption>
Master Camper Cat demonstrates proper form of a roundhouse kick.
</figcaption>
</figure>
", + "
", + "Camper Cat is hard at work creating a stacked bar chart showing the amount of time per week to spend training in stealth, combat, and weapons. Help him structure his page better by changing the div tag he used to a figure tag, and the p tag that surrounds the caption to a figcaption tag." + ], + "challengeSeed": [ + "", + "
", + "

Training

", + " ", + "
", + "
", + "
", + " ", + " ", + "
", + " ", + "
", + "

Breakdown per week of time to spend training in stealth, combat, and weapons.

", + "
", + " ", + " ", + "
", + "
", + "

Stealth & Agility Training

", + "

Climb foliage quickly using a minimum spanning tree approach

", + "

No training is NP-complete without parkour

", + "
", + "
", + "

Combat Training

", + "

Dispatch multiple enemies with multithreaded tactics

", + "

Goodbye world: 5 proven ways to knock out an opponent

", + "
", + "
", + "

Weapons Training

", + "

Swords: the best tool to literally divide and conquer

", + "

Breadth-first or depth-first in multi-weapon training?

", + "
", + "
", + "
© 2016 Camper Cat
", + "" + ], + "tests": [ + "assert($('figure').length == 1, 'message: Your code should have one figure tag.');", + "assert($('figcaption').length == 1, 'message: Your code should have one figcaption tag.');", + "assert($('div').length == 0, 'message: Your code should not have any div tags.');", + "assert($('p').length == 0, 'message: Your code should not have any p tags.');", + "assert($('figure').children('figcaption').length == 1, 'message: The figcaption should be a child of the figure tag.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d778a367417b2b2512aa6", + "title": "Improve Form Field Accessibility with the label Element", + "description": [ + "Improving accessibility with semantic HTML markup applies to using both appropriate tag names as well as attributes. The next several challenges cover some important scenarios using attributes in forms.", + "The label tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The for attribute on a label tag explicitly associates that label with the form control and is used by screen readers.", + "The value of the for attribute must be the same as the value of the id attribute of the form control. Here's an example:", + "
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>
", + "
", + "Camper Cat expects a lot of interest in his thoughtful blog posts, and wants to include an email sign up form. Add a for attribute on the email label that matches the id on its input field." + ], + "challengeSeed": [ + "", + "
", + "

Deep Thoughts with Master Camper Cat

", + "
", + "
", + "
", + "

Sign up to receive Camper Cat's blog posts by email here!

", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + "
", + "
", + "
", + "

The Garfield Files: Lasagna as Training Fuel?

", + "

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

", + "
", + " \"\"", + "
", + "

Defeating your Foe: the Red Dot is Ours!

", + "

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...

", + "
", + " \"\"", + "
", + "

Is Chuck Norris a Cat Person?

", + "

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

", + "
", + "
© 2016 Camper Cat
", + "" + ], + "tests": [ + "assert($('label').attr('for'), 'message: Your code should have a for attribute on the label tag that is not empty.');", + "assert($('label').attr('for') == 'email', 'message: Your for attribute value should match the id value on the email input.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d778b367417b2b2512aa7", + "title": "Wrap Radio Buttons in a fieldset Element for Better Accessibility", + "description": [ + "The next form topic covers accessibility of radio buttons. Each choice is given a label with a for attribute tying to the id of the corresponding item as covered in the last challenge. Since radio buttons often come in a group where the user must choose one, there's a way to semantically show the choices are part of a set.", + "The fieldset tag surrounds the entire grouping of radio buttons to achieve this. It often uses a legend tag to provide a description for the grouping, which is read by screen readers for each choice in the fieldset element.", + "The fieldset wrapper and legend tag are not necessary when the choices are self-explanatory, like a gender selection. Using a label with the for attribute for each radio button is sufficient.", + "Here's an example:", + "
<form>
<fieldset>
<legend>Choose one of these three items:</legend>
<input id="one" type="radio" name="items" value="one">
<label for="one">Choice One</label><br>
<input id="two" type="radio" name="items" value="two">
<label for="two">Choice Two</label><br>
<input id="three" type="radio" name="items" value="three">
<label for="three">Choice Three</label>
</fieldset>
</form>
", + "
", + "Camper Cat wants information about the ninja level of his users when they sign up for his email list. He's added a set of radio buttons, and learned from our last lesson to use label tags with for attributes for each choice. Go Camper Cat! However, his code still needs some help. Change the div tag surrounding the radio buttons to a fieldset tag, and change the p tag inside it to a legend." + ], + "challengeSeed": [ + "", + "
", + "

Deep Thoughts with Master Camper Cat

", + "
", + "
", + "
", + "

Sign up to receive Camper Cat's blog posts by email here!

", + " ", + " ", + " ", + " ", + " ", + "
", + "

What level ninja are you?

", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + " ", + " ", + "
", + "
", + "
", + "

The Garfield Files: Lasagna as Training Fuel?

", + "

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

", + "
", + " \"\"", + "
", + "

Defeating your Foe: the Red Dot is Ours!

", + "

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...

", + "
", + " \"\"", + "
", + "

Is Chuck Norris a Cat Person?

", + "

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

", + "
", + "
© 2016 Camper Cat
", + "" + ], + "tests": [ + "assert($('fieldset').length == 1, 'message: Your code should have a fieldset tag around the radio button set.');", + "assert($('legend').length == 1, 'message: Your code should have a legend tag around the text asking what level ninja a user is.');", + "assert($('div').length == 0, 'message: Your code should not have any div tags.');", + "assert($('p').length == 4, 'message: Your code should no longer have a p tag around the text asking what level ninja a user is.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d778b367417b2b2512aa8", + "title": "Add an Accessible Date Picker", + "description": [ + "Forms often include the input field, which can be used to create several different form controls. The type attribute on this element indicates what kind of input will be created.", + "You may have noticed the text and submit input types in prior challenges, and HTML5 introduced an option to specify a date field. Depending on browser support, a date picker shows up in the input field when it's in focus, which makes filling in a form easier for all users.", + "For older browsers, the type will default to text, so it helps to show users the expected date format in the label or as placeholder text just in case.", + "Here's an example:", + "
<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">
", + "
", + "Camper Cat is setting up a mortal combat tournament and wants to ask his competitors to see what date works best. Add an input tag with a type attribute of \"date\", an id attribute of \"pickdate\", and a name attribute of \"date\"." + ], + "challengeSeed": [ + "", + "
", + "

Tournaments

", + "
", + "
", + "
", + "

Mortal Combat Tournament Survey

", + "
", + "

Tell us the best date for the competition

", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + "
", + "
", + "
", + "
© 2016 Camper Cat
", + "" + ], + "tests": [ + "assert($('input').length == 2, 'message: Your code should add one input tag for the date selector field.');", + "assert($('input').attr('type') == 'date', 'message: Your input tag should have a type attribute with a value of date.');", + "assert($('input').attr('id') == 'pickdate', 'message: Your input tag should have an id attribute with a value of pickdate.');", + "assert($('input').attr('name') == 'date', 'message: Your input tag should have a name attribute with a value of date.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d778c367417b2b2512aa9", + "title": "Standardize Times with the HTML5 datetime Attribute", + "description": [ + "Continuing with the date theme, HTML5 also introduced the time element along with a datetime attribute to standardize times. This is an inline element that can wrap a date or time on a page. A valid format of that date is held by the datetime attribute. This is the value accessed by assistive devices. It helps avoid confusion by stating a standardized version of a time, even if it's written in an informal or colloquial manner in the text.", + "Here's an example:", + "<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>", + "
", + "Camper Cat's mortal combat survey results are in! Wrap a time tag around the text \"Thursday, September 15<sup>th</sup>\" and add a datetime attribute to it set to \"2016-09-15\"." + ], + "challengeSeed": [ + "", + "
", + "

Tournaments

", + "
", + "
", + "

Mortal Combat Tournament Survey Results

", + " ", + " ", + " ", + "

Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Combat tournament is Thursday, September 15th. May the best ninja win!

", + " ", + " ", + " ", + "
", + "

Comments:

", + "
", + "

Posted by: Sub-Zero on

", + "

Johnny Cage better be there, I'll finish him!

", + "
", + "
", + "

Posted by: Doge on

", + "

Wow, much combat, so mortal.

", + "
", + "
", + "

Posted by: The Grim Reaper on

", + "

Looks like I'll be busy that day.

", + "
", + "
", + "
", + "
© 2016 Camper Cat
", + "" + ], + "tests": [ + "assert($('time').text().match(/Thursday, September 15th/g), 'message: Your time tags should wrap around the text \"Thursday, September 15<sup>th</sup>\".');", + "assert($('time').attr('datetime'), 'message: Your time tag should have a datetime attribute that is not empty.');", + "assert($('time').attr('datetime') === \"2016-09-15\", 'message: Your datetime attribute should be set to a value of 2016-09-15.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d778d367417b2b2512aaa", + "title": "Make Elements Only Visible to a Screen Reader by Using Custom CSS", + "description": [ + "Have you noticed that all of the applied accessibility challenges so far haven't used any CSS? This is to show the importance of a logical document outline, and using semantically meaningful tags around your content before introducing the visual design aspect.", + "However, CSS's magic can also improve accessibility on your page when you want to visually hide content meant only for screen readers. This happens when information is in a visual format (like a chart), but screen reader users need an alternative presentation (like a table) to access the data. CSS is used to position the screen reader-only elements off the visual area of the browser window.", + "Here's an example of the CSS rules that accomplish this:", + "
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
", + "Note
The following CSS approaches will NOT do the same thing:", + "
    ", + "
  • display: none; or visibility: hidden; hides content for everyone, including screen reader users
  • ", + "
  • Zero values for pixel sizes, such as width: 0px; height: 0px; removes that element from the flow of your document, meaning screen readers will ignore it
  • ", + "
", + "
", + "Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an sr-only class, but the CSS rules aren't filled in yet. Give the position an absolute value, the left a -10000px value, and the width and height both 1px values." + ], + "challengeSeed": [ + "", + " ", + "", + "", + "
", + "

Training

", + " ", + "
", + "
", + "

Master Camper Cat's Beginner Three Week Training Program

", + "
", + " ", + "

[Stacked bar chart]

", + "
", + "
Breakdown per week of time to spend training in stealth, combat, and weapons.
", + "
", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + "
Hours of Weekly Training in Stealth, Combat, and Weapons
Stealth & AgilityCombatWeaponsTotal
Week One35210
Week Two45312
Week Three46313
", + "
", + "
", + "

Stealth & Agility Training

", + "

Climb foliage quickly using a minimum spanning tree approach

", + "

No training is NP-complete without parkour

", + "
", + "
", + "

Combat Training

", + "

Dispatch multiple enemies with multithreaded tactics

", + "

Goodbye, world: 5 proven ways to knock out an opponent

", + "
", + "
", + "

Weapons Training

", + "

Swords: the best tool to literally divide and conquer

", + "

Breadth-first or depth-first in multi-weapon training?

", + "
", + "
© 2016 Camper Cat
", + "" + ], + "tests": [ + "assert($('.sr-only').css('position') == 'absolute', 'message: Your code should set the position property of the sr-only class to a value of absolute.');", + "assert($('.sr-only').css('left') == '-10000px', 'message: Your code should set the left property of the sr-only class to a value of -10000px.');", + "assert(code.match(/width:\\s*?1px/gi), 'message: Your code should set the width property of the sr-only class to a value of 1 pixel.');", + "assert(code.match(/height:\\s*?1px/gi), 'message: Your code should set the height property of the sr-only class to a value of 1 pixel.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d778e367417b2b2512aab", + "title": "Improve Readability with High Contrast Text", + "description": [ + "Low contrast between the foreground and background colors can make text difficult to read. Sufficient contrast improves the readability of your content, but what exactly does \"sufficient\" mean?", + "The Web Content Accessibility Guidelines (WCAG) recommend at least a 4.5 to 1 contrast ratio for normal text. The ratio is calculated by comparing the relative luminance values of two colors. This ranges from 1:1 for the same color, or no contrast, to 21:1 for white against black, the strongest contrast. There are many contrast checking tools available online that calculate this ratio for you.", + "
", + "Camper Cat's choice of light gray text on a white background for his recent blog post has a 1.5:1 contrast ratio, making it hard to read. Change the color of the text from the current gray (#D3D3D3) to a darker gray (#636363) to improve the contrast ratio to 6:1." + ], + "challengeSeed": [ + "", + " ", + "", + "", + "
", + "

Deep Thoughts with Master Camper Cat

", + "
", + "
", + "

A Word on the Recent Catnip Doping Scandal

", + "

The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.

", + "

As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.

", + "
", + "" + ], + "tests": [ + "assert($('body').css('color') == 'rgb(99, 99, 99)', 'message: Your code should change the text color for the body to the darker gray.');", + "assert($('body').css('background-color') == 'rgb(255, 255, 255)', 'message: Your code should not change the background-color for the body.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d778f367417b2b2512aac", + "title": "Avoid Colorblindness Issues by Using Sufficient Contrast", + "description": [ + "Color is a large part of visual design, but its use introduces two accessibility issues. First, color alone should not be used as the only way to convey important information because screen reader users won't see it. Second, foreground and background colors need sufficient contrast so colorblind users can distinguish them.", + "Previous challenges covered having text alternatives to address the first issue. The last challenge introduced contrast checking tools to help with the second. The WCAG-recommended contrast ratio of 4.5:1 applies for color use as well as gray-scale combinations.", + "Colorblind users have trouble distinguishing some colors from others - usually in hue but sometimes lightness as well. You may recall the contrast ratio is calculated using the relative luminance (or lightness) values of the foreground and background colors.", + "In practice, the 4.5:1 ratio can be reached by darkening the darker color and lightening the lighter one with the aid of a color contrast checker. Darker colors on the color wheel are considered to be blues, violets, magentas, and reds, whereas lighter colors are oranges, yellows, greens, and blue-greens.", + "
", + "Camper Cat is experimenting with using color for his blog text and background, but his current combination of a greenish background-color with maroon text color has a 2.5:1 contrast ratio. You can easily adjust the lightness of the colors since he declared them using the CSS hsl() property (which stands for hue, saturation, lightness) by changing the third argument. Increase the background-color lightness value from 35% to 55%, and decrease the color lightness value from 20% to 15%. This improves the contrast to 5.9:1." + ], + "challengeSeed": [ + "", + " ", + "", + "", + "
", + "

Deep Thoughts with Master Camper Cat

", + "
", + "
", + "

A Word on the Recent Catnip Doping Scandal

", + "

The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.

", + "

As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.

", + "
", + "" + ], + "tests": [ + "assert(code.match(/color:\\s*?hsl\\(0,\\s*?55%,\\s*?15%\\)/gi), 'message: Your code should only change the lightness value for the text color property to a value of 15%.');", + "assert(code.match(/background-color:\\s*?hsl\\(120,\\s*?25%,\\s*?55%\\)/gi), 'message: Your code should only change the lightness value for the background-color property to a value of 55%.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d778f367417b2b2512aad", + "title": "Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information", + "description": [ + "There are various forms of colorblindness. These can range from a reduced sensitivity to a certain wavelength of light to the inability to see color at all. The most common form is a reduced sensitivity to detect greens.", + "For example, if two similar green colors are the foreground and background color of your content, a colorblind user may not be able to distinguish them. Close colors can be thought of as neighbors on the color wheel, and those combinations should be avoided when conveying important information.", + "Note
Some online color picking tools include visual simulations of how colors appear for different types of colorblindness. These are great resources in addition to online contrast checking calculators.", + "
", + "Camper Cat is testing different styles for an important button, but the yellow (#FFFF33) background-color and the green (#33FF33) text color are neighboring hues on the color wheel and virtually indistinguishable for some colorblind users. (Their similar lightness also fails the contrast ratio check). Change the text color to a dark blue (#003366) to solve both problems." + ], + "challengeSeed": [ + "", + " ", + "", + "", + "
", + "

Danger!

", + "
", + " ", + "" + ], + "tests": [ + "assert($('button').css('color') == 'rgb(0, 51, 102)', 'message: Your code should change the text color for the button to the dark blue.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d778f367417b2b2512aae", + "title": "Give Links Meaning by Using Descriptive Link Text", + "description": [ + "Screen reader users have different options for what type of content their device reads. This includes skipping to (or over) landmark elements, jumping to the main content, or getting a page summary from the headings. Another option is to only hear the links available on a page.", + "Screen readers do this by reading the link text, or what's between the anchor (a) tags. Having a list of \"click here\" or \"read more\" links isn't helpful. Instead, you should use brief but descriptive text within the a tags to provide more meaning for these users.", + "
", + "The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (a) tags so they wrap around the text \"information about batteries\" instead of \"Click here\"." + ], + "challengeSeed": [ + "", + "
", + "

Deep Thoughts with Master Camper Cat

", + "
", + "
", + "

Defeating your Foe: the Red Dot is Ours!

", + "

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for information about batteries

", + "
", + "" + ], + "tests": [ + "assert($('a').text().match(/information about batteries/g), 'message: Your code should move the anchor a tags from around the words \"Click here\" to wrap around the words \"information about batteries\".');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d7790367417b2b2512aaf", + "title": "Make Links Navigatable with HTML Access Keys", + "description": [ + "HTML offers the accesskey attribute to specify a shortcut key to activate or bring focus to an element. This can make navigation more efficient for keyboard-only users.", + "HTML5 allows this attribute to be used on any element, but it's particularly useful when it's used with interactive ones. This includes links, buttons, and form controls.", + "Here's an example:", + "<button accesskey="b">Important Button</button>", + "
", + "Camper Cat wants the links around the two blog article titles to have keyboard shortcuts so his site's users can quickly navigate to the full story. Add an accesskey attribute to both links and set the first one to \"g\" (for Garfield) and the second one to \"c\" (for Chuck Norris)." + ], + "challengeSeed": [ + "", + "
", + "

Deep Thoughts with Master Camper Cat

", + "
", + "
", + " ", + " ", + "

The Garfield Files: Lasagna as Training Fuel?

", + " ", + " ", + "

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

", + "
", + "
", + " ", + " ", + "

Is Chuck Norris a Cat Person?

", + " ", + " ", + "

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

", + "
", + "
© 2016 Camper Cat
", + "" + ], + "tests": [ + "assert($('#first').attr('accesskey'), 'message: Your code should add an accesskey attribute to the a tag with the id of \"first\".');", + "assert($('#second').attr('accesskey'), 'message: Your code should add an accesskey attribute to the a tag with the id of \"second\".');", + "assert($('#first').attr('accesskey') == 'g', 'message: Your code should set the accesskey attribute on the a tag with the id of \"first\" to \"g\". Note that case matters.');", + "assert($('#second').attr('accesskey') == 'c', 'message: Your code should set the accesskey attribute on the a tag with the id of \"second\" to \"c\". Note that case matters.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d7790367417b2b2512ab0", + "title": "Use tabindex to Add Keyboard Focus to an Element", + "description": [ + "The HTML tabindex attribute has three distinct functions relating to an element's keyboard focus. When it's on a tag, it indicates that element can be focused on. The value (an integer that's positive, negative, or zero) determines the behavior.", + "Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup. This same functionality can be given to other elements, such as div, span, and p, by placing a tabindex=\"0\" attribute on them. Here's an example:", + "<div tabindex="0">I need keyboard focus!</div>", + "Note
A negative tabindex value (typically -1) indicates that an element is focusable, but is not reachable by the keyboard. This method is generally used to bring focus to content programmatically (like when a div used for a pop-up window is activated), and is beyond the scope of these challenges.", + "
", + "Camper Cat created a new survey to collect information about his users. He knows input fields automatically get keyboard focus, but he wants to make sure his keyboard users pause at the instructions while tabbing through the items. Add a tabindex attribute to the p tag and set its value to \"0\". Bonus - using tabindex also enables the CSS pseudo-class :focus to work on the p tag." + ], + "challengeSeed": [ + "", + " ", + "", + "", + "
", + "

Ninja Survey

", + "
", + "
", + "
", + " ", + " ", + "

Instructions: Fill in ALL your information then click Submit

", + " ", + " ", + " ", + "
", + "
", + " What level ninja are you?", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + "
", + "
", + " Select your favorite weapons:", + " ", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + "
", + " ", + "

", + "
", + "
© 2016 Camper Cat
", + "" + ], + "tests": [ + "assert($('p').attr('tabindex'), 'message: Your code should add a tabindex attribute to the p tag that holds the form instructions.');", + "assert($('p').attr('tabindex') == '0', 'message: Your code should set the tabindex attribute on the p tag to a value of 0.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d7790367417b2b2512ab1", + "title": "Use tabindex to Specify the Order of Keyboard Focus for Several Elements", + "description": [ + "The tabindex attribute also specifies the exact tab order of elements. This is achieved when the value of the attribute is set to a positive number of 1 or higher.", + "Setting a tabindex=\"1\" will bring keyboard focus to that element first. Then it cycles through the sequence of specified tabindex values (2, 3, etc.), before moving to default and tabindex=\"0\" items.", + "It's important to note that when the tab order is set this way, it overrides the default order (which uses the HTML source). This may confuse users who are expecting to start navigation from the top of the page. This technique may be necessary in some circumstances, but in terms of accessibility, take care before applying it.", + "Here's an example:", + "<div tabindex="1">I get keyboard focus, and I get it first!</div>", + "<div tabindex="2">I get keyboard focus, and I get it second!</div>", + "
", + "Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search input and submit input form controls to be the first two items in the tab order. Add a tabindex attribute set to \"1\" to the search input, and a tabindex attribute set to \"2\" to the submit input." + ], + "challengeSeed": [ + "", + "
", + "

Even Deeper Thoughts with Master Camper Cat

", + " ", + "
", + "
", + " ", + " ", + " ", + " ", + " ", + " ", + " ", + "
", + "

Inspirational Quotes

", + "
", + "

“There's no Theory of Evolution, just a list of creatures I've allowed to live.”
", + " - Chuck Norris

", + "
", + "
", + "

“Wise men say forgiveness is divine, but never pay full price for late pizza.”
", + " - TMNT

", + "
", + "
© 2016 Camper Cat
", + "" + ], + "tests": [ + "assert($('#search').attr('tabindex'), 'message: Your code should add a tabindex attribute to the search input tag.');", + "assert($('#submit').attr('tabindex'), 'message: Your code should add a tabindex attribute to the submit input tag.');", + "assert($('#search').attr('tabindex') == '1', 'message: Your code should set the tabindex attribute on the search input tag to a value of 1.');", + "assert($('#submit').attr('tabindex') == '2', 'message: Your code should set the tabindex attribute on the submit input tag to a value of 2.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + } + ] +} \ No newline at end of file diff --git a/seed/math-challenges/01-responsive-web-design/applied-visual-design.json b/seed/math-challenges/01-responsive-web-design/applied-visual-design.json new file mode 100644 index 0000000000..c01f499a62 --- /dev/null +++ b/seed/math-challenges/01-responsive-web-design/applied-visual-design.json @@ -0,0 +1,2749 @@ +{ + "name": "Applied Visual Design", + "order": 2, + "time": "5 hours", + "helpRoom": "Help", + "challenges": [ + { + "id": "587d7790367417b2b2512ab2", + "title": "Introduction to the Applied Visual Design Challenges", + "description": [ + [ + "", + "", + "Visual Design in web development is a broad topic. It combines typography, color theory, graphics, animation, and page layout to help deliver a site's message. The definition of good design is a well-discussed subject, with many books on the theme.

At a basic level, most web content provides a user with information. The visual design of the page can influence its presentation and a user's experience. In web development, HTML gives structure and semantics to a page's content, and CSS controls the layout and appearance of it.

This section covers some of the basic tools developers use to create their own visual designs.", + "" + ] + ], + "releasedOn": "Feb 17, 2017", + "challengeSeed": [], + "tests": [], + "type": "waypoint", + "challengeType": 7, + "isRequired": false, + "translations": {} + }, + { + "id": "587d7791367417b2b2512ab3", + "title": "Create Visual Balance Using the text-align Property", + "description": [ + "This section of the curriculum focuses on Applied Visual Design. The first group of challenges build on the given card layout to show a number of core principles.", + "Text is often a large part of web content. CSS has several options for how to align it with the text-align property.", + "The justify property causes all lines of text except the last line to meet the left and right edges of the line box.", + "
", + "Align the h4 tag's text, which says \"Google\", to the center. Then justify the paragraph tag which contains information about how Google was founded." + ], + "challengeSeed": [ + "", + "
", + "
", + "
", + "

Google

", + "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "
", + "
", + " Larry Page", + " Sergey Brin", + "
", + "
", + "
" + ], + "tests": [ + "assert($('h4').css('text-align') == 'center', 'message: Your code should use the text-align property on the h4 tag to set it to center.');", + "assert($('p').css('text-align') == 'justify', 'message: Your code should use the text-align property on the p tag to set it to justify.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d7791367417b2b2512ab4", + "title": "Adjust the Width of an Element Using the width Property", + "description": [ + "You can specify the width of an element using the width property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:", + "
img {
width: 220px;
}
", + "
", + "Add a width property to the entire card and set it to an absolute value of 245px. Use the fullCard class to select the element." + ], + "challengeSeed": [ + "", + "
", + "
", + "
", + "

Google

", + "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "
", + "
", + " Larry Page", + " Sergey Brin", + "
", + "
", + "
" + ], + "tests": [ + "assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), 'message: Your code should change the width property of the card to 245 pixels by using the fullCard class selector.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d7791367417b2b2512ab5", + "title": "Adjust the Height of an Element Using the height Property", + "description": [ + "You can specify the height of an element using the height property in CSS, similar to the width property. Here's an example that changes the height of an image to 20px:", + "
img {
height: 20px;
}
", + "
", + "Add a height property to the h4 tag and set it to 25px." + ], + "challengeSeed": [ + "", + "
", + "
", + "
", + "

Google

", + "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "
", + "
", + " Larry Page", + " Sergey Brin", + "
", + "
", + "
" + ], + "tests": [ + "assert($('h4').css('height') == '25px', 'message: Your code should change the h4 height property to a value of 25 pixels.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781a367417b2b2512ab7", + "title": "Use the strong Tag to Make Text Bold", + "description": [ + "To make text bold, you can use the strong tag. This is often used to draw attention to text and symbolize that it is important. With the strong tag, the browser applies the CSS of font-weight: bold; to the element.", + "
", + "Wrap a strong tag around \"Stanford University\" inside the p tag." + ], + "challengeSeed": [ + "", + "
", + "
", + "
", + "

Google

", + "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "
", + "
", + " Larry Page

", + " Sergey Brin", + "
", + "
", + "
" + ], + "tests": [ + "assert($('strong').length == 1, 'message: Your code should add one strong tag to the markup.');", + "assert($('p').children('strong').length == 1, 'message: The strong tag should be inside the p tag.');", + "assert($('strong').text().match(/Stanford University/gi), 'message: The strong tag should wrap around the words \"Stanford University\".');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781a367417b2b2512ab8", + "title": "Use the u Tag to Underline Text", + "description": [ + "To underline text, you can use the u tag. This is often used to signify that a section of text is important, or something to remember. With the u tag, the browser applies the CSS of text-decoration: underline; to the element.", + "
", + "Wrap the u tag around the text \"Ph.D. students\". It should not include the parent div that has the class of cardText.", + "Note
Try to avoid using the u tag when it could be confused for a link. Anchor tags also have a default underlined formatting." + ], + "challengeSeed": [ + "", + "
", + "
", + "
", + "

Google

", + "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "
", + "
", + " Larry Page

", + " Sergey Brin", + "
", + "
", + "
" + ], + "tests": [ + "assert($('u').length === 1, 'message: Your code should add a u tag to the markup.');", + "assert($('u').text().indexOf('Ph.D. students') > -1, 'message: The u tag should wrap around the text \"Ph.D. students\".');", + "assert($('u').children('div').length === 0, 'message: The u tag should not wrap around the parent div tag.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781a367417b2b2512ab9", + "title": "Use the em Tag to Italicize Text", + "description": [ + "To emphasize text, you can use the em tag. This displays text as italicized, as the browser applies the CSS of font-style: italic; to the element.", + "
", + "Wrap an em tag around the paragraph tag to give it emphasis." + ], + "challengeSeed": [ + "", + "
", + "
", + "
", + "

Google

", + "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "
", + "
", + " Larry Page

", + " Sergey Brin", + "
", + "
", + "
" + ], + "tests": [ + "assert($('em').length == 1, 'message: Your code should add an em tag to the markup.');", + "assert($('em').children('p').length == 1, 'message: The em tag should wrap around the p tag and its contents.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781b367417b2b2512aba", + "title": "Use the del Tag to Strikethrough Text", + "description": [ + "To strikethrough text, which is when a horizontal line cuts across the characters, you can use the del tag. It shows that a section of text is no longer valid. With the del tag, the browser applies the CSS of text-decoration: line-through; to the element.", + "
", + "Wrap the del tag around \"Google\" inside the h4 tag and then add the word Alphabet beside it, which should not have the strikethrough formatting." + ], + "challengeSeed": [ + "", + "
", + "
", + "
", + "

Google

", + "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "
", + "
", + " Larry Page

", + " Sergey Brin", + "
", + "
", + "
" + ], + "tests": [ + "assert($('del').length == 1, 'message: Your code should add one del tag to the markup.');", + "assert($('del').text().match(/Google/gi) && !$('del').text().match(/Alphabet/gi), 'message: A del tag should wrap around the Google text in the h4 tag. It should not contain the word Alphabet.');", + "assert($('h4').html().match(/Alphabet/gi), 'message: Include the word Alphabet in the h4 tag, without strikethrough formatting.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781b367417b2b2512abb", + "title": "Create a Horizontal Line Using the hr Element", + "description": [ + "You can use the hr tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content.", + "
", + "Add an hr tag underneath the h4 which contains the card title.", + "Note
In HTML, hr is a self-closing tag, and therefore doesn't need a separate closing tag." + ], + "challengeSeed": [ + "", + "
", + "
", + "
", + "

GoogleAlphabet

", + " ", + "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "
", + "
", + " Larry Page

", + " Sergey Brin", + "
", + "
", + "
" + ], + "tests": [ + "assert($('hr').length == 1, 'message: Your code should add an hr tag to the markup.');", + "assert(code.match(/<\\/h4>\\s*?|\\s*?\\/>)\\s*?/gi), 'message: The hr tag should come between the title and the paragraph.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781b367417b2b2512abc", + "title": "Adjust the background-color Property of Text", + "description": [ + "Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a background-color to the element holding the text you want to emphasize. This challenge uses rgba() instead of hex codes or normal rgb().", + "
rgba stands for:
r = red
g = green
b = blue
a = alpha/level of opacity
", + "The RGB values can range from 0 to 255. The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear. rgba() is great to use in this case, as it allows you to adjust the opacity. This means you don't have to completely block out the background.", + "You'll use background-color: rgba(45, 45, 45, 0.1) for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1.", + "
", + "To make the text stand out more, adjust the background-color of the h4 element to the given rgba() value.", + "Also for the h4, remove the height property and add padding of 10px." + ], + "challengeSeed": [ + "", + "
", + "
", + "
", + "

Alphabet

", + "
", + "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "
", + "
", + " Larry Page

", + " Sergey Brin", + "
", + "
", + "
" + ], + "tests": [ + "assert(code.match(/background-color:\\s*?rgba\\(\\s*?45\\s*?,\\s*?45\\s*?,\\s*?45\\s*?,\\s*?0?\\.1\\s*?\\)/gi), 'message: Your code should add a background-color property to the h4 element set to rgba(45, 45, 45, 0.1).');", + "assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px', 'message: Your code should add a padding property to the h4 element and set it to 10 pixels.');", + "assert(!($('h4').css('height') == '25px'), 'message: The height property on the h4 element should be removed.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781b367417b2b2512abd", + "title": "Adjust the Size of a Header Versus a Paragraph Tag", + "description": [ + "The font size of header tags (h1 through h6) should generally be larger than the font size of paragraph tags. This makes it easier for the user to visually understand the layout and level of importance of everything on the page. You use the font-size property to adjust the size of the text in an element.", + "
", + "To make the heading significantly larger than the paragraph, change the font-size of the h4 tag to 27 pixels." + ], + "challengeSeed": [ + "", + "
", + "
", + "
", + "

Alphabet

", + "
", + "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "
", + "
", + " Larry Page

", + " Sergey Brin", + "
", + "
", + "
" + ], + "tests": [ + "assert($('h4').css('font-size') == '27px', 'message: Your code should add a font-size property to the h4 element set to 27 pixels.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781b367417b2b2512abe", + "title": "Add a box-shadow to a Card-like Element", + "description": [ + "The box-shadow property applies one or more shadows to an element.", + "The box-shadow property takes values for offset-x (how far to push the shadow horizontally from the element), offset-y (how far to push the shadow vertically from the element), blur-radius, spread-radius and a color value, in that order. The blur-radius and spread-radius values are optional.", + "Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:", + "
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
", + "
", + "The element now has an id of thumbnail. With this selector, use the example CSS values above to place a box-shadow on the card." + ], + "challengeSeed": [ + "", + "
", + "
", + "
", + "

Alphabet

", + "
", + "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "
", + "
", + " Larry Page

", + " Sergey Brin", + "
", + "
", + "
" + ], + "tests": [ + "assert(code.match(/#thumbnail\\s*?{\\s*?box-shadow/g), 'message: Your code should add a box-shadow property for the thumbnail id.');", + "assert(code.match(/box-shadow:\\s*?0\\s+?10px\\s+?20px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.19\\),\\s*?0\\s+?6px\\s+?6px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.23\\)/gi), 'message: You should use the given CSS for the box-shadow value.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781c367417b2b2512abf", + "title": "Decrease the Opacity of an Element", + "description": [ + "The opacity property in CSS is used to adjust the opacity, or conversely, the transparency for an item.", + "
A value of 1 is opaque, which isn't transparent at all.
A value of 0.5 is half see-through.
A value of 0 is completely transparent.
", + "The value given will apply to the entire element, whether that's an image with some transparency, or the foreground and background colors for a block of text.", + "
", + "Set the opacity of the anchor tags to 0.7 using links class to select them." + ], + "challengeSeed": [ + "", + "
", + "
", + "
", + "

Alphabet

", + "
", + "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "
", + "
", + " Larry Page

", + " Sergey Brin", + "
", + "
", + "
" + ], + "tests": [ + "assert.approximately(parseFloat($('.links').css('opacity')), 0.7, 0.1, 'message: Your code should set the opacity property to 0.7 on the anchor tags by selecting the class of links.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781c367417b2b2512ac0", + "title": "Use the text-transform Property to Make Text Uppercase", + "description": [ + "The text-transform property in CSS is used to change the appearance of text. It's a convenient way to make sure text on a webpage appears consistently, without having to change the text content of the actual HTML elements.", + "The following table shows how the different text-transformvalues change the example text \"Transform me\".", + "
ValueResult
lowercase\"transform me\"
uppercase\"TRANSFORM ME\"
capitalize\"Transform Me\"
initialUse the default value
inheritUse the text-transform value from the parent element
noneDefault: Use the original text
", + "
", + "Transform the text of the h4 to be uppercase using the text-transform property." + ], + "challengeSeed": [ + "", + "
", + "
", + "
", + "

Alphabet

", + "
", + "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "
", + "
", + " Larry Page

", + " Sergey Brin", + "
", + "
", + "
" + ], + "tests": [ + "assert($('h4').css('text-transform') === 'uppercase', 'message: The h4 text should be uppercase.');", + "assert(($('h4').text() !== $('h4').text().toUpperCase()), 'message: The original text of the h4 should not be changed.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781c367417b2b2512ac2", + "title": "Set the font-size for Multiple Heading Elements", + "description": [ + "The font-size property is used to specify how large the text is in a given element. This rule can be used for multiple elements to create visual consistency of text on a page. In this challenge, you'll set the values for all h1 through h6 tags to balance the heading sizes.", + "
", + "
  • Set the font-size of the h1 tag to 68px.
  • Set the font-size of the h2 tag to 52px.
  • Set the font-size of the h3 tag to 40px.
  • Set the font-size of the h4 tag to 32px.
  • Set the font-size of the h5 tag to 21px.
  • Set the font-size of the h6 tag to 14px.
" + ], + "challengeSeed": [ + "", + "

This is h1 text

", + "

This is h2 text

", + "

This is h3 text

", + "

This is h4 text

", + "
This is h5 text
", + "
This is h6 text
" + ], + "tests": [ + "assert($('h1').css('font-size') == '68px', 'message: Your code should set the font-size property for the h1 tag to 68 pixels.');", + "assert($('h2').css('font-size') == '52px', 'message: Your code should set the font-size property for the h2 tag to 52 pixels.');", + "assert($('h3').css('font-size') == '40px', 'message: Your code should set the font-size property for the h3 tag to 40 pixels.');", + "assert($('h4').css('font-size') == '32px', 'message: Your code should set the font-size property for the h4 tag to 32 pixels.');", + "assert($('h5').css('font-size') == '21px', 'message: Your code should set the font-size property for the h5 tag to 21 pixels.');", + "assert($('h6').css('font-size') == '14px', 'message: Your code should set the font-size property for the h6 tag to 14 pixels.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781c367417b2b2512ac3", + "title": "Set the font-weight for Multiple Heading Elements", + "description": [ + "You set the font-size of each heading tag in the last challenge, here you'll adjust the font-weight.", + "The font-weight property sets how thick or thin characters are in a section of text.", + "
", + "
  • Set the font-weight of the h1 tag to 800.
  • Set the font-weight of the h2 tag to 600.
  • Set the font-weight of the h3 tag to 500.
  • Set the font-weight of the h4 tag to 400.
  • Set the font-weight of the h5 tag to 300.
  • Set the font-weight of the h6 tag to 200.
" + ], + "challengeSeed": [ + "", + "

This is h1 text

", + "

This is h2 text

", + "

This is h3 text

", + "

This is h4 text

", + "
This is h5 text
", + "
This is h6 text
" + ], + "tests": [ + "assert($('h1').css('font-weight') == '800', 'message: Your code should set the font-weight property for the h1 tag to 800.');", + "assert($('h2').css('font-weight') == '600', 'message: Your code should set the font-weight property for the h2 tag to 600.');", + "assert($('h3').css('font-weight') == '500', 'message: Your code should set the font-weight property for the h3 tag to 500.');", + "assert($('h4').css('font-weight') == '400', 'message: Your code should set the font-weight property for the h4 tag to 400.');", + "assert($('h5').css('font-weight') == '300', 'message: Your code should set the font-weight property for the h5 tag to 300.');", + "assert($('h6').css('font-weight') == '200', 'message: Your code should set the font-weight property for the h6 tag to 200.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781c367417b2b2512ac4", + "title": "Set the font-size of Paragraph Text", + "description": [ + "The font-size property in CSS is not limited to headings, it can be applied to any element containing text.", + "
", + "Change the value of the font-size property for the paragraph to 16px to make it more visible." + ], + "challengeSeed": [ + "", + "

", + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", + "

" + ], + "tests": [ + "assert($('p').css('font-size') == '16px', 'message: Your p tag should have a font-size of 16 pixels.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781d367417b2b2512ac5", + "title": "Set the line-height of Paragraphs", + "description": [ + "CSS offers the line-height property to change the height of each line in a block of text. As the name suggests, it changes the amount of vertical space that each line of text gets.", + "
", + "Add a line-height property to the p tag and set it to 25px." + ], + "challengeSeed": [ + "", + "

", + " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", + "

" + ], + "tests": [ + "assert($('p').css('line-height') == '25px', 'message: Your code should set the line-height of the p tag to 25 pixels.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781d367417b2b2512ac8", + "title": "Adjust the Hover State of an Anchor Tag", + "description": [ + "This challenge will touch on the usage of pseudo-classes. A pseudo-class is a keyword that can be added to selectors, in order to select a specific state of the element.", + "For example, the styling of an anchor tag can be changed for its hover state using the :hover pseudo-class selector. Here's the CSS to change the color of the anchor tag to red during its hover state:", + "
a:hover {
color: red;
}
", + "
", + "The code editor has a CSS rule to style all a tags black. Add a rule so that when the user hovers over the a tag, the color is blue." + ], + "challengeSeed": [ + "", + "CatPhotoApp" + ], + "tests": [ + "assert($('a').css('color') == 'rgb(0, 0, 0)', 'message: The anchor tag color should remain black, only add CSS rules for the :hover state.');", + "assert(code.match(/a:hover\\s*?{\\s*?color:\\s*?blue;\\s*?}/gi), 'message: The anchor tag should have a color of blue on hover.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781e367417b2b2512ac9", + "title": "Change an Element's Relative Position", + "description": [ + "CSS treats each HTML element as its own box, which is usually referred to as the CSS Box Model. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the normal flow of a document, but CSS offers the position property to override it.", + "When the position of an element is set to relative, it allows you to specify how CSS should move it relative to its current position in the normal flow of the page. It pairs with the CSS offset properties of left or right, and top or bottom. These say how many pixels, percentages, or ems to move the item away from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:", + "
p {
position: relative;
bottom: 10px;
}
", + "Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.", + "Note
Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.", + "
", + "Change the position of the h2 to relative, and use a CSS offset to move it 15 pixels away from the top of where it sits in the normal flow. Notice there is no impact on the positions of the surrounding h1 and p elements." + ], + "challengeSeed": [ + "", + "", + "

On Being Well-Positioned

", + "

Move me!

", + "

I still think the h2 is where it normally sits.

", + "" + ], + "tests": [ + "assert($('h2').css('position') == 'relative', 'message: The h2 element should have a position property set to relative.');", + "assert($('h2').css('top') == '15px', 'message: Your code should use a CSS offset to relatively position the h2 15px away from the top of where it normally sits.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781e367417b2b2512aca", + "title": "Move a Relatively Positioned Element with CSS Offsets", + "description": [ + "The CSS offsets of top or bottom, and left or right tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. This can be slightly confusing, because you're offsetting an element away from a given spot, which effectively moves it towards the opposite direction. As you saw in the last challenge, using the top offset moved the h2 downwards. Likewise, using a left offset effectively moves an item to the right.", + "
", + "Use CSS offsets to move the h2 15 pixels to the right and 10 pixels up." + ], + "challengeSeed": [ + "", + "", + "", + "", + "

On Being Well-Positioned

", + "

Move me!

", + "

I still think the h2 is where it normally sits.

", + "" + ], + "tests": [ + "assert($('h2').css('bottom') == '10px', 'message: Your code should use a CSS offset to relatively position the h2 10px upwards. In other words, move it 10px away from the bottom of where it normally sits.');", + "assert($('h2').css('left') == '15px', 'message: Your code should use a CSS offset to relatively position the h2 15px towards the right. In other words, move it 15px away from the left of where it normally sits.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781e367417b2b2512acb", + "title": "Lock an Element to its Parent with Absolute Positioning", + "description": [ + "The next option for the CSS position property is absolute, which locks the element in place relative to its parent container. Unlike the relative position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position.", + "One nuance with absolute positioning is that it will be locked relative to its closest positioned ancestor. If you forget to add a position rule to the parent item, (this is typically done using position: relative;), the browser will keep looking up the chain and ultimately default to the body tag.", + "
", + "Lock the #searchbar element to the top-right of its section parent by declaring its position as absolute. Give it top and right offsets of 0 pixels each." + ], + "challengeSeed": [ + "", + "", + "

Welcome!

", + "
", + "
", + " ", + " ", + " ", + "
", + "
", + "" + ], + "tests": [ + "assert($('#searchbar').css('position') == 'absolute', 'message: The #searchbar element should have a position set to absolute.');", + "assert($('#searchbar').css('top') == '0px', 'message: Your code should use the top CSS offset of 0 pixels on the #searchbar element.');", + "assert($('#searchbar').css('right') == '0px', 'message: Your code should use the right CSS offset of 0 pixels on the #searchbar element.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d781e367417b2b2512acc", + "title": "Lock an Element to the Browser Window with Fixed Positioning", + "description": [ + "The next layout scheme that CSS offers is the fixed position, which is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer \"realize\" where it is positioned, which may require some layout adjustments elsewhere.", + "One key difference from the absolute position is that the element won't move when the user scrolls.", + "
", + "The navigation bar in the code is labeled with an id of navbar. Change its position to fixed, and offset it 0 pixels from the top and 0 pixels from the left. Notice the (lack of) impact to the h1 position, it hasn't been pushed down to accommodate the navigation bar and would need to be adjusted separately." + ], + "challengeSeed": [ + "", + "", + "
", + "

Welcome!

", + " ", + "
", + "

I shift up when the #navbar is fixed to the browser window.

", + "" + ], + "tests": [ + "assert($('#navbar').css('position') == 'fixed', 'message: The #navbar element should have a position set to fixed.');", + "assert($('#navbar').css('top') == '0px', 'message: Your code should use the top CSS offset of 0 pixels on the #navbar element.');", + "assert($('#navbar').css('left') == '0px', 'message: Your code should use the left CSS offset of 0 pixels on the #navbar element.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a3367417b2b2512ace", + "title": "Push Elements Left or Right with the float Property", + "description": [ + "The next positioning tool does not actually use position, but sets the float property of an element. Floating elements are removed from the normal flow of a document and pushed to either the left or right of their containing parent element. It's commonly used with the width property to specify how much horizontal space the floated element requires.", + "
", + "The given markup would work well as a two-column layout, with the section and aside elements next to each other. Give the #left item a float of left and the #right item a float of right." + ], + "challengeSeed": [ + "", + " ", + "", + "", + "
", + "

Welcome!

", + "
", + "
", + "

Content

", + "

Good stuff

", + "
", + " ", + "" + ], + "tests": [ + "assert($('#left').css('float') == 'left', 'message: The element with id left should have a float value of left.');", + "assert($('#right').css('float') == 'right', 'message: The element with id right should have a float value of right.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a3367417b2b2512acf", + "title": "Change the Position of Overlapping Elements with the z-index Property", + "description": [ + "When elements are positioned to overlap, the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the z-index property can specify the order of how elements are stacked on top of one another. It must be an integer (i.e. a whole number and not a decimal), and higher values for the z-index property of an element move it higher in the stack than those with lower values.", + "
", + "Add a z-index property to the element with the class name of first (the red rectangle) and set it to a value of 2 so it covers the other element (blue rectangle)." + ], + "challengeSeed": [ + "", + "", + "
", + "
" + ], + "tests": [ + "assert($('.first').css('z-index') == '2', 'message: The element with class first should have a z-index value of 2.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a3367417b2b2512ad0", + "title": "Center an Element Horizontally Using the margin Property", + "description": [ + "Another positioning technique is to center a block element horizontally. One way to do this is to set its margin to a value of auto.", + "This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the display property to block.", + "
", + "Center the div on the page by adding a margin property with a value of auto." + ], + "challengeSeed": [ + "", + "
" + ], + "tests": [ + "assert(code.match(/margin:\\s*?auto;/g), 'message: The div should have a margin set to auto.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a3367417b2b2512ad1", + "title": "Learn about Complementary Colors", + "description": [ + "Color theory and its impact on design is a deep topic and only the basics are covered in the following challenges. On a website, color can draw attention to content, evoke emotions, or create visual harmony. Using different combinations of colors can really change the look of a website, and a lot of thought can go into picking a color palette that works with your content.", + "The color wheel is a useful tool to visualize how colors relate to each other - it's a circle where similar hues are neighbors and different hues are farther apart. When two colors are opposite each other on the wheel, they are called complementary colors. They have the characteristic that if they are combined, they \"cancel\" each other out and create a gray color. However, when placed side-by-side, these colors appear more vibrant and produce a strong visual contrast.", + "Some examples of complementary colors with their hex codes are:", + "
red (#FF0000) and cyan (#00FFFF)
green (#00FF00) and magenta (#FF00FF)
blue (#0000FF) and yellow (#FFFF00)
", + "There are many color picking tools available online that have an option to find the complement of a color.", + "Note
For all color challenges: Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges.", + "
", + "Change the background-color property of the blue and yellow classes to their respective colors. Notice how the colors look different next to each other than they do compared against the white background." + ], + "challengeSeed": [ + "", + "
", + "
" + ], + "tests": [ + "assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'message: The div element with class blue should have a background-color of blue.');", + "assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)', 'message: The div element with class yellow should have a background-color of yellow.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a4367417b2b2512ad2", + "title": "Learn about Tertiary Colors", + "description": [ + "Computer monitors and device screens create different colors by combining amounts of red, green, and blue light. This is known as the RGB additive color model in modern color theory. Red (R), green (G), and blue (B) are called primary colors. Mixing two primary colors creates the secondary colors cyan (G + B), magenta (R + B) and yellow (R + G). You saw these colors in the Complementary Colors challenge. These secondary colors happen to be the complement to the primary color not used in their creation, and are opposite to that primary color on the color wheel. For example, magenta is made with red and blue, and is the complement to green.", + "Tertiary colors are the result of combining a primary color with one of its secondary color neighbors. For example, red (primary) and yellow (secondary) make orange. This adds six more colors to a simple color wheel for a total of twelve.", + "There are various methods of selecting different colors that result in a harmonious combination in design. One example that can use tertiary colors is called the split-complementary color scheme. This scheme starts with a base color, then pairs it with the two colors that are adjacent to its complement. The three colors provide strong visual contrast in a design, but are more subtle than using two complementary colors.", + "Here are three colors created using the split-complement scheme:", + "
ColorHex Code
orange#FF7D00
cyan#00FFFF
raspberry#FF007D
", + "
", + "Change the background-color property of the orange, cyan, and raspberry classes to their respective colors. Make sure to use the hex codes as orange and raspberry are not browser-recognized color names." + ], + "challengeSeed": [ + "", + " ", + "
", + "
", + "
" + ], + "tests": [ + "assert(code.match(/.orange\\s*\\{\\s*background-color:\\s*(#FF7D00|#ff7d00);?\\s*\\}/g), 'message: The div element with class orange should have a background-color of orange.');", + "assert(code.match(/.cyan\\s*\\{\\s*background-color:\\s*(#00FFFF|#00ffff);?\\s*\\}/g), 'message: The div element with class cyan should have a background-color of cyan.');", + "assert(code.match(/.raspberry\\s*\\{\\s*background-color:\\s*(#FF007D|#ff007d);?\\s*\\}/g), 'message: The div element with class raspberry should have a background-color of raspberry.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a4367417b2b2512ad3", + "title": "Adjust the Color of Various Elements to Complementary Colors", + "description": [ + "The Complementary Colors challenge showed that opposite colors on the color wheel can make each other appear more vibrant when placed side-by-side. However, the strong visual contrast can be jarring if it's overused on a website, and can sometimes make text harder to read if it's placed on a complementary-colored background. In practice, one of the colors is usually dominant and the complement is used to bring visual attention to certain content on the page.", + "
", + "This page will use a shade of teal (#09A7A1) as the dominant color, and its orange (#FF790E) complement to visually highlight the sign-up buttons. Change the background-color of both the header and footer from black to the teal color. Then change the h2 text color to teal as well. Finally, change the background-color of the button to the orange color." + ], + "challengeSeed": [ + "", + "
", + "

Cooking with FCC!

", + "
", + "
", + "
", + "

Machine Learning in the Kitchen

", + "

Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like fetch Pringles.

", + " ", + "
", + "
", + "

Bisection Vegetable Chopping

", + "

This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.

", + " ", + "
", + "
", + "
", + "
©2016 FCC Kitchen
" + ], + "tests": [ + "assert($('header').css('background-color') == 'rgb(9, 167, 161)', 'message: The header element should have a background-color of #09A7A1.');", + "assert($('footer').css('background-color') == 'rgb(9, 167, 161)', 'message: The footer element should have a background-color of #09A7A1.');", + "assert($('h2').css('color') == 'rgb(9, 167, 161)', 'message: The h2 element should have a color of #09A7A1.');", + "assert($('button').css('background-color') == 'rgb(255, 121, 14)', 'message: The button element should have a background-color of #FF790E.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a4367417b2b2512ad4", + "title": "Adjust the Hue of a Color", + "description": [ + "Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the hsl() property as an alternative way to pick a color by directly stating these characteristics.", + "Hue is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In hsl(), hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360.", + "Saturation is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated.", + "Lightness is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color.", + "Here are a few examples of using hsl() with fully-saturated, normal lightness colors:", + "
ColorHSL
redhsl(0, 100%, 50%)
yellowhsl(60, 100%, 50%)
greenhsl(120, 100%, 50%)
cyanhsl(180, 100%, 50%)
bluehsl(240, 100%, 50%)
magentahsl(300, 100%, 50%)
", + "
", + "Change the background-color of each div element based on the class names (green, cyan, or blue) using hsl(). All three should have full saturation and normal lightness." + ], + "challengeSeed": [ + "", + " ", + "
", + "
", + "
" + ], + "tests": [ + "assert(code.match(/\\.green\\s*?{\\s*?background-color:\\s*?hsl/gi), 'message: Your code should use the hsl() property to declare the color green.');", + "assert(code.match(/\\.cyan\\s*?{\\s*?background-color:\\s*?hsl/gi), 'message: Your code should use the hsl() property to declare the color cyan.');", + "assert(code.match(/\\.blue\\s*?{\\s*?background-color:\\s*?hsl/gi), 'message: Your code should use the hsl() property to declare the color blue.');", + "assert($('.green').css('background-color') == 'rgb(0, 255, 0)', 'message: The div element with class green should have a background-color of green.');", + "assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'message: The div element with class cyan should have a background-color of cyan.');", + "assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'message: The div element with class blue should have a background-color of blue.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a4367417b2b2512ad5", + "title": "Adjust the Tone of a Color", + "description": [ + "The hsl() option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the 's' and 'l' of hsl() stand for saturation and lightness, respectively. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it.", + "
", + "The navigation bar on this site currently inherits its background-color from the header element. Starting with that color as a base, add a background-color to the nav element so it uses the same cyan hue, but has 80% saturation and 25% lightness values to change its tone and shade." + ], + "challengeSeed": [ + "", + " ", + "
", + "

Cooking with FCC!

", + " ", + "
" + ], + "tests": [ + "assert(code.match(/nav\\s*?{\\s*?background-color:\\s*?hsl\\(180,\\s*?80%,\\s*?25%\\)/gi), 'message: The nav element should have a background-color of the adjusted cyan tone using the hsl() property.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a5367417b2b2512ad6", + "title": "Create a Gradual CSS Linear Gradient", + "description": [ + "Applying a color on HTML elements is not limited to one flat hue. CSS provides the ability to use color transitions, otherwise known as gradients, on elements. This is accessed through the background property's linear-gradient() function. Here is the general syntax:", + "background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);", + "The first argument specifies the direction from which color transition starts - it can be stated as a degree, where 90deg makes a vertical gradient and 45deg is angled like a backslash. The following arguments specify the order of colors used in the gradient.", + "Example:", + "background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));", + "
", + "Use a linear-gradient() for the div element's background, and set it from a direction of 35 degrees to change the color from #CCFFFF to #FFCCCC.", + "Note
While there are other ways to specify a color value, like rgb() or hsl(), use hex values for this challenge." + ], + "challengeSeed": [ + "", + "", + "
" + ], + "tests": [ + "assert(code.match(/background:\\s*?linear-gradient\\(35deg,\\s*?(#CCFFFF|#CFF),\\s*?(#FFCCCC|#FCC)\\);/gi), 'message: The div element should have a linear-gradient background with the specified direction and colors.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a5367417b2b2512ad7", + "title": "Use a CSS Linear Gradient to Create a Striped Element", + "description": [ + "The repeating-linear-gradient() function is very similar to linear-gradient() with the major difference that it repeats the specified gradient pattern. repeating-linear-gradient() accepts a variety of values, but for simplicity, you'll work with an angle value and color stop values in this challenge.", + "The angle value is the direction of the gradient. Color stops are like width values that mark where a transition takes place, and are given with a percentage or a number of pixels.", + "In the example demonstrated in the code editor, the gradient starts with the color yellow at 0 pixels which blends into the second color blue at 40 pixels away from the start. Since the next color stop is also at 40 pixels, the gradient immediately changes to the third color green, which itself blends into the fourth color value red as that is 80 pixels away from the beginning of the gradient.", + "For this example, it helps to think about the color stops as pairs where every two colors blend together.", + "0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px", + "If every two color stop values are the same color, the blending isn't noticeable because it's between the same color, followed by a hard transition to the next color, so you end up with stripes.", + "
", + "Make stripes by changing the repeating-linear-gradient() to use a gradient angle of 45deg, then set the first two color stops to yellow, and finally the second two color stops to black." + ], + "challengeSeed": [ + "", + "", + "
" + ], + "tests": [ + "assert(code.match(/background:\\s*?repeating-linear-gradient\\(\\s*?45deg/gi), 'message: The angle of the repeating-linear-gradient() should be 45deg.');", + "assert(!code.match(/90deg/gi), 'message: The angle of the repeating-linear-gradient() should no longer be 90deg');", + "assert(code.match(/yellow\\s+?0px/gi), 'message: The color stop at 0 pixels should be yellow.');", + "assert(code.match(/yellow\\s+?40px/gi), 'message: One color stop at 40 pixels should be yellow.');", + "assert(code.match(/yellow\\s+?40px,\\s*?black\\s+?40px/gi), 'message: The second color stop at 40 pixels should be black.');", + "assert(code.match(/black\\s+?80px/gi), 'message: The last color stop at 80 pixels should be black.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a5367417b2b2512ad8", + "title": "Create Texture by Adding a Subtle Pattern as a Background Image", + "description": [ + "One way to add texture and interest to a background and have it stand out more is to add a subtle pattern. The key is balance, as you don't want the background to stand out too much, and take away from the foreground. The background property supports the url() function in order to link to an image of the chosen texture or pattern. The link address is wrapped in quotes inside the parentheses.", + "
", + "Using the url of https://i.imgur.com/MJAkxbh.png, set the background of the whole page with the body selector." + ], + "challengeSeed": [ + "" + ], + "tests": [ + "assert(code.match(/background:\\s*?url\\((\"|')https:\\/\\/i\\.imgur\\.com\\/MJAkxbh\\.png(\"|')\\)/gi), 'message: Your body element should have a background property set to a url() with the given link.');" + ], + "solutions": [], + "hints": [ + "Remember to wrap the address in quotes within the url() function." + ], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a5367417b2b2512ad9", + "title": "Use the CSS Transform scale Property to Change the Size of an Element", + "description": [ + "To change the scale of an element, CSS has the transform property, along with its scale() function. The following code example doubles the size of all the paragraph elements on the page:", + "
p {
transform:scale(2);
}
", + "
", + "Increase the size of the element with the id of ball2 to 1.5 times its original size." + ], + "challengeSeed": [ + "", + "", + "
", + "
" + ], + "tests": [ + "assert(code.match(/#ball2\\s*?{\\s*?left:\\s*?65%;\\s*?transform:\\s*?scale\\(1\\.5\\);/gi), 'message: Set the transform property for #ball2 to scale it 1.5 times its size.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a5367417b2b2512ada", + "title": "Use the CSS Transform scale Property to Scale an Element on Hover", + "description": [ + "The transform property has a variety of functions that lets you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as :hover that specify a certain state of an element, the transform property can easily add interactivity to your elements.", + "Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:", + "
p:hover {
transform: scale(2.1);
}
", + "
", + "Add a CSS rule for the hover state of the div and use the transform property to scale the div element to 1.1 times its original size when a user hovers over it." + ], + "challengeSeed": [ + "", + "", + "
" + ], + "tests": [ + "assert(code.match(/div:hover\\s*?{\\s*?transform:\\s*?scale\\(1\\.1\\);/gi), 'message: The size of the div element should scale 1.1 times when the user hovers over it.');" + ], + "solutions": [], + "hints": [ + "Make sure to apply the CSS rule to the hover state of the div, using div:hover" + ], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a6367417b2b2512adb", + "title": "Use the CSS Transform Property skewX to Skew an Element Along the X-Axis", + "description": [ + "The next function of the transform property is skewX(), which skews the selected element along its X (horizontal) axis by a given degree.", + "The following code skews the paragraph element by -32 degrees along the X-axis.", + "
p {
transform: skewX(-32deg);
}
", + "
", + "Skew the element with the id of bottom by 24 degrees along the X-axis by using the transform property." + ], + "challengeSeed": [ + "", + "", + "
", + "
" + ], + "tests": [ + "assert(code.match(/#bottom\\s*?{\\s*?.*?\\s*?transform:\\s*?skewX\\(24deg\\);/g), 'message: The element with id bottom should be skewed by 24 degrees along its X-axis.');" + ], + "solutions": [], + "hints": [ + "Notice that there is no space between the number and \"deg\" (-32deg) when declaring the degrees value." + ], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a6367417b2b2512adc", + "title": "Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis", + "description": [ + "Given that the skewX() function skews the selected element along the X-axis by a given degree, it is no surprise that the skewY() property skews an element along the Y (vertical) axis.", + "
", + "Skew the element with the id of top -10 degrees along the Y-axis by using the transform property." + ], + "challengeSeed": [ + "", + "", + "
", + "
" + ], + "tests": [ + "assert(code.match(/#top\\s*?{\\s*?.*?\\s*?transform:\\s*?skewY\\(-10deg\\);/g), 'message: The element with id top should be skewed by -10 degrees along its Y-axis.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a6367417b2b2512add", + "title": "Create a Graphic Using CSS", + "description": [ + "By manipulating different selectors and properties, you can make interesting shapes. One of the easier ones to try is a crescent moon shape. For this challenge you need to work with the box-shadow property that sets the shadow of an element, along with the border-radius property that controls the roundness of the element's corners.", + "You will create a round, transparent object with a crisp shadow that is slightly offset to the side - the shadow is actually going to be the moon shape you see.", + "In order to create a round object, the border-radius property should be set to a value of 50%.", + "You may recall from an earlier challenge that the box-shadow property takes values for offset-x, offset-y, blur-radius, spread-radius and a color value in that order. The blur-radius and spread-radius values are optional.", + "
", + "Manipulate the square element in the editor to create the moon shape. First, change the background-color to transparent, then set the border-radius property to 50% to make the circular shape. Finally, change the box-shadow property to set the offset-x to 25px, the offset-y to 10px, blur-radius to 0, spread-radius to 0, and color to blue." + ], + "challengeSeed": [ + "", + "
" + ], + "tests": [ + "assert(code.match(/background-color:\\s*?transparent;/gi), 'message: The value of the background-color property should be set to transparent.');", + "assert(code.match(/border-radius:\\s*?50%;/gi), 'message: The value of the border-radius property should be set to 50%.');", + "assert(code.match(/box-shadow:\\s*?25px\\s+?10px\\s+?0(px)?\\s+?0(px)?\\s+?blue\\s*?;/gi), 'message: The value of the box-shadow property should be set to 25px for offset-x, 10px for offset-y, 0 for blur-radius, 0 for spread-radius, and finally blue for the color.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a6367417b2b2512ade", + "title": "Create a More Complex Shape Using CSS and HTML", + "description": [ + "One of the most popular shapes in the world is the heart shape, and this challenge creates it with raw CSS. But first, you need to understand the :before and :after selectors. These selectors are used to add something before or after a selected element. In the following example, a :before selector is used to add a rectangle to an element with the class heart:", + "
.heart:before {
content: \"\";
background-color: yellow;
border-radius: 25%;
position: absolute;
height: 50px;
width: 70px;
top: -50px;
left: 5px;
}
", + "For the :before and :after selectors to function properly, they must have a defined content property. It usually has content such as a photo or text. When the :before and :after selectors add shapes, the content property is still required, but it's set to an empty string.", + "In the above example, the element with the class of heart has a :before selector that produces a yellow rectangle with height and width of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the left and 50px above the top of the element.", + "
", + "Transform the element on the screen to a heart. In the heart:after selector, change the background-color to pink and the border-radius to 50%.", + "Next, target the element with the class heart (just heart) and fill in the transform property. Use the rotate() function with -45 degrees. (rotate() works the same way that skewX() and skewY() do).", + "Finally, in the heart:before selector, set its content property to an empty string." + ], + "challengeSeed": [ + "", + "
" + ], + "tests": [ + "assert(code.match(/\\.heart:after\\s*?{\\s*?background-color:\\s*?pink;/gi), 'message: The background-color property of the heart:after selector should be pink.');", + "assert(code.match(/border-radius:\\s*?50%/gi).length == 2, 'message: The border-radius of the heart:after selector should be 50%.');", + "assert(code.match(/transform:\\s*?rotate\\(-45deg\\)/gi), 'message: The transform property for the heart class should use a rotate() function set to -45 degrees.');", + "assert(code.match(/\\.heart:before\\s*?{\\s*?content:\\s*?(\"|')\\1;/gi), 'message: The content of the heart:before selector should be an empty string.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a7367417b2b2512adf", + "title": "Learn How the CSS @keyframes and animation Properties Work", + "description": [ + "To animate an element, you need to know about the animation properties and the @keyframes rule. The animation properties control how the animation should behave and the @keyframes rule controls what happens during that animation. There are eight animation properties in total. This challenge will keep it simple and cover the two most important ones first:", + "animation-name sets the name of the animation, which is later used by @keyframes to tell CSS which rules go with which animations.", + "animation-duration sets the length of time for the animation.", + "@keyframes is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific \"frames\" during the animation, with percentages ranging from 0% to 100%. If you compare this to a movie, the CSS properties for 0% is how the element displays in the opening scene. The CSS properties for 100% is how the element appears at the end, right before the credits roll. Then CSS applies the magic to transition the element over the given duration to act out the scene. Here's an example to illustrate the usage of @keyframes and the animation properties:", + "
#anim {
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
", + "For the element with the anim id, the code snippet above sets the animation-name to colorful and sets the animation-duration to 3 seconds. Then the @keyframes rule links to the animation properties with the name colorful. It sets the color to blue at the beginning of the animation (0%) which will transition to yellow by the end of the animation (100%). You aren't limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.", + "
", + "Create an animation for the element with the id rect, by setting the animation-name to rainbow and the animation-duration to 4 seconds. Next, declare a @keyframes rule, and set the background-color at the beginning of the animation (0%) to blue, the middle of the animation (50%) to green, and the end of the animation (100%) to yellow." + ], + "challengeSeed": [ + "", + "
" + ], + "tests": [ + "assert($('#rect').css('animation-name') == 'rainbow', 'message: The element with id of rect should have an animation-name property with a value of rainbow.');", + "assert($('#rect').css('animation-duration') == '4s', 'message: The element with id of rect should have an animation-duration property with a value of 4s.');", + "assert(code.match(/@keyframes\\s+?rainbow\\s*?{/g), 'message: The @keyframes rule should use the animation-name of rainbow.');", + "assert(code.match(/0%\\s*?{\\s*?background-color:\\s*?blue;\\s*?}/gi), 'message: The @keyframes rule for rainbow should use a background-color of blue at 0%.');", + "assert(code.match(/50%\\s*?{\\s*?background-color:\\s*?green;\\s*?}/gi), 'message: The @keyframes rule for rainbow should use a background-color of green at 50%.');", + "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?}/gi), 'message: The @keyframes rule for rainbow should use a background-color of yellow at 100%.');" + ], + "solutions": [], + "hints": [ + "Make sure the @keyframes rule links to the animation-name." + ], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a7367417b2b2512ae0", + "title": "Use CSS Animation to Change the Hover State of a Button", + "description": [ + "You can use CSS @keyframes to change the color of a button in its hover state.", + "Here's an example of changing the width of an image on hover:", + "
<style>
img:hover {
animation-name: width;
animation-duration: 500ms;
}

@keyframes width {
100% {
width: 40px;
}
}
</style>

<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
", + "
", + "Note that ms stands for milliseconds, where 1000ms is equal to 1s.", + "Use CSS @keyframes to change the background-color of the button element so it becomes #4791d0 when a user hovers over it. The @keyframes rule should only have an entry for 100%." + ], + "challengeSeed": [ + "", + " ", + "" + ], + "tests": [ + "assert(code.match(/@keyframes\\s+?background-color\\s*?{/g), 'message: The @keyframes rule should use the animation-name background-color.');", + "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?#4791d0;\\s*?}/gi), 'message: There should be one rule under @keyframes that changes the background-color to #4791d0 at 100%.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "58a7a6ebf9a6318348e2d5aa", + "title": "Modify Fill Mode of an Animation", + "description": [ + "That's great, but it doesn't work right yet. Notice how the animation resets after 500ms has passed, causing the button to revert back to the original color. You want the button to stay highlighted.", + "This can be done by setting the animation-fill-mode property to forwards. The animation-fill-mode specifies the style applied to an element when the animation has finished. You can set it like so:", + "animation-fill-mode: forwards;", + "
", + "Set the animation-fill-mode property of button:hover to forwards so the button stays highlighted when a user hovers over it." + ], + "challengeSeed": [ + "", + "" + ], + "tests": [ + "assert(code.match(/button:hover\\s*?{\\s*?animation-name:\\s*?background-color;\\s*?animation-duration:\\s*?500ms;\\s*?animation-fill-mode:\\s*?forwards;\\s*?}/gi), 'message: button:hover should have a animation-fill-mode property with a value of forwards.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a7367417b2b2512ae1", + "title": "Create Movement Using CSS Animation", + "description": [ + "When elements have a specified position, such as fixed or relative, the CSS offset properties right, left, top, and bottom can be used in animation rules to create movement.", + "As shown in the example below, you can push the item downwards then upwards by setting the top property of the 50% keyframe to 50px, but having it set to 0px for the first (0%) and the last (100%) keyframe.", + "
@keyframes rainbow {
0% {
background-color: blue;
top: 0px;
}
50% {
background-color: green;
top: 50px;
}
100% {
background-color: yellow;
top: 0px;
}
}
", + "
", + "Add a horizontal motion to the div animation. Using the left offset property, add to the @keyframes rule so rainbow starts at 0 pixels at 0%, moves to 25 pixels at 50%, and ends at -25 pixels at 100%. Don't replace the top property in the editor - the animation should have both vertical and horizontal motion." + ], + "challengeSeed": [ + "", + "", + "
" + ], + "tests": [ + "assert(code.match(/0%\\s*?{\\s*?background-color:\\s*?blue;\\s*?top:\\s*?0px;\\s*?left:\\s*?0px;\\s*?}/gi), 'message: The @keyframes rule for 0% should use the left offset of 0px.');", + "assert(code.match(/50%\\s*?{\\s*?background-color:\\s*?green;\\s*?top:\\s*?50px;\\s*?left:\\s*?25px;\\s*?}/gi), 'message: The @keyframes rule for 50% should use the left offset of 25px.');", + "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?top:\\s*?0px;\\s*?left:\\s*?-25px;\\s*?}/gi), 'message: The @keyframes rule for 100% should use the left offset of -25px.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a7367417b2b2512ae2", + "title": "Create Visual Direction by Fading an Element from Left to Right", + "description": [ + "For this challenge, you'll change the opacity of an animated element so it gradually fades as it reaches the right side of the screen.", + "In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the @keyframes rule.", + "
", + "Target the element with the id of ball and add the opacity property set to 0.1 at 50%, so the element fades as it moves to the right." + ], + "challengeSeed": [ + "", + "", + "
" + ], + "tests": [ + "assert(code.match(/@keyframes fade\\s*?{\\s*?50%\\s*?{\\s*?(?:left:\\s*?60%;\\s*?opacity:\\s*?0?\\.1;|opacity:\\s*?0?\\.1;\\s*?left:\\s*?60%;)/gi), 'message: The keyframes rule for fade should set the opacity property to 0.1 at 50%.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a8367417b2b2512ae3", + "title": "Animate Elements Continually Using an Infinite Animation Count", + "description": [ + "The previous challenges covered how to use some of the animation properties and the @keyframes rule. Another animation property is the animation-iteration-count, which allows you to control how many times you would like to loop through the animation. Here's an example:", + "animation-iteration-count: 3;", + "In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to infinite.", + "
", + "To keep the ball bouncing on the right on a continuous loop, change the animation-iteration-count property to infinite." + ], + "challengeSeed": [ + "", + "
" + ], + "tests": [ + "assert($('#ball').css('animation-iteration-count') == 'infinite', 'message: The animation-iteration-count property should have a value of infinite.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a8367417b2b2512ae4", + "title": "Make a CSS Heartbeat using an Infinite Animation Count", + "description": [ + "Here's one more continuous animation example with the animation-iteration-count property that uses the heart you designed in a previous challenge.", + "The one-second long heartbeat animation consists of two animated pieces. The heart elements (including the :before and :after pieces) are animated to change size using the transform property, and the background div is animated to change its color using the background property.", + "
", + "Keep the heart beating by adding the animation-iteration-count property for both the back class and the heart class and setting the value to infinite. The heart:before and heart:after selectors do not need any animation properties." + ], + "challengeSeed": [ + "", + "
", + "
" + ], + "tests": [ + "assert($('.heart').css('animation-iteration-count') == 'infinite', 'message: The animation-iteration-count property for the heart class should have a value of infinite.');", + "assert($('.back').css('animation-iteration-count') == 'infinite', 'message: The animation-iteration-count property for the back class should have a value of infinite.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a8367417b2b2512ae5", + "title": "Animate Elements at Variable Rates", + "description": [ + "There are a variety of ways to alter the animation rates of similarly animated elements. So far, this has been achieved by applying an animation-iteration-count property and setting @keyframes rules.", + "To illustrate, the animation on the right consists of two \"stars\" that each decrease in size and opacity at the 20% mark in the @keyframes rule, which creates the twinkle animation. You can change the @keyframes rule for one of the elements so the stars twinkle at different rates.", + "
", + "Alter the animation rate for the element with the class name of star-1 by changing its @keyframes rule to 50%." + ], + "challengeSeed": [ + "", + "", + "
", + "
", + "
" + ], + "tests": [ + "assert(code.match(/twinkle-1\\s*?{\\s*?50%/g), 'message: The @keyframes rule for the star-1 class should be 50%.');" + ], + "solutions": [], + "hints": [ + "Check the animation-name declared in the star-1 class to find the right @keyframes rule to change." + ], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a8367417b2b2512ae6", + "title": "Animate Multiple Elements at Variable Rates", + "description": [ + "In the previous challenge, you changed the animation rates for two similarly animated elements by altering their @keyframes rules. You can achieve the same goal by manipulating the animation-duration of multiple elements.", + "In the animation running in the code editor, there are three \"stars\" in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the animation-duration property to different values for each element.", + "
", + "Set the animation-duration of the elements with the classes star-1, star-2, and star-3 to 1s, 0.9s, and 1.1s, respectively." + ], + "challengeSeed": [ + "", + "", + "
", + "
", + "
", + "
" + ], + "tests": [ + "assert($('.star-1').css('animation-duration') == '1s', 'message: The animation-duration property for the star with class star-1 should remain at 1s.');", + "assert($('.star-2').css('animation-duration') == '0.9s', 'message: The animation-duration property for the star with class star-2 should be 0.9s.');", + "assert($('.star-3').css('animation-duration') == '1.1s', 'message: The animation-duration property for the star with class star-3 should be 1.1s.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a8367417b2b2512ae7", + "title": "Change Animation Timing with Keywords", + "description": [ + "In CSS animations, the animation-timing-function property controls how quickly an animated element changes over the duration of the animation. If the animation is a car moving from point A to point B in a given time (your animation-duration), the animation-timing-function says how the car accelerates and decelerates over the course of the drive.", + "There are a number of predefined keywords available for popular options. For example, the default value is linear, which applies a constant animation speed throughout. Other options include ease-out, which is quick in the beginning then slows down, or ease-in, which is slow in the beginning, then speeds up at the end.", + "
", + "For the elements with id of ball1 and ball2, add an animation-timing-function property to each, and set #ball1 to linear, and #ball2 to ease-out. Notice the difference between how the elements move during the animation but end together, since they share the same animation-duration of 2 seconds." + ], + "challengeSeed": [ + "", + "", + "
", + "
" + ], + "tests": [ + "assert($('#ball1').css('animation-timing-function') == 'linear', 'message: The value of the animation-timing-function property for the element with the id ball1 should be linear.');", + "assert($('#ball2').css('animation-timing-function') == 'ease-out', 'message: The value of the animation-timing-function property for the element with the id ball2 should be ease-out.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a9367417b2b2512ae8", + "title": "Learn How Bezier Curves Work", + "description": [ + "The last challenge introduced the animation-timing-function property and a few keywords that change the speed of an animation over its duration. CSS offers an option other than keywords that provides even finer control over how the animation plays out, through the use of Bezier curves.", + "In CSS animations, Bezier curves are used with the cubic-bezier function. The shape of the curve represents how the animation plays out. The curve lives on a 1 by 1 coordinate system. The X-axis of this coordinate system is the duration of the animation (think of it as a time scale), and the Y-axis is the change in the animation.", + "The cubic-bezier function consists of four main points that sit on this 1 by 1 grid: p0, p1, p2, and p3. p0 and p3 are set for you - they are the beginning and end points which are always located respectively at the origin (0, 0) and (1, 1). You set the x and y values for the other two points, and where you place them in the grid dictates the shape of the curve for the animation to follow. This is done in CSS by declaring the x and y values of the p1 and p2 \"anchor\" points in the form: (x1, y1, x2, y2). Pulling it all together, here's an example of a Bezier curve in CSS code:", + "animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);", + "In the example above, the x and y values are equivalent for each point (x1 = 0.25 = y1 and x2 = 0.75 = y2), which if you remember from geometry class, results in a line that extends from the origin to point (1, 1). This animation is a linear change of an element during the length of an animation, and is the same as using the linear keyword. In other words, it changes at a constant speed.", + "
", + "For the element with the id of ball1, change the value of the animation-timing-function property from linear to its equivalent cubic-bezier function value. Use the point values given in the example above." + ], + "challengeSeed": [ + "", + "", + "
", + "
" + ], + "tests": [ + "assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)', 'message: The value of the animation-timing-function property for the element with the id ball1 should be the linear-equivalent cubic-bezier function.');", + "assert($('#ball2').css('animation-timing-function') == 'ease-out', 'message: The value of the animation-timing-function property for the element with the id ball2 should not change.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a9367417b2b2512ae9", + "title": "Use a Bezier Curve to Move a Graphic", + "description": [ + "A previous challenge discussed the ease-out keyword that describes an animation change that speeds up first and then slows down at the end of the animation. On the right, the difference between the ease-out keyword (for the blue element) and linear keyword (for the red element) is demonstrated. Similar animation progressions to the ease-out keyword can be achieved by using a custom cubic Bezier curve function.", + "In general, changing the p1 and p2 anchor points drives the creation of different Bezier curves, which controls how the animation progresses through time. Here's an example of a Bezier curve using values to mimic the ease-out style:", + "animation-timing-function: cubic-bezier(0, 0, 0.58, 1);", + "Remember that all cubic-bezier functions start with p0 at (0, 0) and end with p3 at (1, 1). In this example, the curve moves faster through the Y-axis (starts at 0, goes to p1 y value of 0, then goes to p2 y value of 1) then it moves through the X-axis (0 to start, then 0 for p1, up to 0.58 for p2). As a result, the change in the animated element progresses faster than the time of the animation for that segment. Towards the end of the curve, the relationship between the change in x and y values reverses - the y value moves from 1 to 1 (no change), and the x values move from 0.58 to 1, making the animation changes progress slower compared to the animation duration.", + "
", + "To see the effect of this Bezier curve in action, change the animation-timing-function of the element with id of red to a cubic-bezier function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1. This will make both elements progress through the animation similarly." + ], + "challengeSeed": [ + "", + "
", + "
" + ], + "tests": [ + "assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)', 'message: The value of the animation-timing-function property of the element with the id red should be a cubic-bezier function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .');", + "assert($('#red').css('animation-timing-function') !== 'linear', 'message: The element with the id red should no longer have the animation-timing-function property of linear.');", + "assert($('#blue').css('animation-timing-function') == 'ease-out', 'message: The value of the animation-timing-function property for the element with the id blue should not change.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + }, + { + "id": "587d78a9367417b2b2512aea", + "title": "Make Motion More Natural Using a Bezier Curve", + "description": [ + "This challenge animates an element to replicate the movement of a ball being juggled. Prior challenges covered the linear and ease-out cubic Bezier curves, however neither depicts the juggling movement accurately. You need to customize a Bezier curve for this.", + "The animation-timing-function automatically loops at every keyframe when the animation-iteration-count is set to infinite. Since there is a keyframe rule set in the middle of the animation duration (at 50%), it results in two identical animation progressions at the upward and downward movement of the ball.", + "The following cubic Bezier curve simulates a juggling movement:", + "cubic-bezier(0.3, 0.4, 0.5, 1.6); ", + "Notice that the value of y2 is larger than 1. Although the cubic Bezier curve is mapped on an 1 by 1 coordinate system, and it can only accept x values from 0 to 1, the y value can be set to numbers larger than one. This results in a bouncing movement that is ideal for simulating the juggling ball.", + "
", + "Change value of the animation-timing-function of the element with the id of green to a cubic-bezier function with x1, y1, x2, y2 values set respectively to 0.311, 0.441, 0.444, 1.649." + ], + "challengeSeed": [ + "", + "
", + "
", + "
" + ], + "tests": [ + "assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 0.441, 0.444, 1.649)', 'message: The value of the animation-timing-function property for the element with the id green should be a cubic-bezier function with x1, y1, x2, y2 values as specified.');" + ], + "solutions": [], + "hints": [], + "type": "waypoint", + "releasedOn": "Feb 17, 2017", + "challengeType": 0, + "translations": {} + } + ] +} diff --git a/seed/math-challenges/01-responsive-web-design/basic-css.json b/seed/math-challenges/01-responsive-web-design/basic-css.json new file mode 100644 index 0000000000..c0f09e5062 --- /dev/null +++ b/seed/math-challenges/01-responsive-web-design/basic-css.json @@ -0,0 +1,3625 @@ +{ + "name": "Basic CSS", + "order": 1, + "time": "5 hours", + "helpRoom": "Help", + "challenges": [ + { + "id": "597d77903675177232517ab2", + "title": "Introduction to Basic CSS", + "description": [ + [ + "", + "", + "Cascading Style Sheets (CSS) tell the browser how to display the text and other content that you write in HTML.

Note that CSS is case-sensitive so be careful with your capitalization.", + "" + ], + [ + "", + "", + "CSS has been adopted by all major browsers and allows you to control:
  • color
  • fonts
  • positioning
  • spacing
  • sizing
  • decorations
  • transitions
", + "" + ], + [ + "", + "", + "There are three main ways to apply CSS styling. You can apply inline styles directly to HTML elements with the style attribute. Alternatively, you can place CSS rules within style tags in an HTML document. Finally, you can write CSS rules in an external style sheet, then reference that file in the HTML document. Even though the first two options have their use cases, most developers prefer external style sheets because they keep the styles separate from the HTML elements. This improves the readability and reusability of your code.", + "" + ], + [ + "", + "", + "The idea behind CSS is that you can use a selector to target an HTML element in the DOM (Document Object Model) and then apply a variety of attributes to that element to change the way it is displayed on the page.

In this section, you'll see how adding CSS styles to the elements of your CatPhotoApp can change it from simple text to something more.", + "" + ] + ], + "releasedOn": "", + "challengeSeed": [], + "tests": [], + "type": "Waypoint", + "challengeType": 7, + "isRequired": false, + "translations": {} + }, + { + "id": "bad87fee1348bd9aedf08803", + "title": "Change the Color of Text", + "description": [ + "Now let's change the color of some of our text.", + "We can do this by changing the style of your h2 element.", + "The style that is responsible for the color of an element's text is the \"color\" style.", + "Here's how you would set your h2 element's text color to blue:", + "<h2 style=\"color: blue;\">CatPhotoApp</h2>", + "Note that it is a good practice to end inline style declarations with a ; .", + "
", + "Change your h2 element's style so that its text color is red." + ], + "challengeSeed": [ + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + "
    ", + "
  • cat nip
  • ", + "
  • laser pointers
  • ", + "
  • lasagna
  • ", + "
", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
  2. ", + "
  3. thunder
  4. ", + "
  5. other cats
  6. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" + ], + "tests": [ + "assert(code.match(/\\s*CatPhotoApp\\s*<\\/h2>/), 'message: Your h2 element should be red.');", + "assert(code.match(/\\s*CatPhotoApp\\s*<\\/h2>/),' message: Your style declaration should end with a ; .');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "description": [ + "Lass uns jetzt die Farbe von unserem Text ändern.", + "Wir können das bewerkstelligen, indem wir den style des h2 Elements ändern.", + "Der Style, der zuständig für die Textfarbe eines Elements ist, ist der \"color\" Style.", + "So könntest du die Textfarbe des h2 Elements in Blau ändern:", + "<h2 style=\"color: blue\">CatPhotoApp</h2>", + "
", + "Ändere den Style des h2 Elements, damit die Textfarbe rot (\"red\") ist." + ] + }, + "fr": { + "title": "Changer la couleur du texte", + "description": [ + "Changeons maintenant la couleur de quelques-uns de nos textes.", + "Nous pouvons le faire en changeant le style de votre élément h2.", + "Le style responsable de la couleur de texte d'un élément est \"color\".", + "Voici comment changer en bleu la couleur du texte de votre élément h2 :", + "<h2 style=\"color: blue\">CatPhotoApp</h2>", + "
", + "Changez le style de votre élément h2 pour que son texte soit de couleur rouge." + ] + }, + "pt-br": { + "title": "Substitua a Cor do Texto", + "description": [ + "Agora vamos substituir a cor de parte do nosso texto.", + "Podemos fazer isso mudando o style do elemento h2.", + "A propriedade de estilo responsável pela cor do texto se chama \"color\".", + "Você pode mudar a cor do texto de seu elemento h2 para azul assim:", + "<h2 style=\"color: blue\">CatPhotoApp</h2>", + "
", + "Mude o estilo do elemento h2 para que seu texto fique com a cor vermelha." + ] + }, + "ru": { + "title": "Измените цвет текста", + "description": [ + "Теперь давайте изменим цвет части нашего текста.", + "Мы можем сделать это изменив style нашего элемента h2.", + "Параметр стиля, отвечающий за цвет текста внутри элемента - \"color\".", + "Вот как вы могли бы установить цвет текста вашего элемента h2 синим:", + "<h2 style=\"color: blue\">CatPhotoApp</h2>", + "
", + "Измените стиль вашего элемента h2 таким образом, чтобы текст элемента стал красным." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08805", + "title": "Use CSS Selectors to Style Elements", + "description": [ + "With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.", + "When you entered <h2 style=\"color: red\">CatPhotoApp</h2>, you were giving that individual h2 element an inline style.", + "That's one way to add style to an element, but there's a better way to use CSS, which stands for Cascading Style Sheets.", + "At the top of your code, create a style element like this:", + "
<style>
</style>
", + "Inside that style element, you can create a CSS selector for all h2 elements. For example, if you wanted all h2 elements to be red, your style element would look like this:", + "
<style>
  h2 {color: red;}
</style>
", + "Note that it's important to have both opening and closing curly braces ({ and }) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of your element's styles.", + "
", + "Delete your h2 element's style attribute and instead create a CSS style element. Add the necessary CSS to turn all h2 elements blue." + ], + "challengeSeed": [ + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + "
    ", + "
  • cat nip
  • ", + "
  • laser pointers
  • ", + "
  • lasagna
  • ", + "
", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
  2. ", + "
  3. thunder
  4. ", + "
  5. other cats
  6. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" + ], + "tests": [ + "assert(!$(\"h2\").attr(\"style\"), 'message: Remove the style attribute from your h2 element.');", + "assert($(\"style\") && $(\"style\").length > 1, 'message: Create a style element.');", + "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'message: Your h2 element should be blue.');", + "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'message: Ensure that your stylesheet h2 declaration is valid with a semicolon and closing brace.');", + "assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(//g) || []).length, 'message: Make sure all your style elements are valid and have a closing tag.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "description": [ + "CSS liefert dir hunderte Attribute oder properties um HTML Elemente auf deiner Seite zu gestalten.", + "Mit <h2 style=\"color: red\">CatPhotoApp</h2> hast du dem einzelnen h2 Element einen sogenannten inline style gegeben.", + "Das ist ein Weg, um Elemente zu gestalten. Es ist aber besser CSS, was für Cascading Style Sheets steht, zu benutzen.", + "Erstelle über deinem Code ein style Element:", + "
<style>
</style>
", + "Innerhalb des Style Elements kannst du einen CSS selector für alle h2 Elemente erstellen. Wenn du zum Beispiel alle h2 Elemente rot färben willst, schreibst du:", + "
<style>
  h2 {color: red;}
</style>
", + "Beachte, dass du öffnende und schließende geschwungene Klammern ({ und }) um jeden Style setzen musst. Außerdem musst du sichergehen, dass deine Styles innerhalb dieser Klammern stehen. Zum Schluss benötigst du am Ende jedes Styles ein Semikolon.", + "
", + "Lösche das Style Attribute deines h2 Elements und erstelle stattdessen ein CSS style Element. Füge das notwendige CSS hinzu, um alle h2 Elemente Blau zu färben." + ] + }, + "fr": { + "title": "Utiliser les sélecteurs CSS pour styliser des éléments", + "description": [ + "Avec CSS, il y a des centaines de propriétés que vous pouvez utliser pour changer l'apparence d'un élément dans votre page.", + "Quand vous avez entré <h2 style=\"color: red\">CatPhotoApp</h2>, vous donniez à cet élément h2 uniquement, un style inline.", + "C'est une des façons d'ajouter un style à un élément, mais une meilleure approche est d'utiliser CSS, acronyme de Cascading Style Sheets.", + "Au sommet de votre code, créez un élément style comme ceci :", + "
<style>
</style>
", + "À l'intérieur de cet élément style, vous pouvez créer des sélecteurs CSS pour tous les éléments h2. Par exemple, si vous voulez que tous les éléments h2 soient en rouge, votre élément style ressemblerait à ceci :", + "
<style>
  h2 {color: red;}
</style>
", + "Prenez note qu'il est important d'avoir les accolades ouvrantes et fermantes ({ and }) autour de chaque élément de style. Vous devez aussi vous assurer que vos styles se retrouvent entre une balise style ouvrante et fermante. Finalement, assurez-vous d'ajouter un point-virgule â la fin de chacun des styles d'éléments.", + "
", + "Supprimez les attributs de styles de votre élément h2 et créez plutôt un élément de style CSS. Ajoutez le CSS nécessaire pour rendre tous vos éléments h2 de couleur bleu." + ] + }, + "pt-br": { + "title": "Use Seletores CSS para Estilizar Elementos", + "description": [ + "Com o CSS, existem centenas de propriedades que você pode utilizar para modificar a forma de como um elemento pode ser visto em uma página da internet.", + "Quando você usou o <h2 style=\"color: red\">CatPhotoApp<h2>, você deu ao elemento h2 um estilo inline.", + "Essa é uma forma de adicionar estilos a um elemento, mas o jeito recomendado para isso é utilizar Folhas de Estilo em Cascata (Cascading Style Sheets, CSS).", + "Acima de seu código, crie um elemento style como esse: <style></style>", + "Dentro do elemento style, é possível criar um seletor CSS para todos os elementos h2. Por exemplo, se você quiser que todos os elementos h2 tenham a cor vermelha, seu elemento style será assim:", + "<style>", + "  h2 {color: red;}", + "</style>", + "Observe que é importante utilizar as chaves de abertura e de fechamento ({ e }) ao redor do estilo de cada elemento. Também é necessário que o estilo de seu elemento esteja entre as tags de abertura e fechamento. Por fim, não se esqueça de adicionar o ponto-e-vírgula no final de cada um dos estilos de seu elemento.", + "
", + "Apague o atributo style de seu elemento h2 e então crie um elemento style CSS. Adicione o CSS necessário para fazer com que todos os elementos h2 tenham a cor azul." + ] + }, + "ru": { + "title": "Используйте CSS-селекторы для стилизации элементов", + "description": [ + "В CSS существуют сотни CSS-свойств, которые вы можете использовать для изменения внешнего вида элементов вашей страницы.", + "Когда вы вводите <h2 style=\"color: red\">CatPhotoApp</h2>, вы присваиваете определённому h2 элементу встроенный стиль.", + "Это один из способов добавления стиля к элементу, но лучший способ - использование CSS, который является сокращением от Cascading Style Sheets (Каскадные таблицы стилей).", + "Вверху вашего кода создайте элемент style следующим образом:", + "
<style>
</style>
", + "Внутри этого элемента style вы можете создать CSS-селектор для всех элементов h2 в документе. Например, если бы вы хотели, чтобы все элементы h2 были красными, ваш элемент style выглядел бы следующим образом:", + "
<style>
  h2 {color: red;}
</style>
", + "Обратите внимание, что важно наличие открывающих и закрывающих фигурных скобок ({ и }) вокруг стиля каждого элемента. Также вам необходимо убедиться в том, что стиль элемента присвоен внутри элемента style. В завершении, убедитесь, что строка объявления каждого элемента стиля должна заканчиваться точкой с запятой.", + "
", + "Удалите атрибут стиль вашего элемента h2 и взамен создайте CSS-элемент style. Добавьте необходимый CSS, чтобы все элементы h2 стали синими." + ] + } + } + }, + { + "id": "bad87fee1348bd9aecf08806", + "title": "Use a CSS Class to Style an Element", + "description": [ + "Classes are reusable styles that can be added to HTML elements.", + "Here's an example CSS class declaration:", + "
<style>
  .blue-text {
    color: blue;
  }
</style>
", + "You can see that we've created a CSS class called blue-text within the <style> tag.", + "You can apply a class to an HTML element like this:", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "Note that in your CSS style element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.", + "
", + "Inside your style element, change the h2 selector to .red-text and update the color's value from blue to red.", + "Give your h2 element the class attribute with a value of 'red-text'." + ], + "challengeSeed": [ + "", + "", + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + "
    ", + "
  • cat nip
  • ", + "
  • laser pointers
  • ", + "
  • lasagna
  • ", + "
", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
  2. ", + "
  3. thunder
  4. ", + "
  5. other cats
  6. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" + ], + "tests": [ + "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your h2 element should be red.');", + "assert($(\"h2\").hasClass(\"red-text\"), 'message: Your h2 element should have the class red-text.');", + "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), 'message: Your stylesheet should declare a red-text class and have its color set to red.');", + "assert($(\"h2\").attr(\"style\") === undefined, 'message: Do not use inline style declarations like style=\"color: red\" in your h2 element.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "description": [ + "Klassen sind wiederverwendbare Styles, die HTML Elementen zugewiesen werden können.", + "So sieht eine CSS Klasse aus:", + "
<style>
  .blue-text {
    color: blue;
  }
</style>
", + "Du siehst, dass wir die CSS Klasse blue-text innerhalb von <style> geschrieben haben.", + "Du kannst eine Klasse folgendermaßen einem HTML Element beifügen:", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "Beachte, dass Klassen in deinem CSS style Element mit einem Punkt beginnen sollten. In deinen Klassen-Deklarationen von HTML Elementen sollten diese nicht mit einem Punkt beginnen.", + "
", + "Ändere deinen h2 Selektor innerhalb deines style Elements zu .red-text und ändere den Farbwert von blue zu red.", + "Gib deinem h2 Element das class Attribut mit dem Wert 'red-text'." + ] + }, + "fr": { + "title": "Utiliser les classes CSS pour styler un élément", + "description": [ + "Les classes sont des styles réutilisables qui peuvent être ajoutées à des éléments HTML.", + "Voici un exemple de déclaration de classe CSS :", + "
<style>
  .blue-text {
    color: blue;
  }
</style>
", + "Remarquez que nous avons créer une classe CSS nommée blue-text à l'intérieur de notre balise <style>.", + "Vous pouvez appliquer une classe à un élément HTML comme ceci :", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "Prenez note que que dans votre élément CSS style, les classes doivent débuter par un point. Dans les déclarations de classes à l'intérieur des éléments HTML, on doit omettre le point du début.", + "
", + "À l'intérieur de votre élément style, changez le sélecteur du h2 pour .red-text et changez la couleur, passant de blue à red.", + "Donnez à votre élément h2 l'attribut de classe la valeur de red-text." + ] + }, + "pt-br": { + "title": "Use Classes CSS para Estilizar Elementos", + "description": [ + "As classes são estilos reutilizáveis que podem ser adicionadas a elementos HTML.", + "Aqui está um exemplo de como declarar uma classe com CSS:", + "<style>", + "  .blue-text {", + "    color: blue;", + "  }", + "</style>", + "Veja que criamos uma classe CSS chamada \"blue-text\" no interior da tag <style>.", + "Você pode aplicar uma classe a um elemento HTML assim:", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "Note que em seu elemento style CSS, as classes devem começar com um ponto. Já nos elementos HTML, as declarações de classes não devem começar com o ponto.", + "
", + "Ao invés de criar um novo elemento style, tente eliminar a declaração de estilo de h2 dos elementos de estilo existentes, e troque ela pela declaração de classe .red-text.", + "Crie uma classe CSS chamada red-text e então a aplique em seu elemento h2." + ] + }, + "ru": { + "title": "Используйте CSS-класс для стилизации элемента", + "description": [ + "Классы являются повторно применяемыми стилями, которые могут быть добавлены к HTML-элементам.", + "Вот пример объявления CSS-класса:", + "
<style>
  .blue-text {
    color: blue;
  }
</style>
", + "Вы можете увидеть, что мы создали CSS-класс названный blue-text внутри элемента <style>.", + "Вы можете применить класс к HTML-элементу следующим образом:", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "Обратите внимание, что в вашем CSS-элементе style названию классов следует начинаться с точки. При присваивании классов HTML-элементам названия классов не должны начинаться с точки.", + "
", + "Внутри вашего элемента style, замените селектор h2 на .red-text и измените значение цвета с blue на red.", + "Присвойте вашему элементу h2 атрибут class со значением 'red-text'." + ] + } + } + }, + { + "id": "bad87fee1348bd9aefe08806", + "title": "Style Multiple Elements with a CSS Class", + "description": [ + "Classes allow you to use the same CSS styles on multiple HTML elements. You can see this by applying your red-text class to the first p element." + ], + "challengeSeed": [ + "", + "", + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + "
    ", + "
  • cat nip
  • ", + "
  • laser pointers
  • ", + "
  • lasagna
  • ", + "
", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
  2. ", + "
  3. thunder
  4. ", + "
  5. other cats
  6. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" + ], + "tests": [ + "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your h2 element should be red.');", + "assert($(\"h2\").hasClass(\"red-text\"), 'message: Your h2 element should have the class red-text.');", + "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your first p element should be red.');", + "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), 'message: Your second and third p elements should not be red.');", + "assert($(\"p:eq(0)\").hasClass(\"red-text\"), 'message: Your first p element should have the class red-text.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "description": [ + "Du kannst Klassen zu HTML Elementen hinzufügen, indem du zum Beispiel class=\"deine-klasse\" innerhalb des öffnenden Tags schreibst.", + "Vergiss nicht dass CSS Klassenselektoren einen Punkt am Anfang brauchen:", + "
.blue-text {
  color: blue;
}
", + "Aber Klassen-Deklarationen brauchen keinen Punkt:", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "
", + "Füge die red-text Klasse dem ersten p Element hinzu." + ] + }, + "fr": { + "title": "Stylez plusieurs éléments avec une classe CSS", + "description": [ + "Souvenez-vous que vous pouvez ajouter des classes aux éléments HTML en utilisant class=\"votre-classe-ici\" à l'intérieur de la balise ouvrante correspondante.", + "Souvenez-vous que les sélecteurs CSS nécessitent un point au début comme ceci :", + "
.blue-text {
  color: blue;
}
", + "Rappelez-vous également que les déclarations de classes n'ont pas de point, comme ceci :", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "
", + "Appliquez la classe red-text à votre premier élément p." + ] + }, + "pt-br": { + "title": "Estilize Múltiplos Elementos com uma Classe CSS", + "description": [ + "Lembre-se que é possível adicionar classes a elementos HTML ao utilizar class=\"sua-classe-aqui\" dentro da tag de abertura do elemento.", + "Relembre também que os seletores de classes CSS exigem um ponto em seu início, assim:", + ".blue-text {", + "  color: blue;", + "}", + "Contudo, não se esqueça que as declarações de classes em elementos não utilizam ponto, assim:", + "<h2 class=\"blue-text\">CatPhotoApp<h2>", + "
", + "Adicione a classe red-text ao seu primeiro elemento p." + ] + }, + "ru": { + "title": "Стилизуйте множество элементов с помощью CSS-класса", + "description": [ + "Помните, что вы можете присваивать классы HTML-элементам используя class=\"ваш-класс-тут\" внутри открывающей метки соответствующего элемента.", + "Помните, что селекторы CSS-классов должны начинаться с точки, например:", + "
.blue-text {
  color: blue;
}
", + "Но также не забывайте, что присваивание классов не использует точку, например:", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "
", + "Примените класс red-text к вашим элемент первые p." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08806", + "title": "Change the Font Size of an Element", + "description": [ + "Font size is controlled by the font-size CSS property, like this:", + "
h1 {
  font-size: 30px;
}
", + "
", + "Inside the same <style> tag that contains your red-text class, create an entry for p elements and set the font-size to 16 pixels (16px)." + ], + "challengeSeed": [ + "", + "", + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + "
    ", + "
  • cat nip
  • ", + "
  • laser pointers
  • ", + "
  • lasagna
  • ", + "
", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
  2. ", + "
  3. thunder
  4. ", + "
  5. other cats
  6. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" + ], + "tests": [ + "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), 'message: Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "description": [ + "Schriftgröße wird von dem CSS Attribut font-size kontrolliert:", + "
h1 {
  font-size: 30px;
}
", + "
", + "Erstelle dann innerhalb deines <style> Elements, das auch deine red-text Klasse enthält, einen Eintrag für p Elemente und setzte font-size auf 16 Pixel (16px)." + ] + }, + "fr": { + "title": "Changez la taille de police d'un élément", + "description": [ + "La taille de police est contrôlée par la propriété CSS font-size, comme ceci :", + "
h1 {
  font-size: 30px;
}
", + "
", + "À l'intérieur de la même balise <style> qui contiens votre classe .red-text, créez une nouvelle entrée pour les éléments p et paramétrer le font-size à 16 pixels (16px)." + ] + }, + "pt-br": { + "title": "Mude o Tamanho da Fonte de um Elemento", + "description": [ + "O tamanho da fonte é controlado pela propriedade CSS \"font-size\", como aqui:", + "h1 {", + "  font-size: 30px;", + "}", + "
", + "Dentro da mesma tag <style> que criamos para sua classe red-text, modifique o font-size dos elementos p para que tenha um tamanho de 16 pixels (16px)." + ] + }, + "ru": { + "title": "Измените размер шрифта элемента", + "description": [ + "Размером шрифта управляют с помощтю CSS-своайства font-size, например:", + "
h1 {
  font-size: 30px;
}
", + "
", + "Внутри того же элемента <style>, который содержит ваш класс red-text, создайте вхождение для элементов p и установите свойство font-size равным 16 пикселей (16px)." + ] + } + } + }, + { + "id": "bad87fee1348bd9aede08807", + "title": "Set the Font Family of an Element", + "description": [ + "You can set an element's font by using the font-family property.", + "For example, if you wanted to set your h2 element's font to Sans-Serif, you would use the following CSS:", + "
h2 {
  font-family: Sans-Serif;
}
", + "
", + "Make all of your p elements use the Monospace font." + ], + "challengeSeed": [ + "", + "", + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + "
    ", + "
  • cat nip
  • ", + "
  • laser pointers
  • ", + "
  • lasagna
  • ", + "
", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
  2. ", + "
  3. thunder
  4. ", + "
  5. other cats
  6. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" + ], + "tests": [ + "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), 'message: Your p elements should use the font Monospace.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "description": [ + "Du kannst einem Element mit font-family eine Schriftart zuweisen.", + "Wenn du zum Beispiel deinem h2 Element die Schriftart Sans-Serif zuweisen willst, kannst du das mit dem folgenden CSS tun:", + "
h2 {
  font-family: Sans-Serif;
}
", + "
", + "Definiere für alle p Elemente die Schriftart Monospace." + ] + }, + "fr": { + "title": "Paramétrer la famille de police d'un élément", + "description": [ + "Vous pouvez paramétrer la police d'un élément en utilisant la propriété font-family.", + "Par exemple, si vous voulez paramétrer la police de votre élément h2 à Sans-Serif, vous devez utiliser le CSS suivant :", + "
h2 {
  font-family: Sans-Serif;
}
", + "
", + "Faites en sorte que tous vos éléments p aient la police Monospace." + ] + }, + "pt-br": { + "title": "Defina a Fonte para um Elemento", + "description": [ + "Você pode estabelecer o estilo de fonte para um elemento ao utilizar a propriedade font-family.", + "Por exemplo, se você quiser estabelecer o estilo de fonte de seu elemento h2 como Sans-Serif, você poderá utilizar o seguinte código em CSS:", + "h2 {", + "  font-family: Sans-Serif;", + "}", + "
", + "Faça com que todos os elementos p utilizem o estilo de fonte Monospace." + ] + }, + "ru": { + "title": "Установите семейство шрифтов для элемента", + "description": [ + "Вы можете установить семейство шрифтов для элемента используя свойство font-family.", + "Например, если бы вы хотели установить семейство шрифтов Sans-Serif для вашего элемента h2, вы бы использовали следующий CSS:", + "
h2 {
  font-family: Sans-Serif;
}
", + "
", + "Присвойте шрифт Monospace всем вашим элементам p." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08807", + "title": "Import a Google Font", + "description": [ + "Now, let's import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).", + "Google Fonts is a free library of web fonts that you can use in your CSS by referencing the font's URL.", + "To import a Google Font, you can copy the font(s) URL from the Google Fonts library and then paste it in your HTML. For this challenge, we'll import the Lobster font. To do this, copy the following code snippet and paste it into the top of your code editor:", + "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", + "Now you can use the Lobster font in your CSS by using Lobster as the FAMILY_NAME as in the following example:
font-family: FAMILY_NAME, GENERIC_NAME;.", + "The GENERIC_NAME is optional, and is a fallback font in case the other specified font is not available. This is covered in the next challenge.", + "Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name. For example, you need quotes to use the \"Open Sans\" font, but not to use the Lobster font.", + "
", + "Create a CSS rule for the font-family of Lobster and apply this new font to your h2 element." + ], + "challengeSeed": [ + "", + "", + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + "
    ", + "
  • cat nip
  • ", + "
  • laser pointers
  • ", + "
  • lasagna
  • ", + "
", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
  2. ", + "
  3. thunder
  4. ", + "
  5. other cats
  6. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" + ], + "tests": [ + "assert(new RegExp(\"googleapis\", \"gi\").test(code), 'message: Import the Lobster font.');", + "assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'message: Your h2 element should use the font Lobster.');", + "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?\\s*;\\s*\\}/gi.test(code), 'message: Use an h2 CSS selector to change the font.');", + "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'message: Your p element should still use the font Monospace.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "description": [ + "Lass uns jetzt eine Google Font importieren und verwenden. (Beachte dass du diese Challenge überspringen musst, falls Google in deinem Land blockiert wird)", + "Zuerst musst du einen call (Anfrage) an Google machen um um auf Lobster zugreifen und in dein HMTL einbinden zu können.", + "Kopiere den folgenden Code und füge diesen in deinen Editor oben ein:", + "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", + "Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem h2 Element hinzufügen.", + "
", + "Füge dem h2 Element die Schriftart oder font-family Lobster hinzu." + ] + }, + "fr": { + "title": "Importer une police de Google", + "description": [ + "Maintenant, importons et appliquons une police de Google (prenez note que si Google est interdit d'accès dans votre pays, vous devrez omettre ce défi).", + "Premièrement, vous devrez faire un appel vers Google pour prendre la police Lobster et la charger dans votre HTML.", + "Copier l'extrait de code suivant et coller le dans le haut de votre éditeur de code :", + "Maintenant vous pouvez paramétrer Lobster comme valeur de police de votre élément h2.", + "
", + "Appliquer la valeur Lobster à la font-family de votre élément h2." + ] + }, + "pt-br": { + "title": "Importe uma Fonte a Partir do Google Fonts", + "description": [ + "Agora, vamos importar e aplicar um estilo de fonte por meio do Google Fonts.", + "Primeiro, faça um chamado ao Google Fonts para poder utilizar a fonte chamada Lobster e carregá-la em seu HTML.", + "Para fazer isso, copie o código abaixo e insira-o na parte superior de seu editor de texto:", + "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", + "
", + "Agora, estableça Lobster como o valor para font-family em seu elemento h2." + ] + }, + "ru": { + "title": "Импортируйте шрифт Google", + "description": [ + "Теперь давайте импортируем и применим шрифт Google (обратите внимание, что если Google заблокирован в ваней стране, вам нужно будет пропустить это испытание).", + "Сначала вам понадобится сделать запрос к Google для получения шрифта Lobster и загрузить его в ваш HTML.", + "Скопируйте следующй кусок кода и вставьте его в самый верх вашего редактора кода:", + "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", + "Теперь вы можете установить шрифт Lobster в качестве значения семейства шрифтов для вашего h2.", + "
", + "Примените свойство font-family со значением Lobster к вашему элементу h2." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08808", + "title": "Specify How Fonts Should Degrade", + "description": [ + "There are several default fonts that are available in all browsers. These generic font families include Monospace, Serif and Sans-Serif", + "When one font isn't available, you can tell the browser to \"degrade\" to another font.", + "For example, if you wanted an element to use the Helvetica font, but also degrade to the Sans-Serif font when Helvetica wasn't available, you could use this CSS style:", + "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.", + "
", + "To begin with, apply the Monospace font to the h2 element, so that it now has two fonts - Lobster and Monospace.", + "In the last challenge, you imported the Lobster font using the link tag. Now comment out that import of the Lobster font from Google Fonts so that it isn't available anymore. Notice how your h2 element degrades to the Monospace font.", + "Note
If you have the Lobster font installed on your computer, you won't see the degradation because your browser is able to find the font." + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + "
    ", + "
  • cat nip
  • ", + "
  • laser pointers
  • ", + "
  • lasagna
  • ", + "
", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
  2. ", + "
  3. thunder
  4. ", + "
  5. other cats
  6. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" + ], + "tests": [ + "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'message: Your h2 element should use the font Lobster.');", + "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?,\\s*Monospace\\s*;\\s*\\}/gi.test(code), 'message: Your h2 element should degrade to the font Monospace when Lobster is not available.');", + "assert(new RegExp(\"\", \"gi\").test(code), 'message: Be sure to close your comment by adding -->.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "description": [ + "Es gibt verschiedene Schriftarten, die jedem Browser standardmäßig zur Verfügung stehen. Das sind unter anderem Monospace, Serif und Sans-Serif.", + "Falls eine Font nicht verfügbar ist kannst du dem Browser sagen was er stattdessen verwenden soll.", + "Wenn du zum Beispiel einem Element die Schriftart Helvetica geben möchtest, aber gleichzeitig als Alertnative die Schrift Sans-Serif laden willst, falls Helvetica nicht verfügbar ist, kannst du diesen CSS Style verwenden:", + "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "
", + "Kommentiere jetzt den Aufruf an Google Fonts aus, sodass Lobster nicht zur Verfügung steht. Beachte, wie nun alternativ die Schriftart Monospace geladen wird." + ] + }, + "fr": { + "title": "Spécifier comment vos polices devraient dégrader", + "description": [ + "Il y a plusieurs polices par défaut qui sont disponible dans tous les navigateurs Web. Ceci comprend Monospace, Serif et Sans-Serif.", + "Quand une police n'est pas disponible, vous pouvez demander au navigateur de \"dégrader\" vers une autre police.", + "Par exemple, si vous voulez qu'un élément utilise la police Helvetica, mais également dégrader vers Sans-Serif lorsque la police Helvetica n'est pas disponible, vous pouvez utiliser le style CSS suivant :", + "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "
", + "Maintenant, commenter votre appel vers les polices de Google, pour que la police Lobster ne soit pas disponible. Regardez comment la police se dégrade vers Monospace." + ] + }, + "pt-br": { + "title": "Especifique como as Fontes Devem se Degradar", + "description": [ + "Existem diversas fontes que estão disponíveis por padrão nos navegadores de internet, incluindo Monospace, Serif e Sans-Serif.", + "No entanto, quando uma fonte não está disponível, podemos dizer ao navegador que \"degrade\" a outro tipo de fonte.", + "Por exemplo, se você deseja que um elemento use a fonte Helvetica, e que degrade para a fonte Sans-Serif quando a Helvetica não estiver disponível, você pode utilizar o seguinte CSS:", + "p {", + "  font-family: Helvetica, Sans-Serif;", + "}", + "
", + "Agora, comente o seu chamado para a fonte do Google, para que a fonte Lobster não esteja disponível. Note como a fonte degrada para Monospace." + ] + }, + "ru": { + "title": "Укажите порядок деградации шрифтов", + "description": [ + "Существует несколько стандартных шрифтов, которые доступны во всех браузерах. Среди них Monospace, Serif и Sans-Serif", + "Когда один шрифт недоступен, вы можете сообщить браузеру \"деградировать\" до другого шрифта.", + "Например, если бы вы хотели, чтобы элемент использовал шрифт Helvetica, но также деградировал до шрифта Sans-Serif, когда Helvetica недоступен, вы могли бы использовать этот CSS-стиль:", + "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "
", + "Теперь закомментируйте ваш запрос к Google Fonts, таким образом шрифт Lobster становится недоступен. Обратите внимание как происходит деградация до шрифта Monospace." + ] + } + } + }, + { + "id": "bad87fee1348bd9acdf08812", + "title": "Size Your Images", + "description": [ + "CSS has a property called width that controls an element's width. Just like with fonts, we'll use px (pixels) to specify the image's width.", + "For example, if we wanted to create a CSS class called larger-image that gave HTML elements a width of 500 pixels, we'd use:", + "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", + "
", + "Create a class called smaller-image and use it to resize the image so that it's only 100 pixels wide.", + "Note
Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge." + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + "
    ", + "
  • cat nip
  • ", + "
  • laser pointers
  • ", + "
  • lasagna
  • ", + "
", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
  2. ", + "
  3. thunder
  4. ", + "
  5. other cats
  6. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" + ], + "tests": [ + "assert($(\"img[src='https://bit.ly/fcc-relaxing-cat']\").attr('class') === \"smaller-image\", 'message: Your img element should have the class smaller-image.');", + "assert($(\"img\").width() === 100, 'message: Your image should be 100 pixels wide. Browser zoom should be at 100%.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "description": [ + "Die Breite eines Elements wird mit dem CSS Attribut width kontrolliert. Wie bei Schriftarten verwenden wir Pixel px um die Größe zu definieren.", + "Wenn wir also die CSS Klasse larger-image erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir:", + "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", + "
", + "Erstelle eine Klasse mit dem Namen smaller-image und verwende sie, um dein Bild auf 100 Pixel zu skalieren.", + "Notiz
Aufgrund verschiedener Brower Implementierungen, könnte es sein dass du auf 100% Zoom sein musst um die Tests zu bestehen." + ] + }, + "fr": { + "title": "Redimensionner vos images", + "description": [ + "Le CSS a une propriété nommé width qui contrôle la largeur d'un élément. Comme pour les polices, nous utiliserons px (pixels) pour déterminer la largeur d'une image.", + "Par exemple, si nous voulons créer une classe CSS nommée larger-image qui donnne aux éléments une largeur de 500 pixels, nous utilisons :", + "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", + "
", + "Créez une classe nommée smaller-image et utilisez la pour redimensionner l'image pour qu'elle ai 100 pixels de large.", + "Prenez note
Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi." + ] + }, + "pt-br": { + "title": "Dê um Tamanho para suas Imagens", + "description": [ + "O CSS possui uma propriedade chamada width, que controla a largura de um elemento. Da mesma forma que com as fontes, vamos utilizar px (pixels) como medida para especificar a largura de nossa imagem.", + "Por exemplo, se queremos criar uma classe CSS chamada larger-image que dê aos elementos HTML uma largura de 500px, vamos usar:", + "<estilo>", + "  .larger-image{", + "    width: 500px;", + "  }", + "</style>", + "
", + "Crie uma classe chamada smaller-image e a utilize para mudar o tamanho da imagem para que ela tenha apenas 100 pixels de largura." + ] + }, + "ru": { + "title": "Установите размер ваших изображений", + "description": [ + "В CSS есть свойтсво, называемое width, которе управляет шириной элемента. По аналогии со шрифтами, мы используем px (пиксели) для указания ширины изображения.", + "Например, если бы мы хотели создать CSS-класс larger-image, который присваивал бы HTML-эементам ширину равную 500 пикселей, мы бы использовали:", + "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", + "
", + "Создайте класс smaller-image и используйте его для изменения размера изображений до 100 пикселей в ширину.", + "Внимание
По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания." + ] + } + } + }, + { + "id": "bad87fee1348bd9bedf08813", + "title": "Add Borders Around Your Elements", + "description": [ + "CSS borders have properties like style, color and width", + "For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:", + "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", + "
", + "Create a class called thick-green-border that puts a 10-pixel-wide green border with a style of solid around an HTML element, and apply that class to your cat photo.", + "Remember that you can apply multiple classes to an element by separating each class with a space within its class attribute. For example:", + "<img class=\"class1 class2\">" + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + "
    ", + "
  • cat nip
  • ", + "
  • laser pointers
  • ", + "
  • lasagna
  • ", + "
", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
  2. ", + "
  3. thunder
  4. ", + "
  5. other cats
  6. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" + ], + "tests": [ + "assert($(\"img\").hasClass(\"smaller-image\"), 'message: Your img element should have the class smaller-image.');", + "assert($(\"img\").hasClass(\"thick-green-border\"), 'message: Your img element should have the class thick-green-border.');", + "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, 'message: Give your image a border width of 10px.');", + "assert($(\"img\").css(\"border-right-style\") === \"solid\", 'message: Give your image a border style of solid.');", + "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'message: The border around your img element should be green.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "description": [ + "CSS Rahmen haben Attribute wie style, color und width", + "Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, könnten wir diese Klasse verwenden:", + "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", + "
", + "Erstelle die Klasse thick-green-border, welche einen 10 Pixel dicken, grünen Rahmen mit dem Style solid um ein HTML Element setzt. Füge diese Klasse deinem Katzenfoto hinzu.", + "Vergiss nicht, dass du einem Element mehrere Klassen geben kannst indem du jede Klasse mit einem Leerzeichen im class Attribut trennst. Zum Beispiel:", + "<img class=\"class1 class2\">" + ] + }, + "fr": { + "title": "Ajouter des bordures autour de vos éléments", + "description": [ + "Les bordures CSS ont des propriétés comme style, color et width", + "Par exemple, si nous voulons créer une bordure de 5 pixel rouge autour d'un élément HTML, nous pouvons utiliser cette classe :", + "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", + "
", + "Créer une classe nommée thick-green-border qui ajoute une bordure verte de 10 pixel avec un style solid autour d'un élément HTML. Appliquez ensuite cette classe sur votre photo de chat.", + "Souvenez-vous que vous pouvez appliquer plus d'une classe sur un élément en les séparant par un espace, le tout dans l'attribut class de l'élément. Par exemple :", + "<img class=\"class1 class2\">" + ] + }, + "pt-br": { + "title": "Adicione Bordas ao Redor de seus Elementos", + "description": [ + "As bordas em CSS possuem propriedades como style, color e width", + "Por exemplo, se queremos criar uma borda com tamanho de 5 pixels de cor vermelha ao redor de um elemento HTML, podemos utilizar esta classe:", + "<style>", + "  .thin-red-border {", + "    border-color: red;", + "    border-width: 5px;", + "    border-style: solid;", + "  }", + "</style>", + "
", + "Crie uma classe chamada thick-green-border que insira uma borda verde de 10 pixels de largura com um estilo solid ao redor de um elemento HTML, e então adicione essa classe em sua foto com o gato.", + "Lembre que você pode aplicar diversas classes a um elemento separando cada uma das classes com um espaço, dentro do atributo class. Por exemplo:", + "<img class=\"clase1 clase2\">" + ] + }, + "ru": { + "title": "Дбавьте границы вокруг ваших элементов", + "description": [ + "CSS-границы имеют свойства: style, color и width", + "Например, если бы мы хотели создать красную границу шириной в 5 пикселей вокруг HTML-элемента, мы могли бы использовать этот класс:", + "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", + "
", + "Создайте класс thick-green-border, который добавляет зелёную границу шириной в 10 пикселей со стилем solid вокруг HTML-элемента и примените этот класс к вашему фото кота.", + "Помните, что вы можете может применить множество классов к одному элементу путём разделения их с помощью пробела внутри атрибута class. Например:", + "<img class=\"class1 class2\">" + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08814", + "title": "Add Rounded Corners with border-radius", + "description": [ + "Your cat photo currently has sharp corners. We can round out those corners with a CSS property called border-radius.", + "
", + "You can specify a border-radius with pixels. Give your cat photo a border-radius of 10px.", + "Note: this waypoint allows for multiple possible solutions. For example, you may add border-radius to either the .thick-green-border class or .smaller-image class." + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + "
    ", + "
  • cat nip
  • ", + "
  • laser pointers
  • ", + "
  • lasagna
  • ", + "
", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
  2. ", + "
  3. thunder
  4. ", + "
  5. other cats
  6. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" + ], + "tests": [ + "assert($(\"img\").hasClass(\"thick-green-border\"), 'message: Your image element should have the class \"thick-green-border\".');", + "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'message: Your image should have a border radius of 10px');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Füge abgerundete Ecken mit border-radius hinzu", + "description": [ + "Dein Katzenfoto hat momentan spitze Ecken. Wir können diese Ecken mit dem CSS Attribut border-radius abrunden.", + "
", + "Du kannst einen border-radius mit Pixeln deklarieren. Gib deinem Katzenfoto einen border-radius von 10px.", + "Beachte dass es für diese Challenge verschiedene mögliche Lösungsansätze gibt. Zum Beispiel könntest du einen border-radius zu der .thick-green-border oder .smaller-image Klasse hinzufügen." + ] + }, + "es": { + "title": "Agrega esquinas redondeadas usando border-radius", + "description": [ + "Tu foto del gato tiene actualmente esquinas angulares. Podemos redondear esas esquinas con una propiedad CSS llamada border-radius.", + "
", + "Puedes especificar border-radius usando pixeles. Dale a tu foto del gato un border-radius de 10px.", + "Nota: este desafío acepta múltiples soluciones. Por ejemplo, puedes agregar border-radius ya sea a la clase .thick-green-border o a la clase .smaller-image." + ] + }, + "pt-br": { + "title": "Insira Bordas Arredondadas com o border-radius", + "description": [ + "Sua foto com o gato possui cantos pontiagudos. Podemos arredondar os cantos com uma propriedade CSS chamado border-radius.", + "
", + "Você pode especificar um border-radius com pixels. Adicione um border-radius de 10px para a sua foto.", + "Nota: Este desafio permite várias soluções possíveis. Por exemplo, você pode adicionar o border-radius tanto para a classe .thick-green-border como para a classe .smaller-image." + ] + }, + "ru": { + "title": "Добавьте скруглённые углы с помощью радиуса границы", + "description": [ + "У вашего фото кота сейчас острые углы. Мы можем скруглить углы используя CSS-свойство border-radius.", + "
", + "Вы можете указать значения border-radius в пикселях. Присвойте вашему фото кота свойство border-radius со значением 10px.", + "Внимание: это задание подразумевает наличие нескольких возможных решений. Например, вы можете добавить border-radius как к классу .thick-green-border, так и к классу .smaller-image." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08815", + "title": "Make Circular Images with a border-radius", + "description": [ + "In addition to pixels, you can also specify a border-radius using a percentage.", + "
", + "Give your cat photo a border-radius of 50%." + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + "
    ", + "
  • cat nip
  • ", + "
  • laser pointers
  • ", + "
  • lasagna
  • ", + "
", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
  2. ", + "
  3. thunder
  4. ", + "
  5. other cats
  6. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" + ], + "tests": [ + "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'message: Your image should have a border radius of 50%, making it perfectly circular.');", + "assert(code.match(/50%/g), 'message: Be sure to use a percentage value of 50%.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Erstelle runde Bilder mit einem border-radius", + "description": [ + "Du kannst einem border-radius neben Pixeln auch Prozentwerte zuweisen.", + "
", + "Gib deinem Katzenfoto einen border-radius von 50%." + ] + }, + "es": { + "title": "Crea imágenes circulares usando border-radius", + "description": [ + "Además de pixeles, puedes especificar un border-radius usando porcentajes.", + "
", + "Dale a tu foto del gato un border-radius de 50%." + ] + }, + "pt-br": { + "title": "Deixe as Imagens Circulares com o border-radius", + "description": [ + "Assim como pixels, você também pode usar o border-radius com porcentagens.", + "
", + "Dê para a sua foto de gato um border-radius de 50%." + ] + }, + "ru": { + "title": "Сделайте круглые изображения с помощью радиуса границы", + "description": [ + "В дополнение к пикселям, вы также может использовать проценты для указания значения свойства border-radius.", + "
", + "Присвойте вашему фото кота свойство border-radius со значением 50%." + ] + } + } + }, + { + "id": "bad87fed1348bd9aede07836", + "title": "Give a Background Color to a div Element", + "description": [ + "You can set an element's background color with the background-color property.", + "For example, if you wanted an element's background color to be green, you'd put this within your style element:", + "
.green-background {
  background-color: green;
}
", + "
", + "Create a class called silver-background with the background-color of silver. Assign this class to your div element." + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + "
    ", + "
  • cat nip
  • ", + "
  • laser pointers
  • ", + "
  • lasagna
  • ", + "
", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
  2. ", + "
  3. thunder
  4. ", + "
  5. other cats
  6. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" + ], + "tests": [ + "assert($(\"div\").hasClass(\"silver-background\"), 'message: Give your div element the class silver-background.');", + "assert($(\".silver-background\").css(\"background-color\") === \"rgb(192, 192, 192)\", 'message: Your div element should have a silver background.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Gib einem div Element eine Hintergrundfarbe", + "description": [ + "Du kannst die Hintergrundfarbe von einem Element mit dem background-color Attribut setzen", + "Wenn du zum Beispiel die Hintergrundfarbe von einem Element green machen willst, schreibe dies in dein style Element:", + "
.green-background {
  background-color: green;
}
", + "
", + "Erstelle eine Klasse namens silver-background mit der background-color grau (silver). Füge diese Klasse deinem div Element hinzu" + ] + }, + "es": { + "title": "Da un color de fondo a un elemento div", + "description": [ + "Puedes fijar el color de fondo de un elemento con la propiedad background-color.", + "Por ejemplo, si quieres que el color de fondo de un elemento sea verde (green), dentro de tu elemento style pondrías:", + "
.green-background {
  background-color: green;
}
", + "
", + "Crea una clase llamada silver-background con la propiedad background-color en gris (silver). Asigna esta clase a tu elemento div ." + ] + }, + "pt-br": { + "title": "Dê uma Cor de Fundo a um Elemento div", + "description": [ + "Você pode acrescentar uma cor de fundo de um elemento com a propriedade background-color.", + "Por exemplo, se você quiser que a cor de fundo de um elemento seja verde (green), dentro de seu elemento style seria assim:", + ".green-background {", + "  background-color: green;", + "}", + "
", + "Crie uma classe chamada silver-background com a propriedade background-color em cinza (silver). Depois, adicione essa classe ao seu elemento div." + ] + }, + "ru": { + "title": "Присвойте цвет фона элементу div", + "description": [ + "Вы можете установить цвет фона элемента с помощью свойства background-color.", + "Например, если бы вы хотели установить цвет фона элемента зелёным, вы бы использовали следующий стиль внутри вашего элемента style:", + "
.green-background {
  background-color: green;
}
", + "
", + "Создайте класс silver-background со значением свойства background-color равным silver. Назначьте этот класс вашему элементу div." + ] + } + } + }, + { + "id": "bad87eee1348bd9aede07836", + "title": "Set the id of an Element", + "description": [ + "In addition to classes, each HTML element can also have an id attribute.", + "There are several benefits to using id attributes: You can use an id to style a single element and later you'll learn that you can use them to select and modify specific elements with JavaScript.", + "id attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same id attribute.", + "Here's an example of how you give your h2 element the id of cat-photo-app:", + "<h2 id=\"cat-photo-app\">", + "
", + "Give your form element the id cat-photo-form." + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + "
    ", + "
  • cat nip
  • ", + "
  • laser pointers
  • ", + "
  • lasagna
  • ", + "
", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
  2. ", + "
  3. thunder
  4. ", + "
  5. other cats
  6. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" + ], + "tests": [ + "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'message: Give your form element the id of cat-photo-form.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Setze die ID von einem Element", + "description": [ + "Zusätzlich zu Klassen, kann jedes HTML Element auch ein id Attribut haben.", + "Es hat mehrere Vorteile id Attribute zu verwenden und du wirst mehr über diese erfahren wenn du anfängst mit jQuery zu arbeiten.", + "id Attribute sollten eindeutig sein. Browser werden das nicht durchsetzen, aber es ist eine weit verbreitete und erprobte Herangehensweise. Also gib bitte nie mehr als einem Element das gleiche id Attribut.", + "Hier ist ein Beispiel wie du deinem h2 Element die Id cat-photo-app gibst:", + "<h2 id=\"cat-photo-app\">", + "
", + "Gib deinem form Element die Id cat-photo-form." + ] + }, + "es": { + "title": "Establecer el ID de un elemento", + "description": [ + "Además de las clases, cada elemento HTML también puede tener un atributo de identificación id.", + "Hay varias ventajas al usar atributos id, y aprenderás más sobre estas cuando comiences a usar jQuery.", + "Los atributos id deben ser únicos. Los navegadores no obligarán esto, pero es ampliamente reconocido como una de las mejores prácticas. Así que por favor no le des a más de un elemento un mismo atributo id. ", + "He aquí un ejemplo de cómo le das la identificación cat-photo-app a tu elemento h2:", + "<h2 id=\"cat-photo-app\">", + "
", + "Dale a tu elemento form la id cat-photo-form." + ] + }, + "pt-br": { + "title": "Estabeleça a ID de um Elemento", + "description": [ + "Além das classes, cada elemento HTML também pode ter um atributo de identificação chamado id.", + "Existem várias vantagens ao utilizar atributos id, e você aprenderá mais sobre elas quando começar a utilizar jQuery.", + "Os atributos id devem ser únicos. Os navegadores não o obrigarão a isso, mas isso é amplamente reconhecido como uma boa prática. Assim, não dê um mesmo atributo id a mais de um elemento.", + "Veja aqui um exemplo de como dar a id cat-photo-app ao seu elemento code>h2:", + "<h2 id=\"cat-photo-app\">", + "
", + "Dê ao seu elemento form a id cat-photo-form." + ] + }, + "ru": { + "title": "Установите id элемента", + "description": [ + "В дополнение к классам, каждый HTML-элемент может также иметь атрибут id.", + "Есть некоторые преимущества использования атрибутов id, вы узнаете о них больше, когда начнёте использовать jQuery.", + "Атрибутам id следует быть уникальными. Браузеры не принуждают к этому, но широкой общественностью это признано лучшей практикой. Поэтому, пожалуйста, не присваивайте множеству элементов одинаковое значение атрибута id.", + "Вот пример того, как вы можете присвоить вашему элементу h2 значение атрибута id равное cat-photo-app:", + "<h2 id=\"cat-photo-app\">", + "
", + "Присвойте вашему элементу form атрибут id со значением cat-photo-form." + ] + } + } + }, + { + "id": "bad87dee1348bd9aede07836", + "title": "Use an id Attribute to Style an Element", + "description": [ + "One cool thing about id attributes is that, like classes, you can style them using CSS.", + "However, an id is not reusable and should only be applied to one element. An id also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the id will be applied.", + "Here's an example of how you can take your element with the id attribute of cat-photo-element and give it the background color of green. In your style element:", + "
#cat-photo-element {
  background-color: green;
}
", + "Note that inside your style element, you always reference classes by putting a . in front of their names. You always reference ids by putting a # in front of their names.", + "
", + "Try giving your form, which now has the id attribute of cat-photo-form, a green background." + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + "
    ", + "
  • cat nip
  • ", + "
  • laser pointers
  • ", + "
  • lasagna
  • ", + "
", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
  2. ", + "
  3. thunder
  4. ", + "
  5. other cats
  6. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" + ], + "tests": [ + "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'message: Give your form element the id of cat-photo-form.');", + "assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'message: Your form element should have the background-color of green.');", + "assert(code.match(//gi) && code.match(//gi).length > 0, 'message: Make sure your form element has an id attribute.');", + "assert(!code.match(//gi) && !code.match(//gi), 'message: Do not give your form any class or style attributes.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Benutze ein ID Attribute um ein Element zu stylen", + "description": [ + "Eine coole Eigenschaft von id Attributen ist, dass du sie, genauso wie Klassen, mit CSS stylen kannst.", + "Hier ist ein Beispiel wie du einem Element mit dem id Attribut cat-photo-element eine grüne Hintergrundfarbe geben kannst. In deinem style Element:", + "
#cat-photo-element {
  background-color: green;
}
", + "Beachte, dass du in deinem style Element Klassen immer mit einem . vor deren Namen ansprichst. Ids sprichst du immer mit # vor deren Namen an.", + "
", + "Versuche deinem Formular, das jetzt das id Attribut cat-photo-form hat, einen grünen Hintergrund zu geben." + ] + }, + "es": { + "title": "Usa un atributo ID para dar estilo a un elemento", + "description": [ + "Una cosa buena sobre los atributos id es que, al igual que con clases, puedes darles estilo usando CSS.", + "He aquí un ejemplo de cómo puedes tomar tu elemento con atributo id de cat-photo-element y ponerle el color de fondo verde. En tu elemento style: ", + "
#cat-photo-element {
  background-color: green;
}
", + "Ten en cuenta que dentro de tu elemento style, siempre referencias clases poniendo un . en frente de sus nombres. Y siempre referencias identificaciones poniendo un # frente a sus nombres. ", + "
", + "Trata de darle a tu formulario, que ahora tiene el atributo id en cat-photo-form, un fondo verde." + ] + }, + "pt-br": { + "title": "Use um Atributo ID para Estilizar um Elemento", + "description": [ + "Algo interessante sobre os atributos id é que, da mesma forma que com as classes, é possível dar estilos a eles usando CSS.", + "Aqui está um exemplo de como você pode usar seu elemento com atributo id em cat-photo-element e dar a ele a cor de fundo verde.", + "#cat-photo-element {", + "  background-color: green;", + "}", + "Note que dentro de seu elemento style, você deve sempre referenciar uma classe colocando um . logo antes de seu nome. Já com uma id, você deve referenciar colocando um # antes de seu nome.", + "
", + "Dê ao seu formulário, que agora possui o atributo code>id em cat-photo-form, um fundo verde." + ] + }, + "ru": { + "title": "Используйте атрибут id для стилизации элемента", + "description": [ + "Одной из замечательных вещей в отношении атрибута id является то, что, как и с классами, вы можете стилизовать их с помощью CSS.", + "Вот пример того как вы можете присвоить вашему элементу со значением атрибута id равным cat-photo-element зелёный цвет фона. В вашем элементе style:", + "
#cat-photo-element {
  background-color: green;
}
", + "Обратите внимание, что внутри вашего элемента style вы ссылаетесь на классы используя . перед их именами. При этом вы всегда ссылаетесь на идентификаторы вставляя # перед их именами.", + "
", + "Попробуйте установить для своей формы, которая теперь имеет атрибут id равный cat-photo-form, зелёный в качестве цвета фона." + ] + } + } + }, + { + "id": "bad88fee1348bd9aedf08825", + "title": "Adjust the Padding of an Element", + "description": [ + "Now let's put our Cat Photo App away for a little while and learn more about styling HTML.", + "You may have already noticed this, but all HTML elements are essentially little rectangles.", + "Three important properties control the space that surrounds each HTML element: padding, margin, and border.", + "An element's padding controls the amount of space between the element's content and its border.", + "Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more padding than the green box.", + "When you increase the green box's padding, it will increase the distance between the text padding and the border around it.", + "
", + "Change the padding of your green box to match that of your red box." + ], + "challengeSeed": [ + "", + "
margin
", + "", + "
", + "
padding
", + "
padding
", + "
" + ], + "tests": [ + "assert($(\".green-box\").css(\"padding-top\") === \"20px\", 'message: Your green-box class should give elements 20px of padding.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Justiere den Innenabstand eines Elements", + "description": [ + "Lass uns jetzt mal unsere Katzenfoto App kurz beiseite legen um mehr über HTML Styling zu lernen", + "Du hast vielleicht schon bemerkt, dass alle HTML Elemente im Prinzip kleine Rechtecke sind.", + "Drei wichtige CSS-Eigenschaften beeinflussen den Platz den jedes HTML Element umgibt: padding, margin und border.", + "padding kontrolliert den Raum oder Abstand zwischen dem Inhalt eines Elements und dessen Rahmen – border", + "Wir sehen in diesem Beispiel, dass sich die grüne Box und die rote Box innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr padding hat als die grüne Box.", + "
", + "Ändere das padding der grünen Box um es an die rote Box anzugleichen." + ] + }, + "es": { + "title": "Ajusta el relleno de un elemento", + "description": [ + "Ahora vamos a dejar de lado nuestra aplicación de fotos de gatos por un tiempo, y aprenderemos más sobre dar estilo a HTML", + "Ya habrás notado esto, pero todos los elementos HTML son esencialmente pequeños rectángulos.", + "Tres propiedades importantes controlan el espacio que rodea a cada elemento HTML: relleno (padding), margen (margin) y borde (border)", + "El relleno (padding) de un elemento controla la cantidad de espacio entre el elemento y su borde (border).", + "Aquí, podemos ver que el cuadro verde y el cuadro rojo se anidan dentro del cuadro amarillo. Ten en cuenta que el cuadro rojo tiene más relleno (padding) que el cuadro verde. ", + "Cuando aumentes el relleno de la caja verde, aumentará la distancia entre el texto padding y el borde alrededor de este.", + "
", + "Cambia el relleno (padding) de la caja verde para que coincida con el de tu cuadro rojo." + ] + }, + "pt-br": { + "title": "Ajuste o Preenchimento de um Elemento", + "description": [ + "Agora vamos deixar nosso aplicativo de fotos de gatos um pouco de lado, e aprender mais sobre dar estilos em HTML.", + "Você provavelmente já deve ter notado, mas todos os elementos HTML são, essencialmente, pequenos retângulos.", + "Três propriedades importantes controlam o espaço ao redor de cada elemento HTML: preenchimento (padding), margem (margin) e borda (border).", + "O preenchimento (padding) de um elemento controla a quantidade de espaço entre o elemento e sua borda (border).", + "Aqui, podemos ver que o quadro verde e o quadro vermelho se aninham dentro do quadro amarelo. Leve em conta que o quadro vermelho tem mais preenchimento (padding) que o quadro verde.", + "Quando você aumenta o preenchimento da caixa verde, a distância entre o texto padding e a borda ao seu redor também será maior.", + "
", + "Mude o preenchimento (padding) da caixa verde para que coincida com a de seu quadrado vermelho." + ] + }, + "ru": { + "title": "Настройка отступа содержимого для элемента", + "description": [ + "Теперь давайте отложим наше фото кота на некоторое время и изучим стилизацию HTML.", + "Вы могли уже заметить это, но все HTML-элеметы в приницпе являются небольшими прямоугольниками.", + "Пространство вокруг каждого HTML-элемента контролируют три важных свойства: padding, margin, border.", + "Свойство элемента padding управляет размером пространства между элементом и его границей border.", + "Тут мы можем видеть, что зелёный и красный прямоугольник вложены в жёлтый прямоугольник. Обратите внимание на то, что красный прямоугольник имеет больший отступ содержимого padding, чем зелёный прямоугольник.", + "Когда вы увеличиваете padding зелёного прямоугольника, увеличивается расстояние между границей содержимого и границей самого элемента border.", + "
", + "Измените значение свойства padding вашего зелёного прямоугольника, чтобы он был равен соответствующему значению красного прямоугольника." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08822", + "title": "Adjust the Margin of an Element", + "description": [ + "An element's margin controls the amount of space between an element's border and surrounding elements.", + "Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more margin than the green box, making it appear smaller.", + "When you increase the green box's margin, it will increase the distance between its border and surrounding elements.", + "
", + "Change the margin of the green box to match that of the red box." + ], + "challengeSeed": [ + "", + "
margin
", + "", + "
", + "
padding
", + "
padding
", + "
" + ], + "tests": [ + "assert($(\".green-box\").css(\"margin-top\") === \"20px\", 'message: Your green-box class should give elements 20px of margin.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Passe den Außenabstand eines Elements an", + "description": [ + "margin kontrolliert den Abstand zwischen dem Rahmen - border - eines Elements und den benachbarten Elementen.", + "In diesem Beispiel sehen wir die grüne und die rote Box die sich beide innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr margin aufweist als die grüne Box, wodurch sie kleiner wirkt.", + "Wenn du den Außenabstand – margin – der grünen Box erhöhst, wird sich der Abstand zwischen ihrem Rahmen und den benachbarten Elementen vergrößern.", + "
", + "Gleiche den Außenabstand – margin der grünen Box dem der roten Box an." + ] + }, + "es": { + "title": "Ajusta el margen de un elemento", + "description": [ + "El margen (margin) de un elemento controla la cantidad de espacio entre el borde (border) y los elementos alrededor.", + "Aquí, podemos ver que la caja verde y la caja roja se anidan dentro de la caja amarilla. Ten en cuenta que la caja roja tiene más margen (margin) que la caja verde, haciendo que parezca más pequeña. ", + "Cuando aumentes el margen (margin) de la caja verde, aumentará la distancia entre su borde y los elementos que la rodean.", + "
", + "Cambia el margen (margin) de la caja verde para que coincida con el de la caja roja." + ] + }, + "pt-br": { + "title": "Ajuste a Margem de um Elemento", + "description": [ + "A margem (margin) de um elemento controla a quantidade de espaço entre a borda (border) e os elementos ao seu redor.", + "Aqui, podemos ver que a caixa verde e a caixa vermelha se aninham dentro da caixa amarela. Note que a caixa vermelha possui a margem maior que a caixa verde, fazendo com que ela pareça menor.", + "Quando você aumenta a margem (margin) da caixa verde, a distância entre a borda e os elementos ao seu redor também aumentará.", + "
", + "Mude a margem (margin) da caixa verde para que coincida com a margem da caixa vermelha." + ] + }, + "ru": { + "title": "Настройка отступа элемента", + "description": [ + "Значение свойства margin контролирует размер отступа между границей border элемента и его окружением.", + "Тут мы можем видеть, что зелёный прямоугольник и красный прямоугольник вложены в жёлтый прямоугольник. Обратите внимание на то, что красный прямоугольник имеет больший отступ margin, чем зелёный прямоугольник, что делает его визуально меньше.", + "Когда вы увеличиваете отступ margin зелёного прямоугольника, увеличивается расстояние между его границей и окружающими элементами.", + "
", + "Измените значение отступа margin зелёного прямоугольника так, чтобы оно равнялось соответствующему значению красного прямоугольника." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08823", + "title": "Add a Negative Margin to an Element", + "description": [ + "An element's margin controls the amount of space between an element's border and surrounding elements.", + "If you set an element's margin to a negative value, the element will grow larger.", + "
", + "Try to set the margin to a negative value like the one for the red box.", + "Change the margin of the green box to -15px, so it fills the entire horizontal width of the yellow box around it." + ], + "challengeSeed": [ + "", + "", + "
", + "
padding
", + "
padding
", + "
" + ], + "tests": [ + "assert($(\".green-box\").css(\"margin-top\") === \"-15px\", 'message: Your green-box class should give elements -15px of margin.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Füge einem Element negativen Außenabstand hinzu", + "description": [ + "margin kontrolliert den Abstand zwischen dem Rahmen - border - eines Elements und den benachbarten Elementen.", + "Wenn du dem Außenabstand - margin - eines Elements einen negativen Wert zuweist, wird das Element größer.", + "
", + "Versuche den Außenabstand - margin - auf einen negativen Wert, wie bei der roten Box, zu setzen.", + "Ändere den Außenabstand – margin – der grünen Box auf -15px, damit sie die gelbe Box horizontal ausfüllt." + ] + }, + "es": { + "title": "Agregar un margen negativo a un elemento", + "description": [ + "El margen de un elemento controla la cantidad de espacio entre el borde del elemento y los elementos que lo rodean.", + "Si estableces el margen de un elemento en un valor negativo, el elemento se hará más grande.", + "
", + "Trata de establecer el margen (margin) a un valor negativo como el de la caja roja.", + "Cambia el margen (margin) de la caja verde a -15px, de forma que ocupe todo el ancho horizontal de la caja amarilla que lo rodea." + ] + }, + "pt-br": { + "title": "Adicione uma Margem Negativa a um Elemento", + "description": [ + "A margem de um elemento controla a quantidade de espaço entre a borda do elemento e os elementos ao seu redor.", + "Se você estabelece a margem de um elemento com um valor negativo, o elemento ficará maior.", + "
", + "Tente estabelecer a margem (margin) a um valor negativo como o da caixa vermelha.", + "Mude a margem (margin) da caixa verde para -15px, de forma que ocupe toda a largura horizontal da caixa amarela que a rodeia." + ] + }, + "ru": { + "title": "Добавьте отрицательный отступ к элементу", + "description": [ + "Значение свойства margin контролирует размер отступа между границей border элемента и его окружением.", + "Если вы установите значение свойства margin элемента отрицательным, то элемент будет становиться больше.", + "
", + "Попробуйте установить значение свойства margin зелёного прямоугольника отрицательным, по аналогии с красным прямоугольником.", + "Измените значение свойства margin зелёного прямоугольника на -15px, таким образом он занимает всю ширину окружающего жёлтого прямоугольника." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08824", + "title": "Add Different Padding to Each Side of an Element", + "description": [ + "Sometimes you will want to customize an element so that it has different padding on each of its sides.", + "CSS allows you to control the padding of an element on all four sides with padding-top, padding-right, padding-bottom, and padding-left properties.", + "
", + "Give the green box a padding of 40px on its top and left side, but only 20px on its bottom and right side." + ], + "challengeSeed": [ + "", + "
margin
", + "", + "
", + "
padding
", + "
padding
", + "
" + ], + "tests": [ + "assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'message: Your green-box class should give the top of the elements 40px of padding.');", + "assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'message: Your green-box class should give the right of the elements 20px of padding.');", + "assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'message: Your green-box class should give the bottom of the elements 20px of padding.');", + "assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'message: Your green-box class should give the left of the elements 40px of padding.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Gib jeder Seite eines Elements einen unterschiedlichen Innenabstand", + "description": [ + "Manchmal wirst du einem Element auf jeder Seite unterschiedliche Innenabstände – also padding – geben wollen.", + "CSS erlaubt dir den Innenabstand - padding - eines Elements auf allen Seiten einzeln mit den Eigenschaften padding-top, padding-right, padding-bottom und padding-left zu steuern.", + "
", + "Verleihe der grünen Box einen Innenabstand – padding – von 40px auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite." + ] + }, + "es": { + "title": "Añade relleno diferente a cada lado de un elemento", + "description": [ + "A veces querrás personalizar un elemento para que tenga diferente relleno (padding) en cada uno de sus lados.", + "CSS te permite controlar el relleno (padding) de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades padding-top, padding-right, padding-bottom y padding-left. ", + "
", + "Da a la caja verde un relleno (padding) de 40px en las partes superior e izquierda, pero sólo 20px en sus partes inferior y derecha." + ] + }, + "pt-br": { + "title": "Dê Valores Diferentes de Preenchimento a Cada Lado de um Elemento", + "description": [ + "As vezes pode ser que você queira personalizar um elemento para que tenha um preenchimento (padding) diferente em cada um de seus lados.", + "O CSS permite controlar o preenchimento (padding) de um elemento em todos os quatro lados: superior, direito, inferior e esquerdo, com as propriedades padding-top, padding-right, padding-bottom e padding-left.", + "
", + "Dê para a caixa verde um preenchimento (padding) de 40px nas partes superior e esquerda, e de apenas 20px em suas partes inferior e direita." + ] + }, + "ru": { + "title": "Добавьте разный отступ содердимого с каждой стороны элемента", + "description": [ + "Иногда вам может потребоваться изменить элемент таким образом, чтобы отступ содержимого padding с каждой из сторон был разным.", + "CSS позволяет вам контролировать значение свойства padding элемента со всех сторон с помощью свойств: padding-top, padding-right, padding-bottom, padding-left.", + "
", + "Присвойте зелёному прямоугольнику padding равный 40px сверху и слева, но только 20px снизу и справа." + ] + } + } + }, + { + "id": "bad87fee1248bd9aedf08824", + "title": "Add Different Margins to Each Side of an Element", + "description": [ + "Sometimes you will want to customize an element so that it has a different margin on each of its sides.", + "CSS allows you to control the margin of an element on all four sides with margin-top, margin-right, margin-bottom, and margin-left properties.", + "
", + "Give the green box a margin of 40px on its top and left side, but only 20px on its bottom and right side." + ], + "challengeSeed": [ + "", + "
margin
", + "", + "
", + "
padding
", + "
padding
", + "
" + ], + "tests": [ + "assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'message: Your green-box class should give the top of elements 40px of margin.');", + "assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'message: Your green-box class should give the right of elements 20px of margin.');", + "assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'message: Your green-box class should give the bottom of elements 20px of margin.');", + "assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'message: Your green-box class should give the left of elements 40px of margin.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Füge jeder Seite eines Elements einen unterschiedlichen Außenabstand hinzu", + "description": [ + "Manchmal wirst du einem Element auf jeder Seite einen unterschiedlichen Außenabstand - margin - geben wollen.", + "CSS erlaubt dir ebenfalls den Außenabstand - margin - eines Elements auf jeder Seite einzeln mit den Eigenschaften margin-top, margin-right, margin-bottom und margin-left zu steuern.", + "
", + "Gib der grünen Box einen Außenabstand – margin – von 40px auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite." + ] + }, + "es": { + "title": "Añade márgenes diferentes a cada lado de un elemento", + "description": [ + "A veces querrás personalizar un elemento para que tenga un margen (margin) diferente en cada uno de sus lados.", + "CSS te permite controlar el margen de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades margin-top, margin-right, margin-bottom y margin-left. ", + "
", + "Da a la caja verde un margen (margin) de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho." + ] + }, + "pt-br": { + "title": "Dê Valores Diferentes de Margem a Cada Lado de um Elemento", + "description": [ + "Talvez você queira personalizar um elemento para que possua uma margem (margin) diferente em cada um de seus lados.", + "O CSS permite controlar a margem de um elemento em todos os seus quatro lados: superior, direito, inferior e esquerdo, com as propriedades margin-top, margin-right, margin-bottom e margin-left.", + "
", + "Dê para a caixa verde uma margem (margin) de 40px nas partes superior e esquerda, e de apenas 20px nas partes inferior e direita." + ] + }, + "ru": { + "title": "Добавьте разный отступ для элемента", + "description": [ + "Иногда вам может потребоваться изменить элемент, установив разный отступ margin с каждой из его сторон.", + "CSS позволяет вам контролировать отступ margin элемента с каждой из его сторон с помощью свойств: margin-top, margin-right, margin-bottom, margin-left.", + "
", + "Присвойте красному прямоугольнику значение margin равное 40px сверху и слева, но только 20px снизу и справа." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08826", + "title": "Use Clockwise Notation to Specify the Padding of an Element", + "description": [ + "Instead of specifying an element's padding-top, padding-right, padding-bottom, and padding-left properties, you can specify them all in one line, like this:", + "padding: 10px 20px 10px 20px;", + "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.", + "
", + "Use Clockwise Notation to give the \".green-box\" class a padding of 40px on its top and left side, but only 20px on its bottom and right side." + ], + "challengeSeed": [ + "", + "
margin
", + "", + "
", + "
padding
", + "
padding
", + "
" + ], + "tests": [ + "assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'message: Your green-box class should give the top of elements 40px of padding.');", + "assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'message: Your green-box class should give the right of elements 20px of padding.');", + "assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'message: Your green-box class should give the bottom of elements 20px of padding.');", + "assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'message: Your green-box class should give the left of elements 40px of padding.');", + "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'message: You should use the clockwise notation to set the padding of green-box class.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Nutze die Notation im Uhrzeigersinn um den Innenabstand eines Elements zu bestimmen", + "description": [ + "Anstatt die Eigenschaften padding-top, padding-right, padding-bottom und padding-left zu verwenden, kannst du sie alle in einer Zeile schreiben:", + "padding: 10px 20px 10px 20px;", + "Diese vier Werte funktionieren wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt dasselbe wie die seitenspezifischen Anweisungen.", + "
", + "Gib der Klasse \".green-box\" mit einer Notation im Uhrzeigersinn einen Innenabstand – padding – von 40px auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite." + ] + }, + "es": { + "title": "Utiliza notación en sentido horario para especificar el relleno de un elemento", + "description": [ + "En lugar de especificar las propiedades padding-top, padding-right, padding-bottom y padding-left de un elemento, puedes especificar todas en una sóla línea, así: ", + "padding: 10px 20px 10px 20px;", + "Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones de relleno.", + "
", + "Usa la notación en sentido horario para dar a la clase \".green-box\" un relleno de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho ." + ] + }, + "pt-br": { + "title": "Use Notação em Sentido Horário para Especificar o Preenchimento de um Elemento", + "description": [ + "Ao invés de especificar as propriedades padding-top, padding-right, padding-bottom e padding-left de um elemento, você pode especificar todas elas em uma só linha, assim:", + "padding: 10px 20px 10px 20px;", + "Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de preenchimento.", + "
", + "Use a notação em sentido horário para dar para a classe \".green-box\" um preenchimento de 40px nas partes superior e esquerda, mas de apenas 20px em sua parte inferior e ao lado direito." + ] + }, + "ru": { + "title": "Используйте систему ссылок по часовой стрелке для установки отступа содержмого элемента", + "description": [ + "Вместо указания свойств элемента: padding-top, padding-right, padding-bottom, padding-left, вы можете указать их в строку, например:", + "padding: 10px 20px 10px 20px;", + "Установка значений работает по часовой стрелке: сверху, справа, снизу, слева, и приводит к ровно такому же результату, как и использование других инструкций.", + "
", + "Используйте систему ссылок по часовой стрелке для установки для класса \".green-box\" значения отступа содержимого padding равное 40px сверху и слева, но только 20px снизу и справа." + ] + } + } + }, + { + "id": "bad87fee1348bd9afdf08726", + "title": "Use Clockwise Notation to Specify the Margin of an Element", + "description": [ + "Let's try this again, but with margin this time.", + "Instead of specifying an element's margin-top, margin-right, margin-bottom, and margin-left properties, you can specify them all in one line, like this:", + "margin: 10px 20px 10px 20px;", + "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.", + "
", + "Use Clockwise Notation to give the element with the green-box class a margin of 40px on its top and left side, but only 20px on its bottom and right side." + ], + "challengeSeed": [ + "", + "
margin
", + "", + "
", + "
padding
", + "
padding
", + "
" + ], + "tests": [ + "assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'message: Your green-box class should give the top of elements 40px of margin.');", + "assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'message: Your green-box class should give the right of elements 20px of margin.');", + "assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'message: Your green-box class should give the bottom of elements 20px of margin.');", + "assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'message: Your green-box class should give the left of elements 40px of margin.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Nutze die Notation im Uhrzeigersinn um den Außenabstand eines Elements zu bestimmen", + "description": [ + "Versuchen wir das noch einmal, aber diesmal mit dem Außenabstand – also margin.", + "Anstatt die Eigenschaften margin-top, margin-right, margin-bottom und margin-left zu verwenden, kannst du alle in eine Zeile schreiben:", + "margin: 10px 20px 10px 20px;", + "Diese vier Werte funktionieren wieder wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt das Gleiche wie die seitenspezifischen Anweisungen.", + "
", + "Nutze die Notation im Uhrzeigersinn – auch Clockwise Notation genannt – um dem Element mit der Klasse green-box 40px Außenabstand auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite zu verleihen." + ] + }, + "es": { + "title": "Utiliza notación en sentido horario para especificar el margen de un elemento", + "description": [ + "Vamos a intentar esto de nuevo, pero esta vez con el margen (margin).", + "En lugar de especificar las propiedades margin-top, margin-right, margin-bottom, y margin-left de un elemento, puedes especificarlas en una sóla línea así: ", + "margin: 10px 20px 10px 20px;", + "Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones que especifican el margen.", + "
", + "Usa notación en sentido horario para dar al elemento con la clase green-box un margen de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho ." + ] + }, + "pt-br": { + "title": "Use Notação em Sentido Horário para Especificar a Margem de um Elemento", + "description": [ + "Vamos praticar isso outra vez, mas desta vez será com a margem (margin).", + "Ao invés de especificar as propriedades margin-top, margin-right, margin-bottom, e margin-left de um elemento, você pode especificar todas elas em apenas uma linha assim:", + "margin: 10px 20px 10px 20px;", + "Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de margem.", + "
", + "Use a notação em sentido horário para dar para a classe \".green-box\" uma margem de 40px nas partes superior e esquerda, mas de apenas 20px em sua parte inferior e ao lado direito." + ] + }, + "ru": { + "title": "Используйте систему ссылок по часовой стрелке для установки отступа элемента", + "description": [ + "Давайте попробуем то же самое, но со свойством margin на этот раз.", + "Вмето указания свойств элемента: margin-top, margin-right, margin-bottom, margin-left, вы можете указать их в строку, например:", + "margin: 10px 20px 10px 20px;", + "Установка значений работает по часовой стрелке: сверху, справа, снизу, слева, и приводит к ровно такому же результату, как и использование других инструкций.", + "
", + "Используйте систему ссылок по часовой стрелке для установки для класса green-box значения отступа margin равное 40px сверху и слева, но только 20px снизу и справа." + ] + } + } + }, + { + "id": "58c383d33e2e3259241f3076", + "title": "Use Attribute Selectors to Style Elements", + "description": [ + "You have been giving id or class attributes to elements that you wish to specifically style. These are known as ID and class selectors. There are other CSS Selectors you can use to select custom groups of elements to style.", + "Let's bring out CatPhotoApp again to practice using CSS Selectors.", + "For this challenge, you will use the [attr=value] attribute selector to style the checkboxes in CatPhotoApp. This selector matches and style elements with a specific attribute value. For example, the below code changes the margins of all elements with the attribute type and a corresponding value of radio:", + "
[type='radio'] {
margin: 20px 0px 20px 0px;
}
", + "
", + "Using the type attribute selector, try to give the checkboxes in CatPhotoApp a top margin of 10px and a bottom margin of 15px." + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "
", + "

Things cats love:

", + "
    ", + "
  • cat nip
  • ", + "
  • laser pointers
  • ", + "
  • lasagna
  • ", + "
", + "

Top 3 things cats hate:

", + "
    ", + "
  1. flea treatment
  2. ", + "
  3. thunder
  4. ", + "
  5. other cats
  6. ", + "
", + "
", + " ", + "
", + " ", + "
", + " ", + " ", + "
", + " ", + " ", + "
", + "
" + ], + "tests": [ + "assert(code.match(/", + "
margin
", + "", + "
", + "
padding
", + "
padding
", + "
" + ], + "tests": [ + "assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px', 'message: Your red-box class should have a padding property.');", + "assert(code.match(/\\.red-box\\s*?{\\s*?.*?\\s*?.*?\\s*?padding:\\s*?1\\.5em/gi), 'message: Your red-box class should give elements 1.5em of padding.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": {} + }, + { + "id": "bad87fee1348bd9aedf08736", + "title": "Style the HTML Body Element", + "description": [ + "Now let's start fresh and talk about CSS inheritance.", + "Every HTML page has a body element.", + "
", + "We can prove that the body element exists here by giving it a background-color of black.", + "We can do this by adding the following to our style element:", + "
body {
  background-color: black;
}
" + ], + "challengeSeed": [ + "" + ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Give your body element the background-color of black.');", + "assert(code.match(/" + ], + "tests": [ + "assert(($(\"h1\").length > 0), 'message: Create an h1 element.');", + "assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'message: Your h1 element should have the text Hello World.');", + "assert(code.match(/<\\/h1>/g) && code.match(/

/g).length === code.match(/

h1 element has a closing tag.');", + "assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'message: Give your body element the color property of green.');", + "assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'message: Give your body element the font-family property of Monospace.');", + "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'message: Your h1 element should inherit the font Monospace from your body element.');", + "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'message: Your h1 element should inherit the color green from your body element.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Erbe Styles vom Body Element", + "description": [ + "Jetzt haben wir bewiesen dass jede HTML Seite ein body Element besitzt und dass dieses body Element ebenfalls mit CSS gestylt werden kann.", + "Vergiss nicht, dass du dein body Element wie jedes andere HTML Element stylen kannst und dass alle anderen Elemente von deinem body Element Styles erben werden.", + "
", + "Erstelle zuerst ein h1 Element mit dem Text Hello World", + "Dann gib allen Elementen auf deiner Seite die Farbe green indem du color:green; deinen body Element Styles hinzufügst.", + "Gib deinem body Element abschließend die Schriftart Monospace indem du font-family: Monospace; deinen body Element Styles hinzufügst." + ] + }, + "es": { + "title": "Hereda estilos del elemento cuerpo", + "description": [ + "Ya hemos demostrado que cada página HTML tiene un cuerpo (body), y que puede dársele estilo CSS.", + "Recuerda que puedes dar estilo de tu elemento body como a cualquier otro elemento HTML, y que todos tus otros elementos heredarán sus estilos de tu elemento body.", + "
", + "En primer lugar, crea un elemento h1 con el texto Hello World", + "Después, vamos a darle a todos los elementos de tu página el color verde (green) añadiendo color: green; a la declaración de estilo de tu elemento body.", + "Por último, da a tu elemento body el tipo de letra Monospace añadiendo font-family: Monospace; a la declaración del estilo de tu elemento body." + ] + }, + "pt-br": { + "title": "Herde Estilos do Elemento Body", + "description": [ + "Já demonstramos que cada página HTML possui um corpo (body), e que podemos dar estilo a ele através do CSS.", + "Observe que você pode dar estilo ao seu elemento body como a qualquer outro elemento HTML, e que todos os outros elementos herdarão os estilos de seu elemento body.", + "
", + "Em primeiro lugar, crie um elemento h1 com o texto Hello World", + "Depois, dê a todos os elementos de sua página uma cor verde (green) adicionando color: green; na declaração de estilo de seu elemento body.", + "Por último, dê ao seu elemento body o tipo de fonte Monospace adicionando font-family: Monospace; na declaração de estilo de seu elemento body." + ] + }, + "ru": { + "title": "Наследование стилей от элемента Body", + "description": [ + "Мы доказали наличие у каждой HTML-страницы элемента body и то, что этот элемент body можно стилизовать с помощью CSS.", + "Не забывайте, что вы можете стилизовать ваш элемент body так же как и любой другой HTML-элемент, а все остальные элементы унаследуют стили элемента body.", + "
", + "Для начала, создайте элемент h1 с текстом Hello World", + "Затем присвойте всем элементам на вашей странице зелёный цвет путём добавления color: green; к свойствам, указанным в объявлении стилей для элемента body.", + "В завершении, присвойте вашему элементу body свойство семейства шрифтов равное Monospace путём добавления font-family: Monospace; к свойствам, указанным в объявлении стилей для элемента body." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08756", + "title": "Prioritize One Style Over Another", + "description": [ + "Sometimes your HTML elements will receive multiple styles that conflict with one another.", + "For example, your h1 element can't be both green and pink at the same time.", + "Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class override the body element's color: green; CSS property?", + "
", + "Create a CSS class called pink-text that gives an element the color pink.", + "Give your h1 element the class of pink-text." + ], + "challengeSeed": [ + "", + "

Hello World!

" + ], + "tests": [ + "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your h1 element should have the class pink-text.');", + "assert(code.match(/\\.pink-text\\s*\\{\\s*color\\s*:\\s*.+\\s*;\\s*\\}/g), 'message: Your <style> should have a pink-text CSS class that changes the color.');", + "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'message: Your h1 element should be pink.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Ziehe einen Style einem Anderen vor", + "description": [ + "Manchmal werden deine HTML Elemente mehrere Styles erhalten die sich gegenseitig widersprechen.", + "Zum Beispiel könnte dein h1 Element nicht gleichzeitig grün und pink sein.", + "
", + "Schauen wir uns an was passiert wenn wir eine Klasse erstellen die Text pink macht und dann einem Element hinzufügen. Wird unsere Klasse die color:green; Eigenschaft unseres body Elements überschreiben - override - ?" + ] + }, + "es": { + "title": "Priorizar un estilo sobre otro", + "description": [ + "A veces los elementos HTML recibirán múltiples estilos que entran en conflicto entre sí.", + "Por ejemplo, el elemento h1 no puede ser verde y rosa al mismo tiempo.", + "Vamos a ver lo que sucede cuando creamos una clase que hace rosado el texto y luego lo aplicamos a un elemento. ¿Anulará (override) nuestra clase la propiedad CSS color: green del elemento body?", + "
", + "Crea una clase CSS llamada pink-text que le da a un elemento el color rosado.", + "Ponle a tu elemento h1 la clase de pink-text." + ] + }, + "pt-br": { + "title": "Priorize um Estilo Sobre o Outro", + "description": [ + "As vezes os elementos HTML recebem múltiplos estilos que entram em conflito entre si.", + "Por exemplo, o elemento h1 não pode ser verde e rosa ao mesmo tempo.", + "Vamos ver o que acontece quando criamos uma classe que faz com que o texto seja rosa e então o aplicamos a um elemento. Isso irá sobrepor (override) a propriedade CSS color: green do elemento body de nossa classe?", + "
", + "Crie uma classe CSS chamada pink-text, que dê a cor rosa a um elemento.", + "Depois, adicione a classe pink-text ao seu elemento h1." + ] + }, + "ru": { + "title": "Установите приоритет одного стиля над другим", + "description": [ + "Иногда вашим HTML-элементам будут присвоены множественные стили, конфликтующие друг с другом.", + "Например, ваш элемент h1 не может быть одновременно зелёным и розовым.", + "Давайте посмотрим, что произойдёт, когда мы создадим класс, который делает текст розовым, затем присвоим его элементу. Переопределит ли наш класс значение CSS-свойства элемента body равное color: green;?", + "
", + "Создайте CSS-класс pink-text, который назначает элементу розовый в качестве цвета.", + "Назначьте вашему элементу h1 класс pink-text." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf04756", + "title": "Override Styles in Subsequent CSS", + "description": [ + "Our \"pink-text\" class overrode our body element's CSS declaration!", + "We just proved that our classes will override the body element's CSS. So the next logical question is, what can we do to override our pink-text class?", + "
", + "Create an additional CSS class called blue-text that gives an element the color blue. Make sure it's below your pink-text class declaration.", + "Apply the blue-text class to your h1 element in addition to your pink-text class, and let's see which one wins.", + "Applying multiple class attributes to a HTML element is done with a space between them like this:", + "class=\"class1 class2\"", + "Note: It doesn't matter which order the classes are listed in the HTML element.", + "However, the order of the class declarations in the <style> section are what is important. The second declaration will always take precedence over the first. Because .blue-text is declared second, it overrides the attributes of .pink-text" + ], + "challengeSeed": [ + "", + "

Hello World!

" + ], + "tests": [ + "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your h1 element should have the class pink-text.');", + "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your h1 element should have the class blue-text.');", + "assert($(\".pink-text\").hasClass(\"blue-text\"), 'message: Both blue-text and pink-text should belong to the same h1 element.');", + "assert($(\"h1\").css(\"color\") === \"rgb(0, 0, 255)\", 'message: Your h1 element should be blue.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Überschreibe Styles mit nachträglichen CSS", + "description": [ + "Unsere \"pink-text\" Klasse hat unsere CSS Angaben des body Elements überschrieben!", + "Wir haben gerade bewiesen, dass unsere Klassen das CSS des body Elements überschreiben. Die logische nächste Frage ist also was wir tun können um unsere pink-text Klasse zu überschreiben?", + "
", + "Erstelle eine weitere CSS Klasse namens blue-text, die deinem Element eine blaue Farbe gibt. Stelle sicher dass sie unter deiner pink-text Klassen-Deklaration steht.", + "Füge die blue-text Klasse deinem h1 Element zusätzlich zur pink-text Klasse hinzu und schau welche gewinnt.", + "Einem HTML Element mehrere Klassen Attribute zu geben funktioniert mit einem Leerzeichen dazwischen:", + "class=\"class1 class2\"", + "Notiz: Es ist egal in welcher Reihenfolge die Klassen in einem HTML Element angeordnet sind.", + "Allerdings ist die Reihenfolge der class Deklarationen im <style> Abschnitt durchaus wichtig. Die zweite Deklaration wird immer Vorzug gegenüber der Ersten erhalten. Weil .blue-text als zweites deklariert wird, überschreibt es die Attribute von .pink-text" + ] + }, + "es": { + "title": "Anula estilos con CSS posterior", + "description": [ + "¡Nuestra clase \"pink-text\" anuló la declaración CSS de nuestro elemento body!", + "Acabamos de demostrar que nuestras clases anularán el CSS del elemento body. Así que la siguiente pregunta lógica es: ¿qué podemos hacer para anular nuestra clase pink-text?", + "
", + "Crea una clase CSS adicional llamada texto-azul que le de a un elemento el color azul. Asegúrate de que está debajo de tu declaración de la clase pink-text. ", + "Aplica la clase blue-text a tu elemento h1 además de tu clase pink-text y veamos cuál gana.", + "La aplicación de múltiples atributos de clase a un elemento HTML se hace usando espacios entre ellos así:", + "class=\"clase1 clase2\"", + "Nota: No importa el orden en que las clases aparecen en el HTML.", + "Sin embargo, el orden de las declaraciones class en la sección <style> sí son importantes. La segunda declaración siempre precederá a la primera. Debido a que .blue-text es declarada después, esta anula los atributos de .pink-text" + ] + }, + "pt-br": { + "title": "Sobreponha Estilos com CSS Posterior", + "description": [ + "Nossa classe \"pink-text\" anulou a declaração CSS de nosso elemento body!", + "Acabamos de demonstrar que nossas classes irão sobrepor o CSS do elemento body. Sendo assim, nossa seguinte pergunta lógica é: O que podemos fazer para sobrepor a nossa classe pink-text?", + "
", + "Crie uma classe tradicional com CSS chamada texto-azul, que possa dar a um elemento a cor azul. Tenha a certeza de deixá-la abaixo de sua declaração da classe pink-text.", + "Aplique a classe blue-text ao seu elemento h1, além da classe pink-text, e vamos ver qual delas ganhará.", + "Lembre que a adição de vários atributos de classe a um elemento HTML se faz utilizando espaços entre ambos, assim:", + "class=\"class1 class2\"", + "Nota: A ordem em que as classes são listadas em HTML não tem importância.", + "Contudo, a ordem de declarações de classe no <style> é importante. A segunda declaração sempre terá precedência pela primeira. Já que .blue-text é declarado depois, ele irá sobrepor os atributos de .pink-text." + ] + }, + "ru": { + "title": "Преопределите стили последующим CSS", + "description": [ + "Наш класс \"pink-text\" переопределил объявленное CSS-свойство элемента body!", + "Мы только что доказали, что наши классы переопределяют CSS-свойства, обявленные в элементе body. Следующим вопросом по логике дожно быть: можем ли мы переопределить наш класс pink-text class?", + "
", + "Создайте дополнительный CSS-класс blue-text, который присваивает элементу синий цвет. Убедитесь, что он расположен ниже объявления вашего класса pink-text.", + "Примените класс blue-text к вашему элементу h1 в дополнение к вашему классу pink-text, и давайте посмотрим какой выиграет.", + "Применение множественных классов к атрибуту class HTML-элемента осуществляется через пробел:", + "class=\"class1 class2\"", + "Внимание: порядок, в котором указаны классы HTML-элемента неважен.", + "Однако, порядок, в котором классы указаны в элементе <style> важен. Последующее объявление будет всегда иметь приоритет над предшествующим. Поскольку .blue-text объявлен последним, он переопрпделяет значения заданные атрибутом .pink-text" + ] + } + } + }, + { + "id": "bad87fee1348bd8aedf06756", + "title": "Override Class Declarations by Styling ID Attributes", + "description": [ + "We just proved that browsers read CSS from top to bottom. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last.", + "But we're not done yet. There are other ways that you can override CSS. Do you remember id attributes?", + "Let's override your pink-text and blue-text classes, and make your h1 element orange, by giving the h1 element an id and then styling that id.", + "
", + "Give your h1 element the id attribute of orange-text. Remember, id styles look like this:", + "<h1 id=\"orange-text\">", + "Leave the blue-text and pink-text classes on your h1 element.", + "Create a CSS declaration for your orange-text id in your style element. Here's an example of what this looks like:", + "
#brown-text {
  color: brown;
}
", + "Note: It doesn't matter whether you declare this CSS above or below pink-text class, since id attribute will always take precedence." + ], + "challengeSeed": [ + "", + "

Hello World!

" + ], + "tests": [ + "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your h1 element should have the class pink-text.');", + "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your h1 element should have the class blue-text.');", + "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Give your h1 element the id of orange-text.');", + "assert(($(\"h1\").length === 1), 'message: There should be only one h1 element.');", + "assert(code.match(/#orange-text\\s*{/gi), 'message: Create a CSS declaration for your orange-text id');", + "assert(!code.match(//gi), 'message: Do not give your h1 any style attributes.');", + "assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'message: Your h1 element should be orange.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Überschreibe Klassen Deklarationen mit Styling von ID Attributen", + "description": [ + "Wir haben gerade bewiesen, dass der Browser CSS von oben nach unten liest. Das bedeuted, dass im Falle eines Konflikts der Browser immer die letzte CSS Deklaration verwenden wird.", + "Aber damit sind wir noch nicht fertig. Es gibt andere Wege um CSS zu überschreiben. Erinnerst du dich an Id Attribute?", + "Überschreiben wir jetzt unsere pink-text und blue-text Klasse und machen unser h1 Element orange, indem wir dem h1 Element eine Id geben und diese dann stylen.", + "
", + "Gib deinem h1 Element das id Attribute orange-text. Vergiss nicht, Id Styles sehen so aus:", + "<h1 id=\"orange-text\">", + "Erstelle eine CSS Deklaration für deine orange-text Id in deinem style Element. Hier siehst du ein Beispiel wie sowas aussieht:", + "
#brown-text {
  color: brown;
}
", + "Notiz: Es ist egal ob du dies vor oder nach deiner \"pink-text\" Klasse schreibst, da Id Attribute immer bevorzugt werden." + ] + }, + "es": { + "title": "Anula la declaración de clases dando estilo a los atributos ID", + "description": [ + "Acabamos de demostrar que los navegadores leen CSS de arriba hacia abajo. Eso significa que, en el caso de un conflicto, el navegador utilizará la última declaración CSS. ", + "Pero no hemos terminado todavía. Hay otras maneras con las que puedes anular CSS. ¿Te acuerdas de los atributos id?", + "Anulemos tus clases pink-text y blue-text, y pongamos anaranjado tu elemento h1, dándole una identificación al elemento h1 y poniéndole estilo a esa identificación (id).", + "
", + "Dale a tu elemento h1 el atributo id con valor orange-text. Recuerda, los atributos id se ven así: ", + "<h1 id=\"orange-text\">", + "Deja las clases blue-text y pink-text de tu elemento h1.", + "Crea una declaración CSS para tu identificación orange-text en tu elemento style. He aquí un ejemplo de como se ve esto: ", + "
#brown-text {
  color: brown;
}
", + "Nota: No importa si usted declara este CSS encima o debajo de la clase de texto de color rosa, ya atributo id siempre tendrá prioridad." + ] + }, + "pt-br": { + "title": "Sobreponha a Declaração de Classes Estilizando Atributos ID", + "description": [ + "Acabamos de demonstrar que os navegadores fazem a leitura do CSS de cima para baixo. Isso significa que, em caso de um conflito, o navegador utilizará a última declaração CSS.", + "Mas ainda não terminamos, pois existem outras formas para sobrepor CSS. Você se lembra dos atributos id?", + "Vamos sobrepor suas classes pink-text e blue-text, e fazer com que seu elemento h1 seja laranja. Faremos isso aplicando uma id para o elemento h1 e então estilizando essa id.", + "
", + "Dê ao seu elemento h1 o atributo id de nome orange-text. Relembre que os atributos id são assim:", + "#brown-text {", + "  color: brown;", + "}", + "Nota: Não importa se você declara este CSS acima ou abaixo da classe de texto cor de rosa, já que atributos id sempre terão prioridade." + ] + }, + "ru": { + "title": "Переопределите значения свойств классов стилизацией атрибутов id", + "description": [ + "Мы только что доказали, что браузеры читают CSS сверху-вниз. Это значит, что в случае конфликта значений будет установлено то, которое было объявлено в последнюю очередь.", + "Но мы ещё не закончилил. Есть и другие способы переопределения CSS. Помните атрибуты id?", + "Давайте переопределим ваши классы pink-text и blue-text, и сделаем ваш элемент h1 оранжевым, назначив элементу h1 зна��ение атрибута id и его последующей стилизацией.", + "
", + "Назначьте вашему элементу h1 значение атрибута id равное orange-text. Помните, что стилизация атрибута id выглядит так:", + "<h1 id=\"orange-text\">", + "Оставьте классы blue-text и pink-text присвоенными вашему элементу h1.", + "Объявите свойства вашего атрибута id с названием orange-text в вашем элементе style. Вот пример того, как это выглядит:", + "
#brown-text {
  color: brown;
}
", + "Внимание: Не имеет значения объявите ли вы стиль выше или ниже класса pink-text, так как атрибут id всегда имеет приоритет." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf06756", + "title": "Override Class Declarations with Inline Styles", + "description": [ + "So we've proven that id declarations override class declarations, regardless of where they are declared in your style element CSS.", + "There are other ways that you can override CSS. Do you remember inline styles?", + "
", + "Use an inline style to try to make our h1 element white. Remember, in line styles look like this:", + "<h1 style=\"color: green\">", + "Leave the blue-text and pink-text classes on your h1 element." + ], + "challengeSeed": [ + "", + "

Hello World!

" + ], + "tests": [ + "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your h1 element should have the class pink-text.');", + "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your h1 element should have the class blue-text.');", + "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Your h1 element should have the id of orange-text.');", + "assert(document.querySelector('h1[style]'), 'message: Give your h1 element an inline style.');", + "assert($(\"h1\").css(\"color\") === \"rgb(255, 255, 255)\", 'message: Your h1 element should be white.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Überschreibe deine Klassen Deklarationen mit Inline Styles", + "description": [ + "Wir haben also gesehen dass Id Deklarationen die von Klassen überschreiben, egal wo sie in deinem style Element CSS stehen.", + "Es gibt noch andere Wege CSS zu überschreiben. Erinnerst du dich an Inline Styles?", + "
", + "Benutze inline style um dein h1 Element weiß zu machen. Vergiss nicht, Inline Styles sehen so aus:", + "<h1 style=\"color: green\">", + "Lasse die blue-text und pink-text Klassen auf deinem h1 Element." + ] + }, + "es": { + "title": "Anula declaraciones de clase con estilos en línea", + "description": [ + "Así que hemos demostrado que las declaraciones de identificadores anulan las declaraciones de clase, independientemente del lugar donde se declaran en tu elemento de estilo CSS style.", + "Hay otras maneras en las que puedes anular CSS. ¿Te acuerdas de los estilos en línea?", + "
", + "Utiliza un estilo en línea para tratar de hacer blanco nuestro elemento h1. Recuerda, los estilos en línea se ven así: ", + "<h1 style=\"color: green\">", + "Deja las clases blue-text y pink-text en tu elemento h1." + ] + }, + "pt-br": { + "title": "Sobreponha a Declaração de Classes com Estilos Inline", + "description": [ + "Certo, nós demonstramos que declarações de id sobrepoem as declarações de classe, independente do lugar onde são declarados em seu elemento style no CSS.", + "Existem outras formas em que você pode sobrepor CSS. Você se lembra de estilos inline?", + "
", + "Use um estilo inline para tentar fazer com que nosso elemento h1 tenha a cor branca. Relembre que estilos inline são assim:", + "<h1 style=\"color: green\">", + "Deixe as classes blue-text e pink-text em seu elemento h1." + ] + }, + "ru": { + "title": "Переопределите значения свойств классов встроенными стилями", + "description": [ + "Итак, мы доказали, что объявление атрибута id переопределяет значения свойств, определённые в значениях атрибута class, независимо от того, были ли они объявлены в вашем элементе style.", + "Есть и другие способы переопределения CSS. Помните встроенные стили?", + "
", + "Используйте встроенный стиль, чтобы попробовать сделать наш элемент h1 белым. Помните, что встроенные стили выглядят следующим образом:", + "<h1 style=\"color: green\">", + "Оставьте классы blue-text и pink-text назначенными вашему элементу h1." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf07756", + "title": "Override All Other Styles by using Important", + "description": [ + "Yay! We just proved that inline styles will override all the CSS declarations in your style element.", + "But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.", + "In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use !important", + "Let's go all the way back to our pink-text class declaration. Remember that our pink-text class was overridden by subsequent class declarations, id declarations, and inline styles.", + "
", + "Let's add the keyword !important to your pink-text element's color declaration to make 100% sure that your h1 element will be pink.", + "An example of how to do this is:", + "color: red !important;" + ], + "challengeSeed": [ + "", + "

Hello World!

" + ], + "tests": [ + "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your h1 element should have the class pink-text.');", + "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your h1 element should have the class blue-text.');", + "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Your h1 element should have the id of orange-text.');", + "assert(code.match(/h1
element should have the inline style of color: white.');", + "assert(code.match(/\\.pink-text\\s*?\\{[\\s\\S]*?color:.*pink.*!important\\s*;?[^\\.]*\\}/g), 'message: Your pink-text class declaration should have the !important keyword to override all other declarations.');", + "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'message: Your h1 element should be pink.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Überschreibe alle anderen Styles mit Important", + "description": [ + "Juhu! Wir haben bewiesen dass Inline Styles alle CSS Deklarationen aus deinem style Element überschreiben.", + "Aber warte. Es gibt eine letzte Art CSS zu überschreiben. Dabei handelt es sich um die mächtigste Methode von allen. Aber bevor wir dazu kommen, sehen wir uns an warum du überhaupt CSS überschreiben wollen würdest.", + "In vielen Situationen wirst du sogenannte \"CSS libraries\" (CSS Bibliotheken) verwenden. Diese könnten versehentlich dein eigenes CSS überschreiben. Wenn du also absolut sicher sein musst dass ein Element einen bestimmten Style hat, kannst du !important verwenden.", + "Gehen wir zurück zu unserer pink-text Klassendeklaration. Wie du dich vielleicht erinnerst wurde unsere pink-text Klasse von darauffolgenden Klassen, Ids und Inline Styles überschrieben.", + "
", + "Füge das Schlüsselwort !important zu der Farbe deines \"pink-text\" Elements hinzu um 100% sicher zu gehen dass das h1 Element pink ist.", + "Hier ist ein Beispiel wie man das macht:", + "color: red !important;" + ] + }, + "es": { + "title": "Anula todos los demás estilos utilizando Important", + "description": [ + "¡Hurra! Demostramos que los estilos en línea anularán todas las declaraciones CSS de tu elemento style. ", + "¡Pero espera! Hay una última forma de anular CSS. Este es el método más poderoso de todos. Pero antes de hacerlo, vamos a hablar de por qué puedes querer anular CSS. ", + "En muchas situaciones, usarás bibliotecas CSS. Estas pueden anular accidentalmente tu propio CSS. Por eso, cuando necesitas estar seguro de que un elemento tiene un CSS específico puedes usar !important", + "Regresemos a nuestra declaración de clase pink-text. Recuerda que nuestra clase pink-text fue anulada por declaraciones de clases posteriores, declaraciones id, y estilos en línea. ", + "
", + "Vamos a añadir la palabra clave !important a tu declaración del color de pink-text para estar 100% seguros que tu elemento h1 será rosado.", + "Un ejemplo de cómo hacer esto es:", + "color: red !important;" + ] + }, + "pt-br": { + "title": "Sobreponha Todos os Outros Elementos Utilizando Important", + "description": [ + "Isso! Demonstramos que os estilos inline irão sobrepor todas as declarações CSS de seu elemento style.", + "Mas, espere! Há uma última forma de sobrepor com CSS. Este é o método mais poderoso de todos. Contudo, antes de colocá-lo em prática, vamos falar sobre os motivos que podem fazer você querer sobrepor CSS.", + "Em diversas situações, você usará bibliotecas CSS. Pode ser que essas bibliotecas sobreponham acidentalmente o seu próprio CSS. Por isso, quando você precisar estar seguro de que um elemento possui um CSS específico, você poderá utilizar !important.", + "Certo, vamos voltar para a nossa declaração de classe pink-text. Relembre que nossa classe pink-text foi sobreposta pelas declarações de classe posteriores, por declarações id e por estilos inline.", + "
", + "Vamos adicionar nossa palavra-clave !important para sua declaração de cor de pink-text para que possamos estar 100% seguros que seu elemento h1 será sempre cor de rosa.", + "Um exemplo para fazer isso é:", + "color: red !important;" + ] + }, + "ru": { + "title": "Переопределите все другие стили применив important", + "description": [ + "Ура! Мы только что доказали, что встроенные стили переопределяют все другие объявления CSS-свойств в вашем элементе style.", + "Но подождите. Есть ещё один последний способ переопределения CSS. Это наиболее существенный способ из всех. Но перед тем, как мы его попробует, давайте поговорим о том, зачем вам может понадобиться переопрелить CSS.", + "Во множестве ситуаций вы будете использовать CSS-библиотеки. Это может переопределить ваш собственный CSS. Таким образом, когда вам требуется быть абсолютно уверенными в том, что элемент будет обладать определёнными CSS-свойствами, вы можете использовать !important", + "Давайте вернёмся к объявлению нашего класса pink-text. Помните, что наш класс pink-text был переопределён последующим классом, стилизацией атрибута id, встроенным стилем.", + "
", + "Давайте добавим ключевое слово !important к вашему объявлению текста розовым, чтобы убедиться на 100%, что ваш элемент h1 будет розовый.", + "Пример того, как это можено сделать:", + "color: red !important;" + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08726", + "title": "Use Hex Code for Specific Colors", + "description": [ + "Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or hex code for short.", + "We usually use decimals, or base 10 numbers, which use the symbols 0 to 9 for each digit. Hexadecimals (or hex) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in hexadecimal, giving us 16 total possible values. You can find more information about hexadecimal numbers here.", + "In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red (R), green (G), and blue (B) components. For example, #000000 is black and is also the lowest possible value. You can find more information about the RGB color system here.", + "
body {
color: #000000;
}
", + "
", + "Replace the word black in our body element's background-color with its hex code representation, #000000." + ], + "challengeSeed": [ + "" + ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Give your body element the background-color of black.');", + "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#000(000)?((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code for the color black instead of the word black.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Verwende hexadezimal Code für spezifische Farben", + "description": [ + "Wusstest du dass es andere Möglichkeiten gibt Farben in CSS darzustellen? Eine dieser Möglichkeiten ist \"Hexadezimal Code\" genannt, oder kurz hex code.", + "Wir verwenden üblicherweise decimals (Dezimalen), oder Zehnersystem, das für jede Ziffer eine Symbol von 0 bis 9 verwendet. Hexadecimals (Hexadezimalzahlen oder hex) beruhen auf einer 16er Basis. Das bedeuted dass sie 16 verschiedene Symbole verwenden. Wie auch Dezimalzahlen, repräsentiern die Symbole \"0\"-\"9\" Null bis Neun. Dann allerdings geht es weiter mit A,B,C,D,E,F für die Zahlen 10-15. Alles in Allem kann eine einzige Ziffer, mit 0 bis F, in hexadecimal 16 mögliche Werte ausdrücken. Mehr Informationen über das Hexadezimalsystem kannst du hier finden.", + "In CSS können wir 6 Hexadezimalziffern verwenden um eine Farbe auszudrücken, je zwei für den Rot- (R), Grün (G)- und Blauanteil (B). #000000 ist zum Beispiel schwarz und der niedrigst mögliche Wert. Mehr Information über den RGB Farbraum findest du hier.", + "
", + "Ersetzte das Wort black in der Hintergrundfarbe deines body Elements mit dem hex code #000000." + ] + }, + "es": { + "title": "Usa el código hexadecimal para especificar colores", + "description": [ + "¿Sabías que hay otras maneras de representar los colores en CSS? Una de estas formas es llamada código hexadecimal o código hex para abreviar. ", + "El sistema Decimal se refiere al que nos permite representar cantidades empleando los dígitos del cero al nueve - los números que la gente usa en la vida cotidiana. El sistema Hexadecimal incluye estos 10 dígitos más las letras A, B, C, D, E y F. Esto significa que Hexadecimal tiene un total de 16 dígitos posibles, en lugar de las 10 posibles que nos da nuestro sistema numérico normal en base 10. ", + "Con CSS, utilizamos 6 dígitos hexadecimales para representar los colores. Por ejemplo, #000000 es el valor más bajo posible, y representa el color negro. ", + "
", + "Reemplaza la palabra black en el color de fondo (background-color) de nuestro elemento body por su representación hexadecimal #000000" + ] + }, + "pt-br": { + "title": "Use Código Hexadecimal para Especificar Cores", + "description": [ + "Você sabia que existem outras formas para representar as cores em CSS? Uma dessas formas é com o que chamamos de código hexadecimal, ou código hex para abreviar.", + "O sistema Decimal nos permite representar quantidades numéricas com os dígitos de zero a nove - assim como nós os utilizamos durante o nosso dia a dia. Já o sistema Hexadecimal inclui estes 10 dígitos e também as letras A, B, C, D, E e F. Isso significa que o Hexadecimal possui um total de 16 dígitos possíveis, ao invés dos 10 possíveis que podemos usar com nosso sistema numérico normal de base 10.", + "No CSS, utilizamos 6 dígitos hexadecimais para representar as cores. Por exemplo, #000000 é o valor mais baixo possível, e representa a cor preta.", + "
", + "Substitua a palavra black na cor de fundo (background-color) de nosso elemento body pela sua representação hexadecimal #000000." + ] + }, + "ru": { + "title": "Используйте hex-цвета для выбора определённых цветов", + "description": [ + "Знали ли вы, что существуют другие способы представления цветов в CSS? Одним из этих способов является шестнадцатиричный код, hex-код, если короче.", + "Обычно мы используем десятки, или десятичную систему счисления, в основе которой лежит число 10, которая использует символы от 0 до 9 для каждого числа. В основе Шестнадцатиричной системы лежит число 16. Это значит, что она использует шестнадцать различных символов. Как в десятичной, символы 0-9 соответствуют значениям от нуля до девяти. Далее A,B,C,D,E,F соответствуют значениям от десяти до пятнадцати. Вместе, от 0 до F, с их помощью можно представить число в шестнадцатиричной системе счисления, что даёт нам в целом 16 возможных значений. Вы можете найти больше информации о шестнадцатиричной системе счисления тут.", + "В CSS, мы можем использовать 6 шестнадцатиричных чисел для представления цвета, по два на каждый компонент: красный (R), зелёный (G), синий (B). Например, #000000 - черный цвет и минимальное значение. Вы можете найти больше информации о цветовой модели RGB.", + "
", + "Замените слово black в свойстве background-color нашего элемента body на представление в виде hex-кода, #000000." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08721", + "title": "Use Hex Code to Mix Colors", + "description": [ + "To review, hex codes use 6 hexadecimal digits to represent colors, two each for red (R), green (G), and blue (B) components.", + "From these three pure colors (red, green, and blue), we can vary the amounts of each to create over 16 million other colors!", + "For example, orange is pure red, mixed with some green, and no blue. In hex code, this translates to being #FFA500.", + "The digit 0 is the lowest number in hex code, and represents a complete absence of color.", + "The digit F is the highest number in hex code, and represents the maximum possible brightness.", + "
", + "Replace the color words in our style element with their correct hex codes.", + "
ColorHex Code
Dodger Blue#1E90FF
Green#00FF00
Orange#FFA500
Red#FF0000
" + ], + "challengeSeed": [ + "", + "", + "

I am red!

", + "", + "

I am green!

", + "", + "

I am dodger blue!

", + "", + "

I am orange!

" + ], + "tests": [ + "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'message: Give your h1 element with the text I am red! the color red.');", + "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?#FF0000\\s*?;\\s*?}/gi), 'message: Use the hex code for the color red instead of the word red.');", + "assert($('.green-text').css('color') === 'rgb(0, 255, 0)', 'message: Give your h1 element with the text I am green! the color green.');", + "assert(code.match(/\\.green-text\\s*?{\\s*?color:\\s*?#00FF00\\s*?;\\s*?}/gi), 'message: Use the hex code for the color green instead of the word green.');", + "assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)', 'message: Give your h1 element with the text I am dodger blue! the color dodger blue.');", + "assert(code.match(/\\.dodger-blue-text\\s*?{\\s*?color:\\s*?#1E90FF\\s*?;\\s*?}/gi), 'message: Use the hex code for the color dodger blue instead of the word dodgerblue.');", + "assert($('.orange-text').css('color') === 'rgb(255, 165, 0)', 'message: Give your h1 element with the text I am orange! the color orange.');", + "assert(code.match(/\\.orange-text\\s*?{\\s*?color:\\s*?#FFA500\\s*?;\\s*?}/gi), 'message: Use the hex code for the color orange instead of the word orange.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Verwende Hexadezimal Code um Farben zu mischen", + "description": [ + "Mit diesen drei puren Farben (Rot, Grün und Blau) können wir 16 Millionen andere Farben erzeugen.", + "Orange, zum Beispiel, ist pures Rot, gemischt mit ein bisschen Grün und keinem Blau", + "
", + "Gib dem body Element eine orange Hintergrundfarbe indem du den Hexadezimal Code #FFA500 verwendest." + ] + }, + "es": { + "title": "Usa código hex para mezclar colores", + "description": [ + "A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.", + "Por ejemplo, el naranja es rojo puro, mezclado con un poco de verde, y sin azul.", + "
", + "Haz que el color de fondo del elemento body sea anaranjado, dándole el código hexadecimal #FFA500" + ] + }, + "pt-br": { + "title": "Use Código Hexadecimal para Misturar Cores", + "description": [ + "A partir dessas três cores puras (vermelho, verde e azul), podemos criar 16 milhões de cores.", + "Por exemplo, o laranja é vermelho puro misturado com um pouco de verde, e sem nada de azul.", + "
", + "Faça com que a cor de fundo do elemento body seja alaranjada, usando o código hexadecimal #FFA500." + ] + }, + "ru": { + "title": "Используйте hex-код, чтобы смешивать цвета", + "description": [ + "Из этих трёх чистых цветов (красного, зелёного и синего), мы можем создать 16 миллионов других цветов.", + "Например, оранжевый - смесь чистого красного с примесью зелёного, но без синего.", + "
", + "Сделайте цвет фона элемента body оранжевым, присвоив его соответствующему свойству значение hex-кода равное #FFA500" + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08719", + "title": "Use Abbreviated Hex Code", + "description": [ + "Many people feel overwhelmed by the possibilities of more than 16 million colors. And it's difficult to remember hex code. Fortunately, you can shorten it.", + "For example, red's hex code #FF0000 can be shortened to #F00. This shortened form gives one digit for red, one digit for green, and one digit for blue.", + "This reduces the total number of possible colors to around 4,000. But browsers will interpret #FF0000 and #F00 as exactly the same color.", + "
", + "Go ahead, try using the abbreviated hex codes to color the correct elements.", + "
ColorShort Hex Code
Cyan#0FF
Green#0F0
Red#F00
Fuchsia#F0F
" + ], + "challengeSeed": [ + "", + "", + "

I am red!

", + "", + "

I am fuchsia!

", + "", + "

I am cyan!

", + "", + "

I am green!

" + ], + "tests": [ + "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'message: Give your h1 element with the text I am red! the color red.');", + "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?#F00\\s*?;\\s*?}/gi), 'message: Use the abbreviate hex code for the color red instead of the hex code #FF0000.');", + "assert($('.green-text').css('color') === 'rgb(0, 255, 0)', 'message: Give your h1 element with the text I am green! the color green.');", + "assert(code.match(/\\.green-text\\s*?{\\s*?color:\\s*?#0F0\\s*?;\\s*?}/gi), 'message: Use the abbreviated hex code for the color green instead of the hex code #00FF00.');", + "assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)', 'message: Give your h1 element with the text I am cyan! the color cyan.');", + "assert(code.match(/\\.cyan-text\\s*?{\\s*?color:\\s*?#0FF\\s*?;\\s*?}/gi), 'message: Use the abbreviated hex code for the color cyan instead of the hex code #00FFFF.');", + "assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)', 'message: Give your h1 element with the text I am fuchsia! the color fuchsia.');", + "assert(code.match(/\\.fuchsia-text\\s*?{\\s*?color:\\s*?#F0F\\s*?;\\s*?}/gi), 'message: Use the abbreviated hex code for the color fuchsia instead of the hex code #FF00FF.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Verwende abgekürzten Hexadezimal Code", + "description": [ + "Viele Leute fühlen sich mit der Auswahl aus über 16 Millionen Farben überfordert. Außerdem ist es schwierig sich Hexadezimal Codes zu merken. Zum Glück kannst du sie abkürzen.", + "Rot, zum Beispiel, mit dem Hexadezimal Code von #FF0000 kannst du mit #F00 abkürzen. Das bedeuted eine Ziffer für Rot, eine für Grün und eine für Blau", + "Das reduziert die Gesamtsumme an möglichen Farben auf ungefähr 4.000. Aber Browser interpretieren #FF0000 und #F00 als exakt die gleiche Farbe.", + "
", + "Probiere #F00 aus um die Hintergrundfarbe des body Elements rot zu färben." + ] + }, + "es": { + "title": "Uso código hex abreviado", + "description": [ + "Mucha gente se siente abrumada por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente puedes acortarlo. ", + "Por ejemplo, el rojo, que es #FF0000 en código hexadecimal, se puede abreviar a #F00. Es decir, un dígito para el rojo, un dígito para el verde, un dígito para el azul. ", + "Esto reduce el número total de posibles colores a alrededor de 4.000. Pero los navegadores interpretarán #FF0000 y #F00 como exactamente el mismo color. ", + "
", + "Adelante, intenta usar #F00 para volver rojo el color de fondo del elemento body." + ] + }, + "pt-br": { + "title": "Use Código Hexadecimal Abreviado", + "description": [ + "Muitas pessoas se sentem confusas com as possibilidades de mais de 16 milhões de cores. Além disso, é difícil lembrar de códigos hexadecimais. Por sorte, podemos abreviá-lo.", + "Por exemplo, o vermelho que é #FF0000 em código hexadecimal pode ser abreviado a #F00. Isso quer dizer que podemos usar um dígito para vermelho, um dígito para verde e um dígito para azul.", + "Fazer isso reduz o número total de possíveis cores para ao redor de 4.000. Apesar disso, os navegadores interpretarão #FF0000 e #F00 exatamente como a mesma cor.", + "
", + "Continue, tente usar #F00 para fazer com que a cor de fundo do elemento body seja vermelha." + ] + }, + "ru": { + "title": "Используйте аббревиатуры hex-кода", + "description": [ + "Множество людей обременяет возможность применения более 16-ти миллионов цветов. И hex-коды достаточно сложно запоминать. К счастью, вы можете использовать укороченные выражения.", + "Например, красный, который имеет значение #FF0000 в виде hex-кода, может быть укорочен до #F00. В укороченном виде: одна цифра представляет красный, одна - зелёный, одна - синий.", + "Это уменьшает общее количество возможных цветов до порядка 4,000. Но браузеры будут интерпретировать #FF0000 и #F00 как один и тот же цвет.", + "
", + "Вперёд, попробуйте применить значение #F00, чтобы сделать цвет фона элемента body красным." + ] + } + } + }, + { + "id": "bad87fee1348bd9aede08718", + "title": "Use RGB values to Color Elements", + "description": [ + "Another way you can represent colors in CSS is by using RGB values.", + "The RGB value for black looks like this:", + "rgb(0, 0, 0)", + "The RGB value for white looks like this:", + "rgb(255, 255, 255)", + "Instead of using six hexadecimal digits like you do with hex code, with RGB you specify the brightness of each color with a number between 0 and 255.", + "If you do the math, the two digits for one color equal 16 times 16, which gives us 256 total values. So RGB, which starts counting from zero, has the exact same number of possible values as hex code.", + "Here's an example of how you'd change the body background to orange using its RGB code.", + "
body {
background-color: rgb(255, 165, 0);
}
", + "
", + "Let's replace the hex code in our body element's background color with the RGB value for black: rgb(0, 0, 0)" + ], + "challengeSeed": [ + "" + ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Your body element should have a black background.');", + "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'message: Use rgb to give your body element a color of black.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Verwende RGB Werte um Elemente zu färben", + "description": [ + "Ein anderer Weg um Farben in CSS darzustellen ist rgb Werte zu verwenden.", + "Der RGB Wert für Schwarz sieht so aus:", + "rgb(0, 0, 0)", + "Der RGB Wert für Weiß sieht so aus:", + "rgb(255, 255, 255)", + "Anstatt sechs Hexadezimalziffern zu verwenden, legst du mit rgb die Helligkeit jeder einzelner Farbe mit einer Zahl zwischen 0 und 255 fest.", + "Wenn du nachrechnest, 16 mal 16 ist 256 Werte. Also hat rgb, das mit Null hochzuzählen beginnt, die gleiche Anzahl an möglichen Farben wie Hexadezimal Code.", + "
", + "Ersetzte jetzt den Hexadezimal Code der Hintergrundfarbe deines body Elements mit dem RGB Wert für Schwarz: rgb(0, 0, 0)" + ] + }, + "es": { + "title": "Usa RGB para colorear elementos", + "description": [ + "Otra forma en la que puedes representar colores en CSS es usando valores rgb.", + "El valor RGB para el negro, luce así:", + "rgb(0, 0, 0)", + "El valor RGB para el blanco, se ve así:", + "rgb(255, 255, 255)", + "En lugar de utilizar seis dígitos hexadecimales, con rgb especificas el brillo de cada color con un número entre 0 y 255.", + "Si haces la matemática, 16 veces 16 es 256 valores totales. Así que rgb, que comienza a contar desde cero, tiene exactamente el mismo número de valores posibles que el código hexadecimal.", + "
", + "Remplacemos el código hexadecimal del color de fondo de nuestro elemento body por el valor RGB para el negro: rgb(0, 0, 0)" + ] + }, + "pt-br": { + "title": "Use Valores RBG para Colorir Elementos", + "description": [ + "Outra forma em que você pode representar cores em CSS é utilizando valores rgb.", + "O valor RGB para preto é assim:", + "rgb(0, 0, 0)", + "O valor RGB para branco é assim:", + "rgb(255, 255, 255)", + "Ao invés de utilizar 6 dígitos hexadecimais, com rgb você especifica o brilho de cada cor com um número entre 0 e 255.", + "Se você fizer a matemática, 16 vezes 16 é igual a 256 valores totais. Sendo assim, o rgb, que começa a contar desde zero, tem exatamente o mesmo número de valores possíveis que o código hexadecimal.", + "
", + "Vamos substituir o código hexadecimal da cor de fundo do nosso elemento body pelo valor RGB para preto: rgb(0, 0, 0)." + ] + }, + "ru": { + "title": "Используйте формат RGB для придания цвета элементам", + "description": [ + "Другим способом представления цветов в CSS является применение значений rgb.", + "Значение RGB для чёрного цвета выглядит следующим образом:", + "rgb(0, 0, 0)", + "Значение RGB для белого выглядит так:", + "rgb(255, 255, 255)", + "Вместо использования шести шестнадцатиразрядных цифр, как вы делаете, когда применяете hex-код, применяя rgb вы указываете значение яркости каждого цвета в диапазоне от 0 до 255.", + "Если вы посчитаете, 16 раз по 16 - это 256 различных значений. Таким образом rgb, где счёт начинается с нуля, имеет ровно то же число возможных значений, что и hex-код.", + "
", + "Давайте заменим hex-код в цвете фона нашего элемента body на значение в формате RGB для получения чёрного: rgb(0, 0, 0)" + ] + } + } + }, + { + "id": "bad82fee1348bd9aedf08721", + "title": "Use RGB to Mix Colors", + "description": [ + "Just like with hex code, you can mix colors in RGB by using combinations of different values.", + "
", + "Replace the hex codes in our style element with their correct RGB values.", + "
ColorRGB
Bluergb(0, 0, 255)
Redrgb(255, 0, 0)
Orchidrgb(218, 112, 214)
Siennargb(160, 82, 45)
" + ], + "challengeSeed": [ + "", + "", + "

I am red!

", + "", + "

I am orchid!

", + "", + "

I am sienna!

", + "", + "

I am blue!

" + ], + "tests": [ + "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'message: Give your h1 element with the text I am red! the color red.');", + "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?255\\s*?,\\s*?0\\s*?,\\s*?0\\s*?\\)\\s*?;\\s*?}/gi), 'message: Use rgb for the color red.');", + "assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)', 'message: Give your h1 element with the text I am orchid! the color orchid.');", + "assert(code.match(/\\.orchid-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?218\\s*?,\\s*?112\\s*?,\\s*?214\\s*?\\)\\s*?;\\s*?}/gi), 'message: Use rgb for the color orchid.');", + "assert($('.blue-text').css('color') === 'rgb(0, 0, 255)', 'message: Give your h1 element with the text I am blue! the color blue.');", + "assert(code.match(/\\.blue-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?255\\s*?\\)\\s*?;\\s*?}/gi), 'message: Use rgb for the color blue.');", + "assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)', 'message: Give your h1 element with the text I am sienna! the color sienna.');", + "assert(code.match(/\\.sienna-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?160\\s*?,\\s*?82\\s*?,\\s*?45\\s*?\\)\\s*?;\\s*?}/gi), 'message: Use rgb for the color sienna.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Verwende RGB um Farben zu mischen", + "description": [ + "Wie auch mit Hexadezimal Code, kannst du Farben in RGB mischen indem du Kombination von verschiedenen Werten nimmst.", + "
", + "Ändere die Hintergrundfarbe des body Elements zum RGB Wert von Orange: rgb(255, 165, 0)" + ] + }, + "es": { + "title": "Usa RGB para mezclar colores", + "description": [ + "Al igual que con el código hexadecimal, puedes mezclar los colores en RGB mediante el uso de combinaciones de diferentes valores.", + "
", + "Cambia el color de fondo del elemento body a anaranjado usando su valor RGB: rgb(255, 165, 0)" + ] + }, + "pt-br": { + "title": "Use Valores RBG para Misturar Cores", + "description": [ + "Assim como com código hexadecimal, você pode misturar as cores com RGB através do uso de combinações de valores diferentes.", + "
", + "Mude a cor de fundo do elemento body para alaranjado usando seu valor RGB: rgb(255, 165, 0)." + ] + }, + "ru": { + "title": "Используйте формат RGB, чтобы смешивать цвета", + "description": [ + "Так же как и с hex-кодом, вы можете смешивать цвета в формате RGB, используя комбинации различных значений.", + "
", + "Измените цвет фона элемента body на значение в формате RGB соответствующее оранжевому: rgb(255, 165, 0)" + ] + } + } + } + ] +} diff --git a/seed/math-challenges/01-responsive-web-design/basic-html-and-html5.json b/seed/math-challenges/01-responsive-web-design/basic-html-and-html5.json new file mode 100644 index 0000000000..65811ad429 --- /dev/null +++ b/seed/math-challenges/01-responsive-web-design/basic-html-and-html5.json @@ -0,0 +1,2134 @@ +{ + "name": "Basic HTML and HTML5", + "order": 0, + "time": "5 hours", + "helpRoom": "Help", + "challenges": [ + { + "id": "587d774b367417c4c2512a9b", + "title": "Introduction to the Basic HTML and HTML5 Challenges", + "description": [ + [ + "", + "", + "HTML, or HyperText Markup Language, is a markup language to describe the structure of a web page. It uses a special syntax of elements to organize and give information about your content to the browser. Elements usually have opening and closing tags that surround and give meaning to content. For example, there are different tag options to place around text to show whether it's a heading, a paragraph, or a list.", + "" + ], + [ + "", + "", + "The HyperText part of HTML comes from the early days of the web. Pages usually contained static documents that connected to other documents with hypertext links. As web pages and web applications grow more complex, the W3 Consortium updates HTML. The latest version, or specification, is HTML5.

This section introduces how to use HTML elements to give structure and meaning to your web content.", + "" + ] + ], + "releasedOn": "", + "challengeSeed": [], + "tests": [], + "type": "Waypoint", + "challengeType": 7, + "isRequired": false, + "translations": { + "pt-br": { + "title": "Introdução aos desafios básicos de HTML e HTML5", + "description": [ + [ + "", + "", + "HTML, do inglês HyperText Markup Language (Linguagem de Marcação de Hipertexto), é uma linguagem de marcação usada para descrever a estrutura de uma página da web. Ela usa uma sintaxe especial de elementos para organizar seu conteúdo e dar ao seu navegador informações sobre ele. Esses elementos geralmente possuem tags (marcadores) de abertura e fechamento que delimitam uma parte do conteúdo e dão significado a ela. Por exemplo, para delimitar texto, existem diferentes opções de tags que mostram se esse texto é um título, um parágrafo ou uma lista.", + "" + ], + [ + "", + "", + "A parte de \"hipertexto\" do HTML vem dos primórdios da web. As páginas geralmente eram documentos estáticos que se conectavam a outros documentos por meio de links de hipertexto. Conforme as páginas e aplicações web ficam mais complexas, o consórcio W3 atualiza o HTML. A última versão, ou especificação, é o HTML5.

Essa seção apresenta como usar os elementos do HTML para dar estrutura e significado ao seu conteúdo na web.", + "" + ] + ] + } + } + }, + { + "id": "bd7123c8c441eddfaeb5bdef", + "title": "Say Hello to HTML Elements", + "description": [ + "Welcome to freeCodeCamp's coding challenges. These will walk you through web development step-by-step.", + "We recommend you do these in order, but feel free to skip around by clicking the map in the menu above.", + "Also, if you want to save your progress, you should join our community by creating an account. In just a few minutes, you can join our chat room, forum, and even a local study group in your city.", + "First, you'll start by building a simple web page using HTML. You can edit code in your text editor, which is embedded into this web page.", + "Do you see the code in your text editor that says <h1>Hello</h1>? That's an HTML element.", + "Most HTML elements have an opening tag and a closing tag.", + "Opening tags look like this:", + "<h1>", + "Closing tags look like this:", + "</h1>", + "The only difference between opening and closing tags is the forward slash after the opening bracket of a closing tag.", + "Each challenge has tests you can run at any time by clicking the \"Run tests\" button. When you pass all tests, you'll be prompted to submit your solution and go to the next coding challenge.", + "
", + "To pass the test on this challenge, change your h1 element's text to say \"Hello World\"." + ], + "challengeSeed": [ + "

Hello

" + ], + "tests": [ + { + "text": "Your h1 element should have the text \"Hello World\".", + "testString": "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your h1 element should have the text \"Hello World\".');" + } + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "description": [ + "Willkommen bei der ersten Programmier-Challenge von freeCodeCamp!", + "Mithilfe des eingebauten text editor kannst du den code bearbeiten.", + "Siehst du den Code <h1>Hallo</h1> im Editor? Das ist ein HTML element", + "Die meisten HTML Elemente haben einen opening tag und einen closing tag.", + "Öffnende Tags sehen so aus:", + "<h1>", + "Schließende Tags so:", + "</h1>", + "Beachte, dass der einzige Unterschied zwischen öffnenden und schließenden Tags ist, das schließende Tags ein Slash nach der sich öffnenden spitzen Klammer folgt.", + "Jede Challenge hat Tests die du jederzeit starten kannst indem du den \"Run tests\" Button drückst. Wenn alle Tests bestehen kannst du mit der nächsten Challenge fortfahren.", + "
", + "Um den Test dieser Challenge zu bestehen, ändere den Text deines h1 Elements von \"Hello\" zu \"Hello World\". Klicke dann den \"Run tests\" Button." + ] + }, + "fr": { + "title": "Dites bonjour aux éléments HTML", + "description": [ + "Bienvenue au premier défi de code de freeCodeCamp.", + "Vous pouvez modifier le code dans votre éditeur texte, lequel est disponible dans cette page.", + "Voyez-vous le code dans l'éditeur texte qui dit <h1>Hello</h1>? C'est un élément HTML.", + "La plupart des éléments HTML ont une balise ouvrante et une balise fermante", + "Les balises ouvrantes ont cette apparence :", + "<h1>", + "Les balises fermantes ont cette apparence :", + "</h1>", + "Notez que la seule différence entre une balise ouvrante et fermante est que la balise fermante a une barre oblique après son chevron ouvrant.", + "Chaque défi contient des tests que vous pouvez éxécuter en cliquant sur le bouton \"Run tests\". Lorsque tous les tests sont réussis, vous pouvez poursuivre avec le défi suivant.", + "
", + "Pour réussir le test de ce défi, changez le texte de l'élément h1 pour \"Hello World\" plutôt que \"Hello\". Cliquez ensuite sur le bouton \"Run tests\"." + ] + }, + "pt-br": { + "title": "Diga oi para os elementos HTML", + "description": [ + "Bem-vindo(a) aos desafios de programação do freeCodeCamp. Eles vão te guiar pelo desenvolvimento web passo a passo.", + "Nós recomendamos que você os resolva em ordem, mas fique à vontade para navegar pelos desafios clicando em \"map\" no menu acima.", + "Além disso, se você quiser salvar seu progresso, você deve entrar para nossa comunidade criando uma conta. Em apenas alguns minutos, você pode entrar na nossa sala de chat, fórum e até mesmo em um grupo de estudos da sua cidade.", + "Primeiramente, você vai começar construindo uma página da web simples com HTML. Você pode editar o código no seu editor de texto, que está embutido nessa página.", + "Você está vendo o código no seu editor de texto que contém <h1>Hello</h1>? Esse é um elemento HTML.", + "A maioria dos elementos HTML têm uma tag de abertura e uma tag de fechamento.", + "As tags de abertura são assim:", + "<h1>", + "As tags de fechamento são assim:", + "</h1>", + "A única diferença entre tags de abertura e fechamento é que as tags de fechamento possuem uma barra (/) depois do sinal de menor (<).", + "Cada desafio possui testes que você pode rodar a qualquer momento clicando no botão \"Run tests\". Quando seu código passar em todos os testes, você poderá enviar sua solução e avançar para o próximo desafio.", + "
", + "Para passar no teste desse desafio, mude o texto do seu elemento h1 para \"Hello World\"." + ] + }, + "ru": { + "title": "Скажи привет HTML-элементам", + "description": [ + "Добро пожаловать на первое программное испытание freeCodeCamp.", + "Вы можете редактировать код в вашем текстовом редакторе, который мы встроили в эту web-страницу.", + "Видите этот код в вашем текстовом редакторе: <h1>Hello</h1>? Это HTML элемент.", + "Большинство HTML-элементов имеют открывающую метку закрывающую метку.", + "Открывающие метки выглядят так:", + "<h1>", + "Закрывающие метки выглядят следующим образом:", + "</h1>", + "Обратите внимание, что единственная разница между открывающими и закрывающими метками заключается в наличии косой черты после открывающей треугольной скобки.", + "Каждое испытание имеет функцию проверки решения, которую вы можете запустить в любой момент нажатием на кнопку \"Run tests\". Как только ваше решение будет удовлетворять всем требованиям, вы сможете перейти к следующему испытанию.", + "
", + "Для прохождения этого испытания измените текст элемента h1 с \"Hello\" на \"Hello World\". Затем нажмите кнопку \"Run tests\"." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf0887a", + "title": "Headline with the h2 Element", + "description": [ + "Over the next two sections, we'll build an HTML5 app that will look something like this:", + "\"A", + "The h2 element you enter will create an h2 element on the website.", + "This element tells the browser about the structure of your website. h1 elements are often used for main headings, while h2 elements are generally used for subheadings. There are also h3, h4, h5 and h6 elements to indicate different and new sections.", + "
", + "Add an h2 tag that says \"CatPhotoApp\" to create a second HTML element below your \"Hello World\" h1 element." + ], + "challengeSeed": [ + "

Hello World

" + ], + "tests": [ + "assert(($(\"h2\").length > 0), 'message: Create an h2 element.');", + "assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/

/g).length, 'message: Make sure your h2 element has a closing tag.');", + "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'message: Your h2 element should have the text \"CatPhotoApp\".');", + "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), 'message: Your h1 element should have the text \"Hello World\".');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "description": [ + "In den nächsten Challenges werden wir eine HTML5 App entwickeln die ungefähr so aussehen wird:", + "\"Ein", + "Das eingetragene h2 Element wird ein h2 Element auf der Website erzeugen.", + "Dieses Element sagt dem Browser, wie die Struktur deiner Website aufgebaut ist. h1 Elemente werden oft für Hauptüberschriften verwendet, während h2 Elemente üblicherweise für Zwischenüberschriften verwendet werden. Es gibt auch h3, h4, h5 und h6 Elemente die verschiedene und neue Bereiche kennzeichnen.", + "
", + "Füge unter h1 \"Hello World\" ein zweites HTML Element h2 hinzu, in dem \"CatPhotoApp\" steht." + ] + }, + "fr": { + "title": "Un titre avec l'élément h2", + "description": [ + "Pour les quelques prochains défis, nous construirons une application HTML5 qui ressemblera à ceci :", + "\"Une", + "L'élément h2 que vous entrerez créera un élément h2 sur le site.", + "Cet élément renseigne votre navigateur sur la structure de votre site. Les éléments h1 sont souvent utilisés comme titre, tandis que les éléments h2 sont généralement utilisés comme sous-titres. Il existe également les éléments h3, h4, h5 et h6 qui indiquent une nouvelle et différente section.", + "
", + "Ajoutez une balise h2 contenant \"CatPhotoApp\" pour créer un second élément HTML sous l'élément h1 contenant \"Hello World\"." + ] + }, + "pt-br": { + "title": "Título com o elemento h2", + "description": [ + "Nas próximas duas seções, nós vamos construir um app HTML5 que vai ficar mais ou menos assim:", + "\"Um", + "O elemento h2 que você vai adicionar vai criar um elemento h2 na página.", + "Esse elemento indica ao navegador a estrutura do seu site. Elementos h1 são geralmente usados para os títulos principais, enquanto elementos h2 são usados para subtítulos. Também existem os elementos h3, h4, h5 e h6, que indicam seções novas e diferentes.", + "
", + "Adicione uma tag h2 com o texto \"CatPhotoApp\" para criar um segundo elemento HTML abaixo do seu elemento h1 com o texto \"Hello World\"." + ] + }, + "ru": { + "title": "Заголовок с применением элемента h2", + "description": [ + "В результате прохождения нескольких следующих испытаний, мы построим HTML5 приложение, которое будет похоже на это:", + "\"A", + "Вводимый вами элемент h2 создаст соответствующий элемент h2 на web-странице.", + "Этот элемент сообщает браузеру о структуре вашего web-сайта. Элементы h1 часто применяют в качестве главных заголовков, в то время как элементы h2 обычно используют для обозначения позаголовков. Также существуют элементы h3, h4, h5 и h6 для обозначения отдельных секций.", + "
", + "Добавьте метку h2 с текстом \"CatPhotoApp\" для создания второго HTML элемента под вашим элементом h1 с текстом \"Hello World\"." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08801", + "title": "Inform with the Paragraph Element", + "description": [ + "p elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".", + "You can create a p element like this:", + "<p>I'm a p tag!</p>", + "
", + "Create a p element below your h2 element, and give it the text \"Hello Paragraph\"." + ], + "challengeSeed": [ + "

Hello World

", + "

CatPhotoApp

" + ], + "tests": [ + "assert(($(\"p\").length > 0), 'message: Create a p element.');", + "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'message: Your p element should have the text \"Hello Paragraph\".');", + "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/

p element has a closing tag.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "description": [ + "p Elemente sind das bevorzugte Element für normale Paragraphentexte auf einer Website. P ist die Abkürzung für \"Paragraph\".", + "Du kannst ein p Element so erzeugen:", + "<p>Ich bin ein p Element!</p>", + "


", + "Erstelle ein p Element unter deinem h2 Element und füge den Text \"Hello Paragraph\" ein." + ] + }, + "fr": { + "title": "Informez avec l'élément paragraphe", + "description": [ + "L'élément p est le préféré pour les textes de paragraphes de taille normale. P est l'acronyme de \"paragraphe\",", + "Vous pouvez créer un élément p comme ceci :", + "<p>Je suis une balise p!</p>", + "
", + "Créez un élément p sous votre élément h2 et inscrivez-y le texte \"Hello Paragraph\"." + ] + }, + "pt-br": { + "title": "Informe com o elemento de parágrafo", + "description": [ + "Elementos p são os elementos preferenciais para parágrafos de texto de tamanho normal em sites. P é a abreviação de \"parágrafo\".", + "Você pode criar um elemento p assim:", + "<p>Eu sou uma tag p!</p>", + "
", + "Crie um elemento p abaixo do seu elemento h2, e dê a ele o texto \"Hello Paragraph\"." + ] + }, + "ru": { + "title": "Проинформируйте с применением элемента p", + "description": [ + "Элементы p предпочтительно использовать для обозначения параграфов с текстом нормального размера в web-сайтах. P - сокращение от \"paragraph\".", + "Вы можете создать элемент p следующим образом:", + "<p>Я метка p!</p>", + "
", + "Создайте элемент p под вашим элементом h2 и присвойте ему текст \"Hello Paragraph\"." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08833", + "title": "Fill in the Blank with Placeholder Text", + "description": [ + "Web developers traditionally use lorem ipsum text as placeholder text. The 'lorem ipsum' text is randomly scraped from a famous passage by Cicero of Ancient Rome.", + "Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.", + "Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called kitty ipsum text.", + "
", + "Replace the text inside your p element with the first few words of this kitty ipsum text: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." + ], + "challengeSeed": [ + "

Hello World

", + "", + "

CatPhotoApp

", + "", + "

Hello Paragraph

" + ], + "tests": [ + "assert.isTrue((/Kitty(\\s)+ipsum/gi).test($(\"p\").text()), 'message: Your p element should contain the first few words of the provided kitty ipsum text.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "description": [ + "Webentwickler nutzen für gewöhnlich \"Lorem Ipsum Text\" als Platzhalter. Es heißt \"Lorem Ipsum\", weil es die ersten zwei Wörter aus einer bekannten Passage von Cicero des alten Roms sind.", + "\"Lorem Ipsum\" Text wurde seit dem 16. Jahrhundert von Schriftsetzern als Platzhalter verwendet. Und diese Tradition setzt sich im Web fort.", + "Nun gut, fünf Jahrhunderte sind lange genug. Da wir eine CatPhotoApp entwickeln, lass uns stattdessen lieber kitty ipsum text nutzen.", + "
", + "Ersetze den Text in deinem p Element mit den ersten Wörtern des \"Kitty Ipsum\" Textes: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." + ] + }, + "fr": { + "title": "Remplissez les blancs avec du faux-texte", + "description": [ + "Les développeurs Web utilisent traditionnellement du lorem ipsum comme texte de substitution. Le texte lorem ipsum provient d'un extrait de Cicero, de la Rome antique.", + "Le texte lorem ipsum a été utilisé comme faux-texte par des typographes depuis le 16ème siècle et cette tradition se poursuit sur le Web.", + "Enfin, 5 siècles est suffisament long. Étant donné que nous fabriquons une application de photos de chats, utilisons plutôt du texte Kitty ipsum.", + "
", + "Remplacez le texte à l'intérieur des éléments p avec ces quelques mots du texte Kitty ipsum : Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." + ] + }, + "pt-br": { + "title": "Preencha o vazio com texto de exemplo", + "description": [ + "Desenvolvedores web tradicionalmente usam lorem ipsum como texto de exemplo. Os textos 'lorem ipsum' são partes retiradas aleatoriamente de uma passagem famosa escrita por Cícero na Roma Antiga.", + "Esses textos têm sido usados como texto de exemplo por tipógrafos desde o século 16, e essa tradição continua na web.", + "Bem, 5 séculos é tempo suficiente. Já que estamos construindo um app de fotos de gatos, vamos usar um novo texto chamado de gatinho ipsum.", + "
", + "Substitua o texto dentro do seu elemento p com as primeiras palavras desse gatinho ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." + ] + }, + "ru": { + "title": "Заполните пустоты замещающим текстом", + "description": [ + "Традиционно web-разработчики используют текст lorem ipsum в качестве замещающего текста. Он называется тектсом lorem ipsum по первым двум словам известного пассажа Цицерона из Древнего Рима.", + "Текст lorem ipsum применяется в качестве замещающего текста наборщиками с 16-го века, и эта традиция продолжается в сети.", + "5 веков довольно долгий период. Так как мы строим приложение CatPhotoApp, давайте используем нечто называемое текстом kitty ipsum.", + "
", + "Замените текст внутри вашего элемента p первыми двумя словами текста kitty ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08802", + "title": "Uncomment HTML", + "description": [ + "Commenting is a way that you can leave comments within your code without affecting the code itself.", + "Commenting is also a convenient way to make code inactive without having to delete it entirely.", + "You can start a comment with <!-- and end a comment with -->", + "
", + "Uncomment your h1, h2 and p elements." + ], + "challengeSeed": [ + "" + ], + "tests": [ + "assert($(\"h1\").length > 0, 'message: Make your h1 element visible on your page by uncommenting it.');", + "assert($(\"h2\").length > 0, 'message: Make your h2 element visible on your page by uncommenting it.');", + "assert($(\"p\").length > 0, 'message: Make your p element visible on your page by uncommenting it.');", + "assert(!/[^fc]-->/gi.test(code.replace(/ *" + ], + "tests": [ + "assert(($(\"h1\").length === 0), 'message: Comment out your h1 element so that it is not visible on your page.');", + "assert(($(\"h2\").length > 0), 'message: Leave your h2 element uncommented so that it is visible on your page.');", + "assert(($(\"p\").length === 0), 'message: Comment out your p element so that it is not visible on your page.');", + "assert(code.match(/[^fc]-->/g).length > 1, 'message: Be sure to close each of your comments with -->.');", + "assert((code.match(/<([a-z0-9]){1,2}>/g)[0]===\"

\" && code.match(/<([a-z0-9]){1,2}>/g)[1]===\"

\" && code.match(/<([a-z0-9]){1,2}>/g)[2]===\"

\") , 'message: Do not change the order of the h1 h2 or p in the code.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "description": [ + "Denk daran, dass du einen Kommentar mit <!-- anfangen und mit --> wieder beenden werden.", + "Hier wirst du deinen Kommentar vor dem h2 Element beenden müssen.", + "


", + "Kommentiere die h1 und p Elemente aus, aber lasse dein h2 Element unkommentiert." + ] + }, + "fr": { + "title": "Commentez du HTML", + "description": [ + "Souvenez-vous que pour débuter un commentaire, vous devez utiliser <!-- et que pour le terminer, vous devez utiliser -->.", + "Ici vous devrez terminer le commentaire juste avant que l'élément h2 commence.", + "
", + "Commentez les éléments h1 et p, mais laissez l'élément h2 tel quel." + ] + }, + "pt-br": { + "title": "Comente o HTML", + "description": [ + "Lembre-se de que, para começar um comentário, você precisa usar <!-- e para terminá-lo, você precisa usar -->", + "Aqui, você vai precisar terminar o comentário antes do começo do seu elemento h2.", + "
", + "Comente seus elementos h1 e p, mas deixe seu elemento h2 descomentado." + ] + }, + "ru": { + "title": "Закомментируйте HTML", + "description": [ + "Помните, что для начала комментария вам необходимо использовать <!--, а для завершения комментария - -->", + "Тут вам необходимо завершить комментарий до начала вашего элемента h2.", + "
", + "Закомментируйте ваши элементы h1 и p, но оставьте ваш элемент h2 раскомментированным." + ] + } + } + }, + { + "id": "bad87fed1348bd9aedf08833", + "title": "Delete HTML Elements", + "description": [ + "Our phone doesn't have much vertical space.", + "Let's remove the unnecessary elements so we can start building our CatPhotoApp.", + "
", + "Delete your h1 element so we can simplify our view." + ], + "challengeSeed": [ + "

Hello World

", + "", + "

CatPhotoApp

", + "", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" + ], + "tests": [ + "assert(($(\"h1\").length == 0), 'message: Delete your h1 element.');", + "assert(($(\"h2\").length > 0), 'message: Leave your h2 element on the page.');", + "assert(($(\"p\").length > 0), 'message: Leave your p element on the page.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "description": [ + "Unser Smartphone hat nicht sehr viel vertikalen Platz.", + "Lass uns die unwichtigen Elemente entfernen, damit wir unsere CatPhotoApp entwickeln können.", + "
", + "Lösche die Elemente h1, damit wir etwas Ordnung schaffen." + ] + }, + "fr": { + "title": "Supprimer des éléments HTML", + "description": [ + "Notre téléphone n'a pas beaucoup d'espace vertical.", + "Enlevons les éléments superflus pour débuter la construction de notre application de photos de chats.", + "
", + "Supprimez l'élément h1 afin de simplifier l'affichage." + ] + }, + "pt-br": { + "title": "Delete elementos HTML", + "description": [ + "Nosso celular não tem muito espaço vertical.", + "Vamos remover os elementos desnecessários para podermos começar a construir nosso app de fotos de gatinhos.", + "
", + "Delete seu elemento h1 para podermos simplificar nossa tela." + ] + }, + "ru": { + "title": "Удалите HTML-элементы", + "description": [ + "Наш телефон не очень большой по-вертикали.", + "Давайте удалим некоторые ненужные элементы, чтобы мы могли приступить к созданию приложения CatPhotoApp.", + "
", + "Удалите ваш h1 элемент, чтобы упростить общий вид." + ] + } + } + }, + { + "id": "bad87fee1348bd9aecf08801", + "title": "Introduction to HTML5 Elements", + "description": [ + "HTML5 introduces more descriptive HTML tags. These include header, footer, nav, video, article, section and others.", + "These tags make your HTML easier to read, and also help with Search Engine Optimization (SEO) and accessibility.", + "The main HTML5 tag helps search engines and other developers find the main content of your page.", + "Note
Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.", + "
", + "Create a second p element after the existing p element with the following kitty ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", + "Wrap the paragraphs with an opening and closing main tag." + ], + "challengeSeed": [ + "

CatPhotoApp

", + "", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" + ], + "tests": [ + "assert($(\"p\").length > 1, 'message: You need 2 p elements with Kitty Ipsum text.');", + "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/

p elements has a closing tag.');", + "assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'message: Your p element should contain the first few words of the provided additional kitty ipsum text.');", + "assert($('main').length === 1, 'message: Your code should have one main element.');", + "assert($(\"main\").children(\"p\").length === 2, 'message: The main element should have two paragraph elements as children.');", + "assert(code.match(/

\\s*?

/g), 'message: The opening main tag should come before the first paragraph tag.');", + "assert(code.match(/<\\/p>\\s*?<\\/main>/g), 'message: The closing main tag should come after the second closing paragraph tag.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "pt-br": { + "title": "Introdução aos elementos HTML5", + "description": [ + "O HTML5 introduziu tags mais descritivas, como header (cabeçalho), footer (rodapé), nav (navegação), video (vídeo), article (artigo), section (seção), entre outras.", + "Essas tags deixam seu HTML mais fácil de ler e também ajudam na otimização para motores de busca (SEO) e acessibilidade.", + "A tag HTML5 main (principal) ajuda mecanismos de busca e outros desenvolvedores a encontrar o conteúdo principal da sua página.", + "Nota
Várias das novas tags HTML5 e seus benefícios são discutidos na seção de Acessibilidade aplicada.", + "


", + "Crie um segundo elemento p depois dos elementos p existentes com o seguinte texto gatinho ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", + "Coloque tags main de abertura e fechamento ao redor dos parágrafos." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08812", + "title": "Add Images to Your Website", + "description": [ + "You can add images to your website by using the img element, and point to a specific image's URL using the src attribute.", + "An example of this would be:", + "<img src=\"https://www.your-image-source.com/your-image.jpg\">", + "Note that in most cases, img elements are self-closing.", + "All img elements must have an alt attribute. The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.", + "Let's add an alt attribute to our img example above:", + "<img src=\"https://www.your-image-source.com/your-image.jpg\" alt=\"Author standing on a beach with two thumbs up.\">", + "
", + "Let's try to add an image to our website:", + "Insert an img tag, before the h2 element.", + "Now set the src attribute so that it points to this url:", + "https://bit.ly/fcc-relaxing-cat", + "Finally don't forget to give your image an alt text." + ], + "challengeSeed": [ + "

CatPhotoApp

", + "
", + " ", + " ", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

", + "
" + ], + "tests": [ + "assert($(\"img\").length > 0, 'message: Your page should have an image element.');", + "assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat|\\/\\/s3.amazonaws.com\\/freecodecamp\\/relaxing-cat.jpg\", \"gi\").test($(\"img\").attr(\"src\")), 'message: Your image should have a src attribute that points to the kitten image.');", + "assert(code.match(/alt\\s*?=\\s*?(\\\"|\\').*(\\\"|\\')/), 'message: Your image element must have an alt attribute.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "description": [ + "Du kannst img Elemente verwenden, um Bilder in deine Website einzubauen. Um zur URL des Bildes zu verweisen, benutzt du das src Attribut.", + "Ein Beispiel dafür wäre:", + "<img src=\"https://www.deine-bild-quelle.com/dein-bild.jpg\">", + "Beachte dass in den meisten Fällen img Elemente selbstschließend sind.", + "
", + "Versuche es mit diesem Bild:", + "https://bit.ly/fcc-relaxing-cat" + ] + }, + "fr": { + "title": "Ajouter des images à votre site Web", + "description": [ + "Vous pouvez ajouter des images à votre site Web en utilisant l'élément img et pointer vers une URL d'image spécifique en utilisant l'attribut src.", + "Un exemple de cette procédure serait :", + "<img src=\"https://www.your-image-source.com/your-image.jpg\">", + "Note that in most cases, img elements are self-closing.", + "Prenez note que dans la plupart des cas, les éléments img sont auto-fermants.", + "
", + "Essayez avec cette image :", + "https://bit.ly/fcc-relaxing-cat" + ] + }, + "pt-br": { + "title": "Adicione imagens à sua página web", + "description": [ + "Você pode adicionar imagens ao seu site usando o elemento img e apontando para a URL de uma imagem específica no atributo src.", + "Um exemplo disso seria:", + "<img src=\"https://www.a-fonte-da-sua-imagem.com/sua-imagem.jpg\">", + "Note que na maioria dos casos, elementos img possuem auto-fechamento (não precisam de tag de fechamento).", + "Todos os elementos img devem ter um atributo alt. O texto do atributo alt é usado por leitores de tela para melhorar a acessibilidade e é mostrado no lugar da imagem se ela não puder ser carregada.", + "Vamos adicionar um atributo alt ao nosso exemplo acima:", + "<img src=\"https://www.a-fonte-da-sua-imagem.com/sua-imagem.jpg\" alt=\"Autor numa praia fazendo joinha.\">", + "
", + "Vamos tentar adicionar uma imagem ao nosso site:", + "Insira uma tag img, antes do elemento h2.", + "Agora coloque essa URL no seu atributo src:", + "https://bit.ly/fcc-relaxing-cat", + "Finalmente, não esqueça de dar à sua imagem um texto alt." + ] + }, + "ru": { + "title": "Добавьте изображения к вашему сайту", + "description": [ + "Вы можете добавлять изображения к вашему сайту с помощью элемента img и указывать ссылки определённых изображений с помощтю атрибута src.", + "Примером добавления мзображения может служить:", + "<img src=\"https://www.your-image-source.com/your-image.jpg\">", + "Обратите внимание, что в большинстве случаев элементы img являются самозакрывающимися.", + "
", + "Попробуйте добавить изображение используя следующую ссылку:", + "https://bit.ly/fcc-relaxing-cat" + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08816", + "title": "Link to External Pages with Anchor Elements", + "description": [ + "a elements, also known as anchor elements, are used to link to content outside of the current page.", + "Here's a diagram of an a element. In this case, the a element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.", + "\"a", + "Here's an example:", + "<p>Here's a <a href=\"http://freeCodeCamp.com\"> link to freeCodeCamp.com</a> for you to follow.</p>", + "
", + "Create an a element that links to http://freecatphotoapp.com and has \"cat photos\" as its anchor text." + ], + "challengeSeed": [ + "

CatPhotoApp

", + "
", + " ", + " ", + " ", + " \"A", + " ", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

", + "
" + ], + "tests": [ + "assert((/cat photos/gi).test($(\"a\").text()), 'message: Your a element should have the anchor text of \"cat photos\".');", + "assert(/http:\\/\\/(www\\.)?freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'message: You need an a element that links to http://freecatphotoapp.com');", + "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/a
element has a closing tag.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Verlinke externe Seiten mit Anker Elementen", + "description": [ + "a Elemente, auch bekannt als anchor (Anker) Elemente, werden verwendet um auf Inhalte außerhalb der aktuellen Seite zu verlinken.", + "So sieht ein a Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.", + "\"Eine", + "Hier ist ein Beispiel:", + "<p>Hier ist ein <a href=\"http://freeCodeCamp.com\"> Link zu freeCodeCamp</a> dem du folgen kannst.</p>", + "
", + "Erstelle ein a Element, das auf http://freecatphotoapp.com verlinkt und den \"cat photos\" als anchor text (Link-Text) beinhaltet." + ] + }, + "es": { + "title": "Enlaza páginas externas con elementos ancla", + "description": [ + "Los elementos a, también conocidos como elementos ancla, se utilizan para enlazar a contenido fuera de la página actual.", + "Aquí está un diagrama de un elemento a. En este caso, el elemento a se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ", + " \"un ", + "He aquí un ejemplo:", + "<p>Aquí está un <a href=\"https://freeCodeCamp.com\"> enlace a freeCodeCamp</a> para que lo sigas.</p>", + "
", + "Crea un elemento a que se vincule a http://freecatphotoapp.com y tenga como texto de ancla \"fotos de gatos\"." + ] + }, + "pt-br": { + "title": "Crie links para páginas externas com elementos âncora", + "description": [ + "Elementos a, também conhecidos como elementos âncora, são usados para criar links para conteúdo de fora da página atual.", + "Aqui está um diagrama de um elemento a. Nesse caso, o elemento a é usado no meio de um elemento de parágrafo, o que significa que esse link vai aparecer no meio de uma frase.", + "\"um", + "Aqui está um exemplo:", + "<p>Aqui está um <a href=\"http://freeCodeCamp.com\"> link para o freeCodeCamp.com</a> para você clicar.</p>", + "
", + "Crie um elemento a que vá para http://freecatphotoapp.com e tenha \"cat photos\" como seu texto âncora." + ] + }, + "ru": { + "title": "Присоедините внешние страницы с помощью якорных элементов", + "description": [ + "Элементы a, также известные как якорные элементы, применяют для связи с содержимым вне текущей страницы.", + "Вот диаграмма элемента a. В этом случае, элемент a использован в середине элемента параграфа, что значит, что ссылка появится в середине предложения.", + "\"a", + "Вот пример:", + "<p>Вот <a href=\"http://freeCodeCamp.com\"> ссылка на freeCodeCamp</a> для перехода на ресурс.</p>", + "
", + "Создайте элемент a, который присоединяет http://freecatphotoapp.com и имеет значение \"cat photos\" в качестве текста якоря." + ] + } + } + }, + { + "id": "bad88fee1348bd9aedf08816", + "title": "Link to Internal Sections of a Page with Anchor Elements", + "description": [ + "Anchor elements can also be used to create internal links to jump to different sections within a webpage.", + "To create an internal link, you assign a link's href attribute to a hash symbol # plus the value of the id attribute for the element that you want to internally link to, usually further down the page. You then need to add the same id attribute to the element you are linking to. An id is an attribute that uniquely describes an element.", + "Below is an example of an internal anchor link and its target element:", + "
<a href=\"#contacts-header\">Contacts</a>
...
<h2 id=\"contacts-header\">Contacts</h2>
", + "When users click the Contacts link, they'll be taken to the section of the webpage with the Contacts header element.", + "
", + "Change your external link to an internal link by changing the href attribute to \"#footer\" and the text from \"cat photos\" to \"Jump to Bottom\".", + "Remove the target=\"_blank\" attribute from the anchor tag since this causes the linked document to open in a new window tab.", + "Then add an id attribute with a value of \"footer\" to the <footer> element at the bottom of the page." + ], + "challengeSeed": [ + "

CatPhotoApp

", + "
", + " ", + " cat photos", + " ", + " \"A", + " ", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

", + "

Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.

", + "

Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.

", + " ", + "
", + " ", + "
Copyright Cat Photo App
" + ], + "tests": [ + "assert($('a').length == 1, 'message: There should be only one anchor tag on your page.');", + "assert($('footer').length == 1, 'message: There should be only one footer tag on your page.');", + "assert($('a').eq(0).attr('href') == \"#footer\", 'message: The a tag should have an href attribute set to \"#footer\".');", + "assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true, 'message: The a tag should not have a target attribute');", + "assert($('a').eq(0).text().match(/Jump to Bottom/gi), 'message: The a text should be \"Jump to Bottom\".');", + "assert($('footer').eq(0).attr('id') == \"footer\", 'message: The footer tag should have an id attribute set to \"footer\".');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "pt-br": { + "title": "Crie links para seções internas de uma página com elementos âncora", + "description": [ + "Além de criar links externos, elementos âncora também podem ser usados para criar links internos, que são links que pulam para diferentes seções dentro de uma mesma página.", + "O formato é parecido com um link externo, só que, ao invés de uma URL no atributo href, você usa o símbolo # e uma palavra para descrever a seção para a qual você quer pular.", + "Aqui está um exemplo:", + "<a href=\"#contact\">Ir para a seção de contato</a>", + "Em seguida, você precisa criar no seu HTML um elemento âncora correspondente no lugar em que você quer que seus usuários cheguem quando clicarem no seu link interno. Ao invés de usar o atributo href, você deve usar o atributo name. Aqui está um exemplo:", + "
<h1>Contato</h1>
<a name=\"contact\"></a>
", + "Agora, quando seus usuários clicarem no link \"Ir para a seção de contato\", eles serão levados para a seção da página em que está o elemento âncora que tenha \"contact\" no seu atributo name.", + "
", + "Mude seu link externo para um link interno trocando seu atributo href para \"#bottom\" e o texto âncora de \"cat photos\" para \"Pular para o final\".", + "Então, adicione um elemento âncora com o atributo name como \"bottom\" depois do último parágrafo.", + "Nota
Adicionamos mais texto gatinho ipsum para os parágrafos para mostrar melhor o efeito de clicar no link interno para pular para o final da página. Além disso, essa mudança só vai se aplicar para esse desafio. O próximo desafio vai voltar a mostrar seu link externo." + ] + } + } + }, + { + "id": "bad87fee1348bd9aede08817", + "title": "Nest an Anchor Element within a Paragraph", + "description": [ + "Again, here's a diagram of an a element for your reference:", + "\"a", + "Here's an example:", + "<p>Here's a <a href=\"https://freeCodeCamp.com\"> link to freeCodeCamp</a> for you to follow.</p>", + "Nesting just means putting one element inside of another element.", + "
", + "Now nest your existing a element within a new p element (just after the existing main element) so that the surrounding paragraph says \"View more cat photos\", but where only \"cat photos\" is a link, and the rest of the text is plain text." + ], + "challengeSeed": [ + "

CatPhotoApp

", + "
", + " ", + " cat photos", + " ", + " \"A", + " ", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

", + "
" + ], + "tests": [ + "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").length > 0 || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0), 'message: You need an a element that links to \"http://freecatphotoapp.com\".');", + "assert($(\"a\").text().match(/cat\\sphotos/gi), 'message: Your a element should have the anchor text of \"cat photos\"');", + "assert($(\"p\") && $(\"p\").length > 2, 'message: Create a new p element around your a element. There should be at least 3 total p tags in your HTML code.');", + "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().is(\"p\") || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\")), 'message: Your a element should be nested within your new p element.');", + "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi) || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi)), 'message: Your p element should have the text \"View more \" (with a space after it).');", + "assert(!$(\"a\").text().match(/View\\smore/gi), 'message: Your a element should not have the text \"View more\".');", + "assert(code.match(/<\\/p>/g) && code.match(/

/g).length === code.match(/

p elements has a closing tag.');", + "assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/a elements has a closing tag.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Umschließe ein Anker Element mit einem Paragraphen", + "description": [ + "Hier ist nochmal ein Beispiel für ein a Element:", + "\"Eine", + "Hier ist ein Beispiel:", + "<p>Hier ist ein <a href=\"https://freeCodeCamp.com\"> Link zu freeCodeCamp</a> dem du folgen kannst.</p>", + "Nesting bedeuted ein Element innerhalb eines anderen Elements zu schreiben", + "


", + "Jetzt umschließe dein a Element mit einem neuen p Element (direkt nach dem bereits existierenden main Element) indem steht \"View more cat photos\", wo allerdings nur \"cat photos\" ein Link ist und der Rest normaler Text." + ] + }, + "es": { + "title": "Anida un elemento de ancla dentro de un párrafo", + "description": [ + "Una vez más, aquí está un diagrama de un elemento a para tu referencia:", + "\"un", + "He aquí un ejemplo:", + "<p>Aquí hay un <a href=\"https://freeCodeCamp.com\"> enlace a freeCodeCamp</a> para que lo sigas.</p>", + "Anidamiento simplemente significa poner un elemento dentro de otro elemento.", + "
", + "Ahora anida el elemento a existente dentro de un nuevo elemento p (justo después del elemento main que ya tienes) de tal forma que el párrafo que lo rodee diga \"View more cat photos\", pero que sólo \"cat photos\" sea un enlace, y el resto sea texto plano ." + ] + }, + "pt-br": { + "title": "Aninhe um elemento âncora a um parágrafo", + "description": [ + "Novamente, aqui está um diagrama de um elemento a para você usar como referência:", + "\"um", + "Veja um exemplo:", + "<p>Aqui está um <a href=\"https://freeCodeCamp.com\"> link para o freeCodeCamp</a> para você clicar.</p>", + "Aninhar significa colocar um elemento dentro de outro.", + "
", + "Agora, aninhe seu elemento a existente a um novo elemento p (logo em seguida do elemento main existente), de forma que o parágrafo ao redor tenha o texto \"View more cat photos\", mas apenas a parte \"cat photos\" seja um link e o resto seja apenas texto." + ] + }, + "ru": { + "title": "Создайте вложенный якорный элемент внутри параграфа", + "description": [ + "Вот диаграмма элемента a:", + "\"a", + "Вот пример:", + "<p>Вот <a href=\"https://freeCodeCamp.com\"> ссылка на freeCodeCamp</a> для перехода на ресурс.</p>", + "Вложенность значит установку одного элемента внутрь друго элемента.", + "
", + "Теперь вложите ваш существующий элемент a внутрь нового элемента p (сразу после существующего элемента main) таким образом, что добавляемый параграф сообщает: \"View more cat photos\", но где только \"cat photos\" является ссылкой, а остальной текст обычный." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08817", + "title": "Make Dead Links Using the Hash Symbol", + "description": [ + "Sometimes you want to add a elements to your website before you know where they will link.", + "This is also handy when you're changing the behavior of a link using jQuery, which we'll learn about later.", + "
", + "The current value of the href attribute is a link that points to \"http://freecatphotoapp.com\". Replace the href attribute value with a #, also known as a hash symbol, to create a dead link.", + "For example: href=\"#\"" + ], + "challengeSeed": [ + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

", + "
" + ], + "tests": [ + "assert($(\"a\").attr(\"href\") === \"#\", 'message: Your a element should be a dead link with the value of the href attribute set to \"#\".');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Erstelle tote Links mit dem Hash Symbol", + "description": [ + "Manchmal wirst du a Elemente zu deiner Website hinzufügen möchten, ohne dass du das Ziel des Links kennst.", + "Das ist auch nützlich, wenn du die Funktion eines Links mit jQuery verändern willst. Das werden wir später noch behandeln.", + "
", + "Ersetze den Inhalt des href Attributs deines a Elements mit einem #, auch bekannt als Hash Symbol, um einen toten Link zu erzeugen." + ] + }, + "es": { + "title": "Haz vínculos muertos utilizando el símbolo de numero", + "description": [ + "A veces quieres agregar elementos a a tu sitio web antes de saber qué enlazarán.", + "Esto también es útil cuando estás cambiando el comportamiento de un enlace usando jQuery, lo cual aprenderemos más adelante.", + "
", + "Reemplaza el atributo href de tu elemento a con un #, también conocido como un símbolo de número o de hash, para convertirlo en un vínculo muerto." + ] + }, + "pt-br": { + "title": "Crie links mortos com hashtags", + "description": [ + "Às vezes você vai querer adicionar elementos a ao seu site antes de saber para onde eles vão linkar.", + "Isso também é útil para quando você está mudando o comportamento de um link usando jQuery, que nós vamos aprender mais tarde.", + "
", + "O valor atual do atributo href é \"http://freecatphotoapp.com\". Substitua esse valor por #, também conhecido como hashtag, para criar um link morto." + ] + }, + "ru": { + "title": "Создайте мёртвые ссылки используя хэш-символ", + "description": [ + "Иногда вам нужно добавить элементы a к вашему сайту до того, как вы знаете куда будут вести ссылки.", + "Также это может оказаться полезно, когда вы меняете поведение ссылки используя jQuery, что мы изучим позже.", + "
", + "Замените значение атрибута href вашего элемента a на #, известное как хэш-символ, для превращения элемента в мёртвую ссылку." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08820", + "title": "Turn an Image into a Link", + "description": [ + "You can make elements into links by nesting them within an a element.", + "Nest your image within an a element. Here's an example:", + "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\" alt=\"Three kittens running towards the camera.\"></a>", + "Remember to use # as your a element's href property in order to turn it into a dead link.", + "
", + "Place the existing image element within an anchor element.", + "Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link." + ], + "challengeSeed": [ + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

", + "
" + ], + "tests": [ + "assert($(\"a\").children(\"img\").length > 0, 'message: Nest the existing img element within an a element.');", + "assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'message: Your a element should be a dead link with a href attribute set to #.');", + "assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/a elements has a closing tag.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Verlinke ein Bild", + "description": [ + "Du kannst jedes Element in einen Link verwandeln, indem du es mit einem a Element umschließt.", + "
", + "Umschließe dein Bild mit einem a Element. Hier ist ein Beispiel:", + "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a>", + "Vergewissere dich, dass du ein # innerhalb des href Attributs des a Elements nutzt, um daraus einen toten Link zu machen.", + "Sobald du das gemacht hast, kannst du mit der Maus über dein Bild fahren. Der normale Mauszeiger sollte nun zu einer Hand für Links werden. Das Bild ist jetzt ein Link." + ] + }, + "es": { + "title": "Convierte una imagen en un vínculo", + "description": [ + "Puedes convertir elementos en enlaces al anidarlos dentro de un elemento a.", + "
", + "Anida tu imagen dentro de un elemento a. He aquí un ejemplo: ", + "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"/></a>", + "Recuerda usar # como atributo href de tu elemento a con el fin de convertirlo en un vínculo muerto.", + "Una vez hayas hecho esto, coloca el cursor sobre tu imagen. El puntero normal de tu cursor debería convertirse en el puntero de enlace. La foto es ahora un vínculo ." + ] + }, + "pt-br": { + "title": "Transforme uma imagem em um link", + "description": [ + "Você pode transformar elementos em links aninhando-os a um elemento a.", + "Aninhe sua imagem a um elemento a. Aqui está um exemplo:", + "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\" alt=\"Três gatinhos correndo em direção à câmera.\"></a>", + "Lembre-se de usar # no atributo href do seu elemento a para que o link esteja morto.", + "
", + "Coloque a imagem existente dentro de um elemento âncora.", + "Depois de fazer isso, coloque o cursor do mouse sobre sua imagem. O seu cursor normal deve virar um cursor de clique. A foto agora é um link." + ] + }, + "ru": { + "title": "Превратите изображение в ссылку", + "description": [ + "Вы можете превратить элементы в ссылки путём их вложения внутрь элементов a.", + "
", + "Вложите ваше изображение в элемент a. Вот пример:", + "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a>", + "Не забывайте использовать # в качестве значения атрибута href вашего элемента a для превращения ссылки в мёртвую.", + "Как только вы это сделаете, наведите курсор мыши на ваше изображение. При этом курсор должен изменить вид с обычного на используемый при наведении на ссылки. Ваше фото теперь является ссылкой." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08827", + "title": "Create a Bulleted Unordered List", + "description": [ + "HTML has a special element for creating unordered lists, or bullet point-style lists.", + "Unordered lists start with a <ul> element. Then they contain some number of <li> elements.", + "For example: ", + "
<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>
", + "would create a bullet point-style list of \"milk\" and \"cheese\".", + "
", + "Remove the last two p elements and create an unordered list of three things that cats love at the bottom of the page." + ], + "challengeSeed": [ + "

CatPhotoApp

", + "
", + "

Click here to view more cat photos.

", + " ", + " \"A", + " ", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

", + "
" + ], + "tests": [ + "assert($(\"ul\").length > 0, 'message: Create a ul element.');", + "assert($(\"ul li\").length > 2, 'message: You should have three li elements within your ul element.');", + "assert(code.match(/<\\/ul>/gi) && code.match(/
    /gi).length === code.match(/
      ul element has a closing tag.');", + "assert(code.match(/<\\/li>/gi) && code.match(/]/gi) && code.match(/<\\/li>/gi).length === code.match(/]/gi).length, 'message: Make sure your li elements have closing tags.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Erstelle eine ungeordnete Liste", + "description": [ + "HTML hat ein spezielles Element zum Erstellen von unordered lists (ungeordneten Listen).", + "Ungeordnete Listen starten mit einem <ul> Element. Dann beinhalten sie eine gewisse Anzahl an <li> Elementen.", + "Zum Beispiel:", + "
      <ul>
        <li>Milch</li>
        <li>Käse</li>
      </ul>
      ", + "würde eine ungeordnete Liste für \"Milch\" und \"Käse\" erstellen.", + "
      ", + "Entferne die letzten zwei p Elemente und erstelle eine ungeordnete Liste von drei Dingen die Katzen lieben am Ende der Seite" + ] + }, + "es": { + "title": "Crea una lista no ordenada con viñetas", + "description": [ + "HTML tiene un elemento especial para la creación de listas no ordenadas, o listas con estilo viñeta.", + "Las listas no ordenadas comienzan con un elemento <ul>. A continuación contienen una cantidad de elementos <li>.", + "Por ejemplo: ", + "
      <ul>
        <li>leche</li>
        <li>queso</li>
      </ul>
      ", + "creará una lista con viñetas y con elementos \"leche\" y \"queso\".", + "
      ", + "Elimina los dos últimos elementos p y en la parte inferior de la página crea una lista no ordenada de tres cosas que los gatos aman." + ] + }, + "pt-br": { + "title": "Crie uma lista não ordenada com marcadores", + "description": [ + "O HTML tem um elemento especial para criar listas não ordenadas, ou listas com marcadores.", + "Listas não ordenadas começam com um elemento ul e contêm diversos elementos li aninhados a ele.", + "Por exemplo: ", + "
      <ul>
        <li>leite</li>
        <li>queijo</li>
      </ul>
      ", + "criaria uma lista com marcadores contendo \"leite\" e \"queijo\".", + "
      ", + "Remova os dois últimos elementos p e crie no final da página uma lista não ordenada de três coisas que gatos adoram." + ] + }, + "ru": { + "title": "Создайте ненумерованный неупорядоченный список", + "description": [ + "В HTML есть специальный элемент для создания неупорядоченного списка, или списка с точками в виде меток элементов.", + "Неупорядоченные списки начинаются с элемента <ul>. Затем они содержат некоторе количество элементов <li>.", + "Например: ", + "
      <ul>
        <li>milk</li>
        <li>cheese</li>
      </ul>
      ", + "создаст ненумерованный список из \"milk\" и \"cheese\".", + "
      ", + "Удалите последние два элемента p и создайте неупорядоченный список из трёх вещей, которые любят кошки." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08828", + "title": "Create an Ordered List", + "description": [ + "HTML has a special element for creating ordered lists, or numbered-style lists.", + "Ordered lists start with a <ol> element. Then they contain some number of <li> elements.", + "For example:", + "
      <ol>
        <li>Garfield</li>
        <li>Sylvester</li>
      </ol>
      ", + "would create a numbered list of \"Garfield\" and \"Sylvester\".", + "
      ", + "Create an ordered list of the top 3 things cats hate the most." + ], + "challengeSeed": [ + "

      CatPhotoApp

      ", + "
      ", + "

      Click here to view more cat photos.

      ", + " ", + " \"A", + " ", + "

      Things cats love:

      ", + "
        ", + "
      • cat nip
      • ", + "
      • laser pointers
      • ", + "
      • lasagna
      • ", + "
      ", + "

      Top 3 things cats hate:

      ", + " ", + "
      " + ], + "tests": [ + "assert((/Top 3 things cats hate:/i).test($(\"ol\").prev().text()), 'message: You should have an ordered list for \"Top 3 things cats hate:\"');", + "assert((/Things cats love:/i).test($(\"ul\").prev().text()), 'message: You should have an unordered list for \"Things cats love:\"');", + "assert.equal($(\"ul\").length, 1, 'message: You should have only one ul element.');", + "assert.equal($(\"ol\").length, 1, 'message: You should have only one ol element.');", + "assert.equal($(\"ul li\").length, 3, 'message: You should have three li elements within your ul element.');", + "assert.equal($(\"ol li\").length, 3, 'message: You should have three li elements within your ol element.');", + "assert(code.match(/<\\/ul>/g) && code.match(/<\\/ul>/g).length === code.match(/
        /g).length, 'message: Make sure your ul element has a closing tag.');", + "assert(code.match(/<\\/ol>/g) && code.match(/<\\/ol>/g).length === code.match(/
          /g).length, 'message: Make sure your ol element has a closing tag.');", + "assert(code.match(/<\\/li>/g) && code.match(/
        1. /g) && code.match(/<\\/li>/g).length === code.match(/
        2. /g).length, 'message: Make sure your li element has a closing tag.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Erstelle eine geordnete Liste", + "description": [ + "HTML beinhaltet ein spezielles Element für ordered lists (geordnete Listen).", + "Geordnete Listen starten mit einem <ol> Element. Dann enthalten sie eine gewisse Anzahl an <li> Elementen.", + "Zum Beispiel:", + "
          <ol>
            <li>Garfield</li>
            <li>Sylvester</li>
          </ol>
          ", + "würde eine nummerierte Liste mit \"Garfield\" und \"Sylvester\" erstellen.", + "
          ", + "Erstelle eine geordnete Liste von den drei Dingen, die Katzen am meisten hassen." + ] + }, + "es": { + "title": "Crear una lista ordenada", + "description": [ + "HTML tiene un elemento especial para la creación de listas ordenadas, o listas de estilo numerado.", + "Las listas ordenadas comienzan con un elemento <ol>. Luego contienen un número de elementos <li>.", + "Por ejemplo:", + "
          <ol>
            <li>Garfield</li>
            <li>Sylvester</li>
          </ol>
          ", + "creará una lista numerada con \"Garfield\" y \"Sylvester\".", + "
          ", + "Crea una lista ordenada de los 3 cosas que más odian los gatos." + ] + }, + "pt-br": { + "title": "Crie uma lista ordenada", + "description": [ + "O HTML tem um elemento especial para criar listas ordenadas, ou listas numeradas.", + "Listas ordenadas começam com um elemento ol e contêm diversos elementos li aninhados a ele.", + "Por exemplo:", + "
          <ol>
            <li>Garfield</li>
            <li>Frajola</li>
          </ol>
          ", + "criaria uma lista numerada contendo \"Garfield\" e \"Frajola\".", + "
          ", + "Crie uma lista ordenada com as 3 coisas que os gatos mais odeiam." + ] + }, + "ru": { + "title": "Создайте упорядоченный список", + "description": [ + "В HTML есть специальный элемент для создания упорядоченных списков, или списков с номерами в качестве меток элементов.", + "Упорядоченные списки начинаются с элемента <ol>. Далее они содержат некоторое количество элементов <li>.", + "Например:", + "
          <ol>
            <li>Garfield</li>
            <li>Sylvester</li>
          </ol>
          ", + "создаст нумерованный список из \"Garfield\" и \"Sylvester\".", + "
          ", + "Создайте нумерованный список из 3-х вещей, который кошки больше всего ненавидят." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08829", + "title": "Create a Text Field", + "description": [ + "Now let's create a web form.", + "Text inputs are a convenient way to get input from your user.", + "You can create one like this:", + "<input type=\"text\">", + "Note that input elements are self-closing.", + "
          ", + "Create an input element of type text below your lists." + ], + "challengeSeed": [ + "

          CatPhotoApp

          ", + "
          ", + "

          Click here to view more cat photos.

          ", + " ", + " \"A", + " ", + "

          Things cats love:

          ", + "
            ", + "
          • cat nip
          • ", + "
          • laser pointers
          • ", + "
          • lasagna
          • ", + "
          ", + "

          Top 3 things cats hate:

          ", + "
            ", + "
          1. flea treatment
          2. ", + "
          3. thunder
          4. ", + "
          5. other cats
          6. ", + "
          ", + " ", + " ", + "
          " + ], + "tests": [ + "assert($(\"input[type=text]\").length > 0, 'message: Your app should have an input element of type text.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Erstelle ein Textfeld", + "description": [ + "Nun erstellen wir ein Web Formular.", + "Eingabefelder sind eine bewährte Möglichkeit um Daten von Usern zu erhalten.", + "So kannst du eines erstellen:", + "<input type=\"text\">", + "Beachte, dass input Elemente selbstschließend sind.", + "
          ", + "Erstelle ein input Element des Typ (\"type\") text unter deinen Listen." + ] + }, + "es": { + "title": "Crea un campo de texto", + "description": [ + "Ahora vamos a crear un formulario web.", + "Los campos de texto son una manera conveniente de obtener retroalimentación de tu usuario.", + "Puedes crear uno como este:", + "<input type=\"text\">", + "Ten en cuenta que los elementos input son de cierre automático.", + "
          ", + "Crea un elemento input de tipo text debajo de tus listas." + ] + }, + "pt-br": { + "title": "Crie um campo de texto", + "description": [ + "Agora vamos criar um formulário web.", + "Campos de texto são uma forma conveniente de obter dados do seu usuário.", + "Você pode criar um assim:", + "<input type=\"text\">", + "Note que elementos input têm auto-fechamento.", + "
          ", + "Crie um elemento input de tipo text abaixo das suas listas." + ] + }, + "ru": { + "title": "Создайте текстовое поле", + "description": [ + "Теперь давайте создадим web-форму.", + "Поля текстового ввода - удобный способ получения данных от пользователя.", + "Вы можете создать текстовое поле следующим образом:", + "<input type=\"text\">", + "Обратите внимание, что элементы input самозакрывающиеся.", + "
          ", + "Создайте элемент input типа text под вашими списками." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08830", + "title": "Add Placeholder Text to a Text Field", + "description": [ + "Your placeholder text is what appears in your text input before your user has input anything.", + "You can create placeholder text like so:", + "<input type=\"text\" placeholder=\"this is placeholder text\">", + "
          ", + "Set the placeholder value of your text input to \"cat photo URL\"." + ], + "challengeSeed": [ + "

          CatPhotoApp

          ", + "
          ", + "

          Click here to view more cat photos.

          ", + " ", + " \"A", + " ", + "

          Things cats love:

          ", + "
            ", + "
          • cat nip
          • ", + "
          • laser pointers
          • ", + "
          • lasagna
          • ", + "
          ", + "

          Top 3 things cats hate:

          ", + "
            ", + "
          1. flea treatment
          2. ", + "
          3. thunder
          4. ", + "
          5. other cats
          6. ", + "
          ", + " ", + "
          " + ], + "tests": [ + "assert($(\"input[placeholder]\").length > 0, 'message: Add a placeholder attribute to the existing text input element.');", + "assert($(\"input\") && $(\"input\").attr(\"placeholder\") && $(\"input\").attr(\"placeholder\").match(/cat\\s+photo\\s+URL/gi), 'message: Set the value of your placeholder attribute to \"cat photo URL\".');", + "assert($(\"input[type=text]\").length > 0 && code.match(/\\s]+))?)+\\s*|\\s*)\\/?>/gi), 'message: The finished input element should have valid syntax.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Füge Platzhalter zu einem Textfeld hinzu", + "description": [ + "Platzhaltertexte erscheinen in deinen input Feldern, bevor der Nutzer etwas eingibt.", + "Du kannst Platzhalter auf folgende Weise erstellen:", + "<input type=\"text\" placeholder=\"Das ist ein Platzhalter.\">", + "
          ", + "Setze bei deinem input Element den Wert für placeholder auf \"cat photo URL\"." + ] + }, + "es": { + "title": "Agrega un texto de relleno a un campo de texto", + "description": [ + "El texto de relleno es el que aparece en un campo de texto antes de que un usuario haya ingresado datos.", + "Puedes crear un texto de relleno de esta manera:", + "<input type=\"text\" placeholder=\"este es un texto de relleno\">", + "
          ", + "Establece el valor del texto de relleno de tu campo de texto como \"cat photo URL\"." + ] + }, + "pt-br": { + "title": "Adicione um placeholder a um campo de texto", + "description": [ + "O placeholder é o texto que aparece no seu input quando ele está vazio.", + "Você pode adicionar um placeholder ao seu campo de texto assim:", + "<input type=\"text\" placeholder=\"esse é o placeholder\">", + "
          ", + "Coloque o placeholder \"cat photo URL\" no seu input de texto." + ] + }, + "ru": { + "title": "Добавьте замещающий текст к текстовому полю", + "description": [ + "Ваш замещающий текст - это то, что отображается в виде текста внутри input пока пользователь не ввёл туда что-либо.", + "Вы можете создать замещающий текст следующим образом:", + "<input type=\"text\" placeholder=\"это замещающий текст\">", + "
          ", + "Установите значение атрибута placeholder вашего текстового поля input равными \"cat photo URL\"." + ] + } + } + }, + { + "id": "bad87fee1348bd9aede08830", + "title": "Create a Form Element", + "description": [ + "You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your form element.", + "For example:", + "<form action=\"/url-where-you-want-to-submit-form-data\"></form>", + "
          ", + "Nest your text field in a form element. Add the action=\"/submit-cat-photo\" attribute to this form element." + ], + "challengeSeed": [ + "

          CatPhotoApp

          ", + "
          ", + "

          Click here to view more cat photos.

          ", + " ", + " \"A", + " ", + "

          Things cats love:

          ", + "
            ", + "
          • cat nip
          • ", + "
          • laser pointers
          • ", + "
          • lasagna
          • ", + "
          ", + "

          Top 3 things cats hate:

          ", + "
            ", + "
          1. flea treatment
          2. ", + "
          3. thunder
          4. ", + "
          5. other cats
          6. ", + "
          ", + " ", + "
          " + ], + "tests": [ + "assert($(\"form\") && $(\"form\").children(\"input\") && $(\"form\").children(\"input\").length > 0, 'message: Nest your text input element within a form element.');", + "assert($(\"form\").attr(\"action\") === \"/submit-cat-photo\", 'message: Make sure your form has an action attribute which is set to /submit-cat-photo');", + "assert(code.match(/<\\/form>/g) && code.match(/
          /g) && code.match(/<\\/form>/g).length === code.match(//g).length, 'message: Make sure your form element has well-formed open and close tags.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Erstelle ein Formular", + "description": [ + "Du kannst Web Formulare bauen, die Daten zu einem Server übertragen – und das nur mit HTML. Das wird möglich, indem du eine Aktion für dein form Element bestimmst.", + "Zum Beispiel:", + "<form action=\"/url-wohin-du-deine-formular-daten-senden-willst\"></form>", + "
          ", + "Umschließe dein Textfeld mit einem form Element. Füge anschließend das Attribut action=\"/submit-cat-photo\" hinzu." + ] + }, + "es": { + "title": "Crea un elemento de formulario", + "description": [ + "Puedes construir formularios web que realmente envíen datos a un servidor usando nada más que HTML puro. Puedes hacerlo especificando una acción en tu elemento form.", + "Por ejemplo:", + "<form action=\"/url-al-que-quieres-enviar-los-datos-del-formulario\"></form>", + "
          ", + "Anida tu campo de texto en un elemento form. Agrega el atributo action=\"/submit-cat-photo\" a este elemento de formulario." + ] + }, + "pt-br": { + "title": "Crie um elemento de formulário", + "description": [ + "Você pode construir formulários web que realmente enviam dados para um servidor usando nada mais que HTML puro. Para isso, você precisa especificar uma URL no atributo action do seu elemento form.", + "Por exemplo:", + "<form action=\"/url-para-onde-voce-quer-enviar-os-dados\"></form>", + "
          ", + "Aninhe o seu campo de texto a um elemento form. Adicione o atributo action=\"/submit-cat-photo\" a esse form." + ] + }, + "ru": { + "title": "Создайте элемент типа форма", + "description": [ + "Вы можете строить web-формы, которые отправляют данные серверу, не ипользуя ничего кроме HTML. Вы можете достичь этого указанием действия в атрибутах элемента form.", + "Например:", + "<form action=\"/url-куда-вы-хотите-отправить-данные-формы\"></form>", + "
          ", + "Вложите ваше текстовое поле в элемент form. Добавьте атрибут action=\"/submit-cat-photo\" к этому элементу формы." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedd08830", + "title": "Add a Submit Button to a Form", + "description": [ + "Let's add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form's action attribute.", + "Here's an example submit button:", + "<button type=\"submit\">this button submits the form</button>", + "
          ", + "Add a submit button to your form element with type submit and \"Submit\" as its text." + ], + "challengeSeed": [ + "

          CatPhotoApp

          ", + "
          ", + "

          Click here to view more cat photos.

          ", + " ", + " \"A", + " ", + "

          Things cats love:

          ", + "
            ", + "
          • cat nip
          • ", + "
          • laser pointers
          • ", + "
          • lasagna
          • ", + "
          ", + "

          Top 3 things cats hate:

          ", + "
            ", + "
          1. flea treatment
          2. ", + "
          3. thunder
          4. ", + "
          5. other cats
          6. ", + "
          ", + " ", + " ", + " ", + "
          " + ], + "tests": [ + "assert($(\"form\").children(\"button\").length > 0, 'message: Your form should have a button inside it.');", + "assert($(\"button\").attr(\"type\") === \"submit\", 'message: Your submit button should have the attribute type set to submit.');", + "assert($(\"button\").text().match(/^\\s*submit\\s*$/gi), 'message: Your submit button should only have the text \"Submit\".');", + "assert(code.match(/<\\/button>/g) && code.match(/", + " ", + "
          " + ], + "tests": [ + "assert($(\"input\").prop(\"required\"), 'message: Your text input element should have the required attribute.');" + ], + "type": "waypoint", + "challengeType": 0, + "translations": { + "de": { + "title": "Nutze HTML5 um ein Pflichtfeld zu erstellen", + "description": [ + "Du kannst bestimmte Felder eines Formulars zu Pflichtfeldern erklären. Damit ist es deinen Usern nicht mehr möglich, das Formular abzuschicken, ohne die Pflichtfelder auszufüllen.", + "Um zum Beispiel ein Textfeld zum Pflichtfeld zu erklären, kannst du einfach ein required innerhalb deines input Elements hinzufügen: <input type=\"text\" required>", + "
          ", + "Mache aus deinem input Feld ein Pflichtfeld – \"required\" – damit deine Nutzer das Formular nicht abschicken können, ohne dieses Feld auszufüllen.", + "Probier dann dein Formular ohne einen Text abzuschicken. Siehst du wie dein HTML5 Formular dich darauf hinweißt dass das Feld verpflichtend ist?", + "Beachte: dieses Feld funktioniert nicht in Safari." + ] + }, + "es": { + "title": "Utiliza HTML5 para especificar campos obligatorios", + "description": [ + "Puedes especificar un campo obligatorio en un formulario para que tu usuario no pueda enviar el formulario hasta que lo haya llenado.", + "Por ejemplo, si quieres requerir obligatoriamente un campo de texto, puedes agregar la palabra required dentro de tu elemento input, usarías: <input type=\"text\" required> ", + "
          ", + "Haz de tu campo de texto un campo obligatorio, de manera que tu usuario no pueda enviar el formulario sin completar este campo.", + "Luego, intenta enviar el formulario sin ingresar texto alguno. ¿Ves cómo tu formulario HTML5 te notifica que el campo es obligatorio?", + "Nota: Este campo no funciona en Safari." + ] + }, + "pt-br": { + "title": "Use HTML5 para tornar campos obrigatórios", + "description": [ + "Você pode tornar obrigatórios campos específicos do seu formulário, assim seu usuário não conseguirá enviar os dados sem preencher esses campos.", + "Por exemplo, se você quiser que um campo de texto seja obrigatório, basta adicionar a palavra required ao seu elemento input, assim: <input type=\"text\" required>", + "
          ", + "Torne seu campo de texto obrigatório, de forma que seu usuário não consiga enviar o formulário sem preencher esse campo.", + "Então, tente enviar o formulário sem preencher esse campo. Viu como o formulário HTML5 avisa que o campo é obrigatório?", + "Nota
          Esse campo não funciona no Safari." + ] + }, + "ru": { + "title": "Используйте HTML5, чтобы сделать заполнение поля обязательным", + "description": [ + "Вы можете требовать заполнения определённых полей формы, таким образом пользователь не сможет отправить данные формы до их заполнения.", + "Например, если бы вы хотели сделать заполнение текстового поля обязательным, вы могли бы добавить слово required внутрь вашего элемента input: <input type=\"text\" required>", + "
          ", + "Сделайте ваше текстовое поле input обязательным required для заполнения, чтобы пользователь не мог отправить данные формы без заполнения этого поля.", + "Далее попробуйте отправить данные формы без ввода какого-либо текста. Видите как ваша HTML5-форма уведомляет вас о том, что поле обязательное для заполнения?", + "Внимание: это поле не работает в Safari." + ] + } + } + }, + { + "id": "bad87fee1348bd9aedf08834", + "title": "Create a Set of Radio Buttons", + "description": [ + "You can use radio buttons for questions where you want the user to only give you one answer out of multiple options.", + "Radio buttons are a type of input", + "Each of your radio buttons should be nested within its own label element.", + "All related radio buttons should have the same name attribute.", + "Here's an example of a radio button:", + "<label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>", + "
          ", + "Add a pair of radio buttons to your form. One should have the option of indoor and the other should have the option of outdoor. Both should share the name attribute of indoor-outdoor." + ], + "challengeSeed": [ + "

          CatPhotoApp

          ", + "
          ", + "

          Click here to view more cat photos.

          ", + " ", + " \"A", + " ", + "

          Things cats love:

          ", + "
            ", + "
          • cat nip
          • ", + "
          • laser pointers
          • ", + "
          • lasagna
          • ", + "
          ", + "

          Top 3 things cats hate:

          ", + "
            ", + "
          1. flea treatment
          2. ", + "
          3. thunder
          4. ", + "
          5. other cats
          6. ", + "
          ", + "
          ", + " ", + " ", + "
          ", + "
          " + ], + "tests": [ + "assert($('input[type=\"radio\"]').length > 1, 'message: Your page should have two radio button elements.');", + "assert($('label > input[type=\"radio\"]').filter(\"[name='indoor-outdoor']\").length > 1, 'message: Give your radio buttons the name attribute of indoor-outdoor.');", + "assert($('label > input[type=\"radio\"]:only-child').length > 1, 'message: Each of your two radio button elements should be nested in its own label element.');", + "assert((code.match(/<\\/label>/g) && code.match(/