From 5831c2345d0c9a099963102a0584f63e65fe21c4 Mon Sep 17 00:00:00 2001 From: Shaun Hamilton Date: Wed, 1 Dec 2021 20:14:15 +0000 Subject: [PATCH] fix: magazine --- .../step-005.md | 2 +- .../step-009.md | 8 +- .../step-023.md | 6 +- .../step-043.md | 1 + .../step-061.md | 4 +- .../step-080.md | 373 ++++++++++++++++++ 6 files changed, 385 insertions(+), 9 deletions(-) diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-005.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-005.md index 6aca34099c..1093b0b1db 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-005.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-005.md @@ -56,7 +56,7 @@ assert(document.querySelector('p')?.className === 'hero-subtitle'); Your `p` element should have the text set to `Our efforts to restructure our curriculum with a more project-based focus`. ```js -assert(document.querySelector('p')?.textContent === 'Our efforts to restructure our curriculum with a more project-based focus'); +assert.equal(document.querySelector('p')?.textContent, 'Our efforts to restructure our curriculum with a more project-based focus'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-009.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-009.md index 680ba3102c..2605a53465 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-009.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-009.md @@ -52,25 +52,25 @@ assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[0]?.getA Your second `a` element should have an `href` set to `https://twitter.com/freecodecamp`. ```js -assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[1]?.getAttribute('href') === 'https://twitter.com/freecodecamp'); +assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[1]?.getAttribute('href'), 'https://twitter.com/freecodecamp'); ``` Your third `a` element should have an `href` set to `https://instagram.com/freecodecamp`. ```js -assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[2]?.getAttribute('href') === 'https://instagram.com/freecodecamp'); +assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[2]?.getAttribute('href'), 'https://instagram.com/freecodecamp'); ``` Your fourth `a` element should have an `href` set to `https://www.linkedin.com/school/free-code-camp`. ```js -assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[3]?.getAttribute('href') === 'https://www.linkedin.com/school/free-code-camp'); +assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[3]?.getAttribute('href'), 'https://www.linkedin.com/school/free-code-camp'); ``` Your fifth `a` element should have an `href` set to `https://www.youtube.com/freecodecamp`. ```js -assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[4]?.getAttribute('href') === 'https://www.youtube.com/freecodecamp'); +assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[4]?.getAttribute('href'), 'https://www.youtube.com/freecodecamp'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-023.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-023.md index e2142638e8..1558be7e86 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-023.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-023.md @@ -7,7 +7,7 @@ dashedName: step-23 # --description-- -Within your `.image-wrapper` element, give the second `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`, an `alt` of `image of the calculator project`, a `loading` attribute set to `lazy`, a `class` set to `image-2`, a `width` attribute set to `400`, and a `height` attribute set to `400`. +Within your `.image-wrapper` element, give the second `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`, an `alt` of `image of a calculator project`, a `loading` attribute set to `lazy`, a `class` set to `image-2`, a `width` attribute set to `400`, and a `height` attribute set to `400`. # --hints-- @@ -17,10 +17,10 @@ Your second `img` element should have a `src` set to `https://cdn.freecodecamp.o assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png'); ``` -Your second `img` element should have an `alt` set to `image of the calculator project`. +Your second `img` element should have an `alt` set to `image of a calculator project`. ```js -assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('alt') === 'image of the calculator project'); +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('alt') === 'image of a calculator project'); ``` Your second `img` element should have a `loading` attribute set to `lazy`. diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-043.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-043.md index a0e56ed8ed..3eae2067fe 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-043.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-043.md @@ -251,5 +251,6 @@ main { .hero { grid-column: 1 / -1; + position: relative; } ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-061.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-061.md index e84939a67f..a7b4745b19 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-061.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-061.md @@ -14,7 +14,9 @@ To give the `hr` a color, you need to adjust the `border` property. Give the `hr Your `hr` should have a `border` property set to `1px solid rgba(120, 120, 120, 0.6)`. ```js -assert(new __helpers.CSSHelp(document).getStyle('hr')?.border === '1px solid rgba(120, 120, 120, 0.6)'); +assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderWidth, '1px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderStyle, 'solid'); +assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderColor, 'rgba(120, 120, 120, 0.6)'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-080.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-080.md index 6a68227181..45902803f1 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-080.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-grid-by-building-a-magazine/step-080.md @@ -403,3 +403,376 @@ hr { --fcc-editable-region-- ``` + +# --solutions-- + +```html + + + + + + CSS Grid Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +.image-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: repeat(3, min-content); + gap: 2rem; + place-items: center; +} + +.image-1, .image-3 { + grid-column: 1 / -1; +} + +@media only screen and (max-width: 720px) { + .image-wrapper { + grid-template-columns: 1fr; + } +} + +@media only screen and (max-width: 600px) { + .text-with-images { + grid-template-columns: 1fr; + } +} + +@media only screen and (max-width: 550px) { + .hero-title { + font-size: 6rem; + } + + .hero-subtitle, + .author, + .quote, + .list-header { + font-size: 1.8rem; + } + + .social-icons { + font-size: 2rem; + } + + .text { + font-size: 1.6rem; + } +} + +@media only screen (max-width: 420px) { + .hero-title { + font-size: 4.5rem; + } +} +```