feat: enable new curriculum (#44183)
* feat: use legacy flag chore: reorder challenges fix: linter revert: server change feat: unblock new editor fix: proper order fix: 0-based order fix: broke the order feat: move tribute certification to its own block feat: split the old projects block into 4 fix: put all blocks in order chore: add intro text refactor: use block, not blockName in query fix: project progress indicator * fix: reorder new challenges/certs * fix: reorder legacy challenges * fix: reintroduce legacy certs * feat: add showNewCurriculum flag to env * chore: forgot sample.env * feat: use feature flag for display * fix: rename meta + dirs to match new blocks * fix: add new blocks to help-category-map * fix: update completion-modal for new GQL schema * test: duplicate title/id errors -> warnings * fix: update completion-modal to new GQL schema Mk2 * chore: re-order metas (again) * fix: revert super-block-intro changes The intro needs to show both legacy and new content. We need to decide which pages are created, rather than than what a page shows when rendered. * feat: move upcoming curriculum into own superblock * fix: handle one certification with two superBlocks * fix: remove duplicated intros * fix: remove duplicate projects from /settings * fix: drop 'two' from Responsive Web Design Two * chore: rename slug suffix from two to v2 * feat: control display of new curriculum * feat: control project paths shown on /settings * fix: use new project order for /settings This does mean that /settings will change before the release, but I don't think it's serious. All the projects are there, just not in the legacy order. * fix: claim/show cert button * chore: remove isLegacy Since we have legacy superblocks, we don't currently need individual blocks to be legacy * test: fix utils.test * fix: verifyCanClaim needs certification If Shaun removes the cert claim cards, maybe we can remove this entirely * fix: add hasEditableBoundaries flags where needed * chore: remove isUpcomingChange * chore: v2 -> 22 Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
304773d62b
commit
8614db7a32
@ -76,6 +76,7 @@ exports.createPages = function createPages({ graphql, actions, reporter }) {
|
||||
node {
|
||||
challenge {
|
||||
block
|
||||
certification
|
||||
challengeType
|
||||
fields {
|
||||
slug
|
||||
@ -116,6 +117,7 @@ exports.createPages = function createPages({ graphql, actions, reporter }) {
|
||||
component
|
||||
}
|
||||
frontmatter {
|
||||
certification
|
||||
block
|
||||
superBlock
|
||||
title
|
||||
@ -183,6 +185,7 @@ exports.createPages = function createPages({ graphql, actions, reporter }) {
|
||||
const pageBuilder = createByIdentityMap[nodeIdentity](createPage);
|
||||
pageBuilder(edge);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
console.log(`
|
||||
ident: ${nodeIdentity} does not belong to a function
|
||||
|
||||
|
||||
@ -63,47 +63,119 @@
|
||||
"Time to put your newly learnt skills to work. By working on these projects, you will get a chance to apply all of the skills, principles, and concepts you have learned so far: HTML, CSS, Visual Design, Accessibility, and more.",
|
||||
"Complete the five web programming projects below to earn your Responsive Web Design certification."
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"responsive-web-design-22": {
|
||||
"title": "Responsive Web Design",
|
||||
"intro": [
|
||||
"In this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.",
|
||||
"First, you'll build a cat photo app to learn the basics of HTML and CSS. Later, you'll learn modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a web form.",
|
||||
"Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid."
|
||||
],
|
||||
"note": "Note: Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests. If you face issues, we recommend disabling extensions that modify the content or layout of pages, while taking the course.",
|
||||
"blocks": {
|
||||
"build-a-tribute-page-project": {
|
||||
"title": "Build a Tribute Page Project",
|
||||
"intro": ["placeholder", "holder of place"]
|
||||
},
|
||||
"build-a-personal-portfolio-webpage-project": {
|
||||
"title": "Build a Personal Portfolio Webpage Project",
|
||||
"intro": ["placeholder", "holder of place"]
|
||||
},
|
||||
"build-a-product-landing-page-project": {
|
||||
"title": "Build a Product Landing Page Project",
|
||||
"intro": ["placeholder", "holder of place"]
|
||||
},
|
||||
"build-a-survey-form-project": {
|
||||
"title": "Build a Survey Form Project",
|
||||
"intro": ["placeholder", "holder of place"]
|
||||
},
|
||||
"build-a-technical-documentation-page-project": {
|
||||
"title": "Build a Technical Documentation Page Project",
|
||||
"intro": ["placeholder", "holder of place"]
|
||||
},
|
||||
"learn-html-by-building-a-cat-photo-app": {
|
||||
"title": "Learn HTML by Building a Cat Photo App",
|
||||
"intro": ["", ""]
|
||||
"intro": [
|
||||
"HTML tags give a webpage its structure. You can use HTML tags to add photos, buttons, and other elements to your webpage.",
|
||||
"In this course, you'll learn the most common HTML tags by building your own cat photo app."
|
||||
]
|
||||
},
|
||||
"learn-basic-css-by-building-a-cafe-menu": {
|
||||
"title": "Learn Basic CSS by Building a Cafe Menu",
|
||||
"intro": ["", ""]
|
||||
"intro": [
|
||||
"CSS tells the browser how to display your webpage. You can use CSS to set the color, font, size, and other aspects of HTML elements.",
|
||||
"In this course, you'll learn CSS by designing a menu page for a cafe webpage."
|
||||
]
|
||||
},
|
||||
"learn-the-css-box-model-by-building-a-rothko-painting": {
|
||||
"title": "Learn the CSS Box Model by Building a Rothko Painting",
|
||||
"intro": [
|
||||
"Mark Rothko was known for his abstract style of painting. Rothko paintings commonly depicted rectangular regions of color in varying sizes.",
|
||||
"In this lesson, you will be using CSS to create your own painting in Rothko's style. You will use many of the skills you have already been practicing, as well as new CSS tool such as blur and transform."
|
||||
"Every HTML element is its own box – with its own spacing and a border. This is called the Box Model.",
|
||||
"In this course, you'll use CSS and the Box Model to create your own Rothko-style rectangular art pieces."
|
||||
]
|
||||
},
|
||||
"learn-css-variables-by-building-a-city-skyline": {
|
||||
"title": "Learn CSS Variables by Building a City Skyline",
|
||||
"intro": ["", ""]
|
||||
"intro": [
|
||||
"CSS variables help you organize your styles and reuse them.",
|
||||
"In this course, you'll build a city skyline. You'll learn how to configure CSS variables so you can reuse them whenever you want."
|
||||
]
|
||||
},
|
||||
"learn-html-forms-by-building-a-registration-form": {
|
||||
"title": "Learn HTML Forms by Building a Registration Form",
|
||||
"intro": [
|
||||
"You can use HTML forms to collect information from people who visit your webpage.",
|
||||
"In this course, you'll learn HTML forms by building a signup page. You'll learn how to control what types of data people can type into your form, and some new CSS tools for styling your page."
|
||||
]
|
||||
},
|
||||
"learn-html-forms-by-building-a-registration-form": { "title": "Learn HTML Forms by Building a Registration Form", "intro": ["", ""] },
|
||||
"learn-accessibility-by-building-a-quiz": {
|
||||
"title": "Learn Accessibility by Building a Quiz",
|
||||
"intro": ["", ""]
|
||||
"intro": [
|
||||
"Accessibility is making your webpage easy for all people to use – even people with disabilities.",
|
||||
"In this course, you'll build a quiz webpage. You'll learn accessibility tools such as keyboard shortcuts, ARIA attributes, and design best practices."
|
||||
]
|
||||
},
|
||||
"learn-intermediate-css-by-building-a-picasso-painting": {
|
||||
"title": "Learn Intermediate CSS by Building a Picasso Painting",
|
||||
"intro": [
|
||||
"Pablo Picasso was known for his Cubism style of painting, a style recognized by representations of objects broken down and reassembled from multiple perspectives. Picasso's paintings are often highly abstract and thought provoking.",
|
||||
"In this course, you will use CSS to create your own painting in the style of Picasso. You will learn about FontAwesome SVG icons, CSS positioning, and reinforce the skills you have already been learning."
|
||||
"In this course, you'll use learn some intermediate CSS techniques by coding your own Picasso painting webpage. You'll learn about SVG icons, CSS positioning, and review other CSS skills you've learned."
|
||||
]
|
||||
},
|
||||
"learn-responsive-web-design-by-building-a-piano": {
|
||||
"title": "Learn Responsive Web Design by Building a Piano",
|
||||
"intro": [
|
||||
"Responsive Design tells your webpage how it should look on different-sized screens.",
|
||||
"In this course, you'll use CSS and Responsive Design to code a piano. You'll also learn more about media queries and pseudo selectors."
|
||||
]
|
||||
},
|
||||
"learn-css-flexbox-by-building-a-photo-gallery": {
|
||||
"title": "Learn CSS Flexbox by Building a Photo Gallery",
|
||||
"intro": [
|
||||
"Flexbox helps you design your webpage so that it looks good on any screen size.",
|
||||
"In this course, you'll use Flexbox to build a responsive photo gallery webpage."
|
||||
]
|
||||
},
|
||||
"learn-css-grid-by-building-a-magazine": {
|
||||
"title": "Learn CSS Grid by Building a Magazine",
|
||||
"intro": [
|
||||
"CSS Grid gives you control over the rows and columns of your webpage design.",
|
||||
"In this course, you'll build a magazine article. You'll learn how to use CSS Grid, including concepts like grid rows and grid columns."
|
||||
]
|
||||
},
|
||||
"learn-responsive-web-design-by-building-a-piano": { "title": "Learn Responsive Web Design by Building a Piano", "intro": ["", ""] },
|
||||
"learn-css-flexbox-by-building-a-photo-gallery": { "title": "Learn CSS Flexbox by Building a Photo Gallery", "intro": ["", ""] },
|
||||
"learn-css-grid-by-building-a-magazine": { "title": "Learn CSS Grid by Building a Magazine", "intro": ["", ""] },
|
||||
"learn-typography-by-building-a-nutrition-label": {
|
||||
"title": "Learn Typography by Building a Nutrition Label",
|
||||
"intro": ["", ""]
|
||||
"intro": [
|
||||
"Typography is the art of styling your text to be easily readable and suit its purpose.",
|
||||
"In this course, you'll use typography to build a nutrition label webpage. You'll learn how to style text, adjust line height, and position your text using CSS."
|
||||
]
|
||||
},
|
||||
"learn-css-transforms-by-building-a-penguin": { "title": "Learn CSS Transforms by Building a Penguin", "intro": ["", ""] },
|
||||
"learn-css-animation-by-building-a-ferris-wheel": { "title": "Learn CSS Animation by Building a Ferris Wheel", "intro": ["", ""] },
|
||||
"learn-css-animation-by-building-a-ferris-wheel": { "title": "Learn CSS Animation by Building a Ferris Wheel", "intro": [
|
||||
"You can use CSS animation to draw attention to specific sections of your webpage and make it more engaging.",
|
||||
"In this course, you'll build a Ferris wheel. You'll learn how to use CSS to animate elements, transform them, and adjust their speed."
|
||||
] },
|
||||
"learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": { "title": "Learn More About CSS Pseudo Selectors By Building A Balance Sheet", "intro": ["", ""] }
|
||||
}
|
||||
},
|
||||
@ -560,7 +632,11 @@
|
||||
"browse-other": "Browse our other free certifications\n(we recommend doing these in order)",
|
||||
"courses": "Courses",
|
||||
"steps": "Steps",
|
||||
"expand": "Expand",
|
||||
"collapse": "Collapse",
|
||||
"expand": "Expand courses",
|
||||
"collapse": "Collapse courses"
|
||||
"collapse": "Collapse courses",
|
||||
"legacy-header": "Legacy Courses",
|
||||
"legacy-desc": "These courses are no longer part of the certification path, but are still available for you to further your learning."
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Back End Development and APIs
|
||||
superBlock: back-end-development-and-apis
|
||||
certification: back-end-development-and-apis
|
||||
---
|
||||
|
||||
## Introduction to Back End Development and APIs
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Coding Interview Prep
|
||||
superBlock: coding-interview-prep
|
||||
certification: coding-interview-prep
|
||||
---
|
||||
|
||||
## Introduction to Coding Interview Prep
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Data Analysis with Python
|
||||
superBlock: data-analysis-with-python
|
||||
certification: data-analysis-with-python
|
||||
---
|
||||
|
||||
## Introduction to Data Analysis with Python
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Data Visualization
|
||||
superBlock: data-visualization
|
||||
certification: data-visualization
|
||||
---
|
||||
|
||||
## Introduction to Data Visualization
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Front End Development Libraries
|
||||
superBlock: front-end-development-libraries
|
||||
certification: front-end-development-libraries
|
||||
---
|
||||
|
||||
## Introduction to Front End Development Libraries
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Information Security
|
||||
superBlock: information-security
|
||||
certification: information-security
|
||||
---
|
||||
|
||||
## Introduction to Information Security
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: JavaScript Algorithms and Data Structures
|
||||
superBlock: javascript-algorithms-and-data-structures
|
||||
certification: javascript-algorithms-and-data-structures
|
||||
---
|
||||
|
||||
## Introduction to JavaScript Algorithms and Data Structures
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Machine Learning with Python
|
||||
superBlock: machine-learning-with-python
|
||||
certification: machine-learning-with-python
|
||||
---
|
||||
|
||||
## Introduction to Machine Learning with Python
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Quality Assurance
|
||||
superBlock: quality-assurance
|
||||
certification: quality-assurance
|
||||
---
|
||||
|
||||
## Introduction to Quality Assurance
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Relational Databases
|
||||
superBlock: relational-databases
|
||||
certification: relational-databases
|
||||
---
|
||||
|
||||
## Introduction to Relational Databases
|
||||
|
||||
20
client/src/pages/learn/responsive-web-design-22/index.md
Normal file
20
client/src/pages/learn/responsive-web-design-22/index.md
Normal file
@ -0,0 +1,20 @@
|
||||
---
|
||||
title: Responsive Web Design
|
||||
superBlock: responsive-web-design-22
|
||||
certification: responsive-web-design
|
||||
---
|
||||
|
||||
## Introduction to Responsive Web Design
|
||||
|
||||
Welcome to Responsive Web Design!
|
||||
|
||||
Let's first take a look at what is in the scope of Responsive Web Design (and what is not).
|
||||
The Web part of Responsive Web Design means that the content you are creating is designed to be delivered over the web to users' browsers. To do this, you will need to learn the language that browsers use to describe web pages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.
|
||||
|
||||
That brings us to design. Web Design focuses on how websites should look and behave to the end user. There are plenty of additional aspects to websites, including how to host a website so people can access it, how to protect your websites and store your users' data, and the ethos behind what should go on a website in the first place. These are somewhat harder to teach, but do require a good understanding of the capabilities of the web in modern contexts.
|
||||
|
||||
And what of the word Responsive? Well, that brings us to the idea of modern contexts. In today's world, websites are expected to be just as accessible on laptops, tablets and phones. If you compare your user experience on a document-editing program on a computer versus a document-editing program on a mobile, the features on mobile are likely to be far more constrained. This applies in some way to websites as well, but developers have found interesting ways to adapt to the mobile experience, not in the least by harnessing powerful features built for flexible (a.k.a responsive) web displays such as CSS `flexbox` and CSS `grid`.
|
||||
|
||||
Ready to learn about good design practices for the web? Let's get started!
|
||||
|
||||
[Begin Course](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/)
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Responsive Web Design
|
||||
superBlock: responsive-web-design
|
||||
certification: responsive-web-design
|
||||
---
|
||||
|
||||
## Introduction to Responsive Web Design
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Scientific Computing with Python
|
||||
superBlock: scientific-computing-with-python
|
||||
certification: scientific-computing-with-python
|
||||
---
|
||||
|
||||
## Introduction to Scientific Computing with Python
|
||||
|
||||
@ -86,6 +86,8 @@ export type MarkdownRemark = {
|
||||
block: string;
|
||||
isBeta: boolean;
|
||||
superBlock: SuperBlocks;
|
||||
// TODO: make enum like superBlock
|
||||
certification: string;
|
||||
title: typeof certMap[number]['title'];
|
||||
};
|
||||
headings: [
|
||||
@ -130,6 +132,7 @@ export interface VideoLocaleIds {
|
||||
export type ChallengeNode = {
|
||||
challenge: {
|
||||
block: string;
|
||||
certification: string;
|
||||
challengeOrder: number;
|
||||
challengeType: number;
|
||||
dashedName: string;
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
import { SuperBlocks } from '../../../config/certification-settings';
|
||||
import envData from '../../../config/env.json';
|
||||
|
||||
const { showNewCurriculum } = envData;
|
||||
|
||||
const responsiveWebBase =
|
||||
'/learn/responsive-web-design/responsive-web-design-projects';
|
||||
const responsiveWeb22Base = '/learn/responsive-web-design-22';
|
||||
const jsAlgoBase =
|
||||
'/learn/javascript-algorithms-and-data-structures/' +
|
||||
'javascript-algorithms-and-data-structures-projects';
|
||||
@ -294,38 +298,50 @@ const certMap = [
|
||||
certSlug: SuperBlocks.RespWebDesign,
|
||||
flag: 'isRespWebDesignCert',
|
||||
projects: [
|
||||
{
|
||||
id: 'bd7158d8c442eddfaeb5bd18',
|
||||
title: 'Build a Tribute Page',
|
||||
link: `${responsiveWebBase}/build-a-tribute-page`,
|
||||
certSlug: SuperBlocks.RespWebDesign
|
||||
},
|
||||
{
|
||||
id: '587d78af367417b2b2512b03',
|
||||
title: 'Build a Survey Form',
|
||||
link: `${responsiveWebBase}/build-a-survey-form`,
|
||||
link: getResponsiveWebDesignPath('build-a-survey-form', {
|
||||
showNewCurriculum
|
||||
}),
|
||||
certSlug: SuperBlocks.RespWebDesign
|
||||
},
|
||||
{
|
||||
id: '587d78af367417b2b2512b04',
|
||||
title: 'Build a Product Landing Page',
|
||||
link: `${responsiveWebBase}/build-a-product-landing-page`,
|
||||
id: 'bd7158d8c442eddfaeb5bd18',
|
||||
title: 'Build a Tribute Page',
|
||||
link: getResponsiveWebDesignPath('build-a-tribute-page', {
|
||||
showNewCurriculum
|
||||
}),
|
||||
certSlug: SuperBlocks.RespWebDesign
|
||||
},
|
||||
{
|
||||
id: '587d78b0367417b2b2512b05',
|
||||
title: 'Build a Technical Documentation Page',
|
||||
link: `${responsiveWebBase}/build-a-technical-documentation-page`,
|
||||
link: getResponsiveWebDesignPath(
|
||||
'build-a-technical-documentation-page',
|
||||
{ showNewCurriculum }
|
||||
),
|
||||
certSlug: SuperBlocks.RespWebDesign
|
||||
},
|
||||
{
|
||||
id: '587d78af367417b2b2512b04',
|
||||
title: 'Build a Product Landing Page',
|
||||
link: getResponsiveWebDesignPath('build-a-product-landing-page', {
|
||||
showNewCurriculum
|
||||
}),
|
||||
certSlug: SuperBlocks.RespWebDesign
|
||||
},
|
||||
{
|
||||
id: 'bd7158d8c242eddfaeb5bd13',
|
||||
title: 'Build a Personal Portfolio Webpage',
|
||||
link: `${responsiveWebBase}/build-a-personal-portfolio-webpage`,
|
||||
link: getResponsiveWebDesignPath('build-a-personal-portfolio-webpage', {
|
||||
showNewCurriculum
|
||||
}),
|
||||
certSlug: SuperBlocks.RespWebDesign
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
id: '561abd10cb81ac38a17513bc',
|
||||
title: 'JavaScript Algorithms and Data Structures',
|
||||
@ -709,6 +725,15 @@ const certMap = [
|
||||
}
|
||||
] as const;
|
||||
|
||||
function getResponsiveWebDesignPath(
|
||||
project: string,
|
||||
{ showNewCurriculum }: { showNewCurriculum: boolean }
|
||||
) {
|
||||
return showNewCurriculum
|
||||
? `${responsiveWeb22Base}/${project}-project/${project}`
|
||||
: `${responsiveWebBase}/${project}/`;
|
||||
}
|
||||
|
||||
const titles = certMap.map(({ title }) => title);
|
||||
type Title = typeof titles[number];
|
||||
const legacyProjectMap: Partial<Record<Title, unknown>> = {};
|
||||
|
||||
@ -2,15 +2,13 @@ import { first } from 'lodash-es';
|
||||
import React, { useState, ReactElement } from 'react';
|
||||
import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
|
||||
import { sortChallengeFiles } from '../../../../../utils/sort-challengefiles';
|
||||
import envData from '../../../../../config/env.json';
|
||||
import {
|
||||
ChallengeFile,
|
||||
ChallengeFiles,
|
||||
ResizeProps
|
||||
} from '../../../redux/prop-types';
|
||||
import ActionRow from './action-row';
|
||||
|
||||
const { showUpcomingChanges } = envData;
|
||||
import EditorTabs from './editor-tabs';
|
||||
|
||||
type Pane = { flex: number };
|
||||
|
||||
@ -85,7 +83,7 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
|
||||
} = props;
|
||||
|
||||
const challengeFile = getChallengeFile();
|
||||
const projectBasedChallenge = showUpcomingChanges && hasEditableBoundaries;
|
||||
const projectBasedChallenge = hasEditableBoundaries;
|
||||
const displayPreview = projectBasedChallenge
|
||||
? showPreview && hasPreview
|
||||
: hasPreview;
|
||||
@ -124,6 +122,7 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
|
||||
)}
|
||||
|
||||
<ReflexElement flex={editorPane.flex} {...resizeProps}>
|
||||
{challengeFile && !hasEditableBoundaries && <EditorTabs />}
|
||||
{challengeFile && (
|
||||
<ReflexContainer
|
||||
key={challengeFile.fileKey}
|
||||
|
||||
@ -2,12 +2,9 @@ import { TabPane, Tabs } from '@freecodecamp/react-bootstrap';
|
||||
import i18next from 'i18next';
|
||||
import React, { Component, ReactElement } from 'react';
|
||||
|
||||
import envData from '../../../../../config/env.json';
|
||||
import ToolPanel from '../components/tool-panel';
|
||||
import EditorTabs from './editor-tabs';
|
||||
|
||||
const { showUpcomingChanges } = envData;
|
||||
|
||||
interface MobileLayoutProps {
|
||||
editor: JSX.Element | null;
|
||||
guideUrl: string;
|
||||
@ -70,7 +67,6 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
|
||||
|
||||
// Unlike the desktop layout the mobile version does not have an ActionRow,
|
||||
// but still needs a way to switch between the different tabs.
|
||||
const projectBasedChallenge = showUpcomingChanges && usesMultifileEditor;
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -93,7 +89,7 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
|
||||
title={i18next.t('learn.editor-tabs.code')}
|
||||
{...editorTabPaneProps}
|
||||
>
|
||||
{projectBasedChallenge && <EditorTabs />}
|
||||
{usesMultifileEditor && <EditorTabs />}
|
||||
{editor}
|
||||
</TabPane>
|
||||
<TabPane
|
||||
@ -103,7 +99,7 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
|
||||
>
|
||||
{testOutput}
|
||||
</TabPane>
|
||||
{hasNotes && projectBasedChallenge && (
|
||||
{hasNotes && usesMultifileEditor && (
|
||||
<TabPane
|
||||
eventKey={Tab.Notes}
|
||||
title={i18next.t('learn.editor-tabs.notes')}
|
||||
|
||||
@ -409,6 +409,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
|
||||
forumTopicId,
|
||||
hasEditableBoundaries,
|
||||
superBlock,
|
||||
certification,
|
||||
title,
|
||||
usesMultifileEditor,
|
||||
notes
|
||||
@ -474,6 +475,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
|
||||
<CompletionModal
|
||||
block={block}
|
||||
blockName={blockName}
|
||||
certification={certification}
|
||||
superBlock={superBlock}
|
||||
/>
|
||||
<HelpModal />
|
||||
@ -508,6 +510,7 @@ export const query = graphql`
|
||||
helpCategory
|
||||
videoUrl
|
||||
superBlock
|
||||
certification
|
||||
translationPending
|
||||
forumTopicId
|
||||
fields {
|
||||
|
||||
@ -10,6 +10,7 @@ import { Dispatch } from 'redux';
|
||||
import { createSelector } from 'reselect';
|
||||
|
||||
import { dasherize } from '../../../../../utils/slugs';
|
||||
import { isProject } from '../../../../utils/challenge-types';
|
||||
import Login from '../../../components/Header/components/Login';
|
||||
import {
|
||||
isSignedInSelector,
|
||||
@ -40,7 +41,11 @@ const mapStateToProps = createSelector(
|
||||
successMessageSelector,
|
||||
(
|
||||
challengeFiles: ChallengeFiles,
|
||||
{ title, id }: { title: string; id: string },
|
||||
{
|
||||
title,
|
||||
id,
|
||||
challengeType
|
||||
}: { title: string; id: string; challengeType: number },
|
||||
completedChallengesIds: string[],
|
||||
isOpen: boolean,
|
||||
isSignedIn: boolean,
|
||||
@ -49,6 +54,7 @@ const mapStateToProps = createSelector(
|
||||
challengeFiles,
|
||||
title,
|
||||
id,
|
||||
challengeType,
|
||||
completedChallengesIds,
|
||||
isOpen,
|
||||
isSignedIn,
|
||||
@ -94,6 +100,8 @@ interface CompletionModalsProps {
|
||||
allowBlockDonationRequests: (arg0: string) => void;
|
||||
block: string;
|
||||
blockName: string;
|
||||
certification: string;
|
||||
challengeType: number;
|
||||
close: () => void;
|
||||
completedChallengesIds: string[];
|
||||
currentBlockIds?: string[];
|
||||
@ -275,10 +283,30 @@ export class CompletionModalInner extends Component<
|
||||
}
|
||||
}
|
||||
|
||||
const useCurrentBlockIds = (blockName: string) => {
|
||||
interface Options {
|
||||
isCertificationBlock: boolean;
|
||||
}
|
||||
|
||||
interface CertificateNode {
|
||||
challenge: {
|
||||
// TODO: use enum
|
||||
certification: string;
|
||||
tests: { id: string }[];
|
||||
};
|
||||
}
|
||||
|
||||
const useCurrentBlockIds = (
|
||||
block: string,
|
||||
certification: string,
|
||||
options?: Options
|
||||
) => {
|
||||
const {
|
||||
allChallengeNode: { edges }
|
||||
}: { allChallengeNode: AllChallengeNode } = useStaticQuery(graphql`
|
||||
allChallengeNode: { edges: challengeEdges },
|
||||
allCertificateNode: { nodes: certificateNodes }
|
||||
}: {
|
||||
allChallengeNode: AllChallengeNode;
|
||||
allCertificateNode: { nodes: CertificateNode[] };
|
||||
} = useStaticQuery(graphql`
|
||||
query getCurrentBlockNodes {
|
||||
allChallengeNode(
|
||||
sort: {
|
||||
@ -292,9 +320,17 @@ const useCurrentBlockIds = (blockName: string) => {
|
||||
edges {
|
||||
node {
|
||||
challenge {
|
||||
fields {
|
||||
blockName
|
||||
block
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
allCertificateNode {
|
||||
nodes {
|
||||
challenge {
|
||||
certification
|
||||
tests {
|
||||
id
|
||||
}
|
||||
}
|
||||
@ -303,16 +339,27 @@ const useCurrentBlockIds = (blockName: string) => {
|
||||
}
|
||||
`);
|
||||
|
||||
const currentBlockIds = edges
|
||||
.filter(edge => edge.node.challenge.fields.blockName === blockName)
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
|
||||
const currentCertificateIds = certificateNodes
|
||||
.filter(
|
||||
node => dasherize(node.challenge.certification) === certification
|
||||
)[0]
|
||||
?.challenge.tests.map(test => test.id);
|
||||
const currentBlockIds = challengeEdges
|
||||
.filter(edge => edge.node.challenge.block === block)
|
||||
.map(edge => edge.node.challenge.id);
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
|
||||
return currentBlockIds;
|
||||
|
||||
return options?.isCertificationBlock
|
||||
? currentCertificateIds
|
||||
: currentBlockIds;
|
||||
};
|
||||
|
||||
const CompletionModal = (props: CompletionModalsProps) => {
|
||||
const currentBlockIds = useCurrentBlockIds(props.blockName || '');
|
||||
const currentBlockIds = useCurrentBlockIds(
|
||||
props.block || '',
|
||||
props.certification || '',
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
|
||||
{ isCertificationBlock: isProject(props.challengeType) }
|
||||
);
|
||||
return <CompletionModalInner currentBlockIds={currentBlockIds} {...props} />;
|
||||
};
|
||||
|
||||
|
||||
@ -196,6 +196,7 @@ class BackEnd extends Component<BackEndProps> {
|
||||
description,
|
||||
instructions,
|
||||
translationPending,
|
||||
certification,
|
||||
superBlock,
|
||||
block
|
||||
}
|
||||
@ -266,6 +267,7 @@ class BackEnd extends Component<BackEndProps> {
|
||||
<CompletionModal
|
||||
block={block}
|
||||
blockName={blockName}
|
||||
certification={certification}
|
||||
superBlock={superBlock}
|
||||
/>
|
||||
<HelpModal />
|
||||
@ -294,6 +296,7 @@ export const query = graphql`
|
||||
instructions
|
||||
challengeType
|
||||
helpCategory
|
||||
certification
|
||||
superBlock
|
||||
block
|
||||
translationPending
|
||||
|
||||
@ -144,6 +144,7 @@ class Project extends Component<ProjectProps> {
|
||||
description,
|
||||
instructions,
|
||||
superBlock,
|
||||
certification,
|
||||
block,
|
||||
translationPending
|
||||
}
|
||||
@ -203,6 +204,7 @@ class Project extends Component<ProjectProps> {
|
||||
<CompletionModal
|
||||
block={block}
|
||||
blockName={blockName}
|
||||
certification={certification}
|
||||
superBlock={superBlock}
|
||||
/>
|
||||
<HelpModal />
|
||||
@ -232,6 +234,7 @@ export const query = graphql`
|
||||
challengeType
|
||||
helpCategory
|
||||
superBlock
|
||||
certification
|
||||
block
|
||||
translationPending
|
||||
fields {
|
||||
|
||||
@ -146,7 +146,8 @@ export default function completionEpic(action$, state$) {
|
||||
switchMap(({ type }) => {
|
||||
const state = state$.value;
|
||||
const meta = challengeMetaSelector(state);
|
||||
const { nextChallengePath, challengeType, superBlock } = meta;
|
||||
const { nextChallengePath, challengeType, superBlock, certification } =
|
||||
meta;
|
||||
const closeChallengeModal = of(closeModal('completion'));
|
||||
|
||||
let submitter = () => of({ type: 'no-user-signed-in' });
|
||||
@ -165,6 +166,7 @@ export default function completionEpic(action$, state$) {
|
||||
|
||||
const pathToNavigateTo = async () => {
|
||||
return await findPathToNavigateTo(
|
||||
certification,
|
||||
nextChallengePath,
|
||||
superBlock,
|
||||
state,
|
||||
@ -182,6 +184,7 @@ export default function completionEpic(action$, state$) {
|
||||
}
|
||||
|
||||
async function findPathToNavigateTo(
|
||||
certification,
|
||||
nextChallengePath,
|
||||
superBlock,
|
||||
state,
|
||||
@ -196,7 +199,7 @@ async function findPathToNavigateTo(
|
||||
if (isProjectSubmission) {
|
||||
const username = usernameSelector(state);
|
||||
try {
|
||||
const response = await getVerifyCanClaimCert(username, superBlock);
|
||||
const response = await getVerifyCanClaimCert(username, certification);
|
||||
if (response.status === 200) {
|
||||
canClaimCert = response.data?.response?.message === 'can-claim-cert';
|
||||
}
|
||||
|
||||
@ -180,6 +180,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
|
||||
title,
|
||||
description,
|
||||
superBlock,
|
||||
certification,
|
||||
block,
|
||||
translationPending,
|
||||
videoId,
|
||||
@ -302,6 +303,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
|
||||
<CompletionModal
|
||||
block={block}
|
||||
blockName={blockName}
|
||||
certification={certification}
|
||||
superBlock={superBlock}
|
||||
/>
|
||||
</Row>
|
||||
@ -339,6 +341,7 @@ export const query = graphql`
|
||||
challengeType
|
||||
helpCategory
|
||||
superBlock
|
||||
certification
|
||||
block
|
||||
fields {
|
||||
blockName
|
||||
|
||||
@ -23,6 +23,8 @@ import { getVerifyCanClaimCert } from '../../../utils/ajax';
|
||||
import CertificationCard from './certification-card';
|
||||
|
||||
interface CertChallengeProps {
|
||||
// TODO: create enum/reuse SuperBlocks enum somehow
|
||||
certification: string;
|
||||
createFlashMessage: typeof createFlashMessage;
|
||||
fetchState: {
|
||||
pending: boolean;
|
||||
@ -63,6 +65,7 @@ const mapDispatchToProps = {
|
||||
};
|
||||
|
||||
const CertChallenge = ({
|
||||
certification,
|
||||
createFlashMessage,
|
||||
steps = {},
|
||||
superBlock,
|
||||
@ -90,7 +93,7 @@ const CertChallenge = ({
|
||||
if (username) {
|
||||
void (async () => {
|
||||
try {
|
||||
const data = await getVerifyCanClaimCert(username, superBlock);
|
||||
const data = await getVerifyCanClaimCert(username, certification);
|
||||
if (data?.message) {
|
||||
setCanClaimCert(false);
|
||||
createFlashMessage(data.message);
|
||||
|
||||
@ -162,7 +162,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
|
||||
const {
|
||||
data: {
|
||||
markdownRemark: {
|
||||
frontmatter: { superBlock, title }
|
||||
frontmatter: { superBlock, title, certification }
|
||||
},
|
||||
allChallengeNode: { edges }
|
||||
},
|
||||
@ -176,6 +176,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
|
||||
const blockDashedNames = uniq(
|
||||
nodesForSuperBlock.map(({ challenge: { block } }) => block)
|
||||
);
|
||||
|
||||
const i18nSuperBlock = t(`intro:${superBlock}.title`);
|
||||
const i18nTitle =
|
||||
superBlock === SuperBlocks.CodingInterviewPrep
|
||||
@ -184,6 +185,8 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
|
||||
cert: i18nSuperBlock
|
||||
});
|
||||
|
||||
const defaultCurriculumNames = blockDashedNames;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
@ -203,7 +206,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
|
||||
</h2>
|
||||
<Spacer />
|
||||
<div className='block-ui'>
|
||||
{blockDashedNames.map(blockDashedName => (
|
||||
{defaultCurriculumNames.map(blockDashedName => (
|
||||
<Fragment key={blockDashedName}>
|
||||
<Block
|
||||
blockDashedName={blockDashedName}
|
||||
@ -218,6 +221,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
|
||||
{superBlock !== SuperBlocks.CodingInterviewPrep && (
|
||||
<div>
|
||||
<CertChallenge
|
||||
certification={certification}
|
||||
superBlock={superBlock}
|
||||
title={title}
|
||||
user={user}
|
||||
@ -260,6 +264,7 @@ export const query = graphql`
|
||||
query SuperBlockIntroPageBySlug($slug: String!, $superBlock: String!) {
|
||||
markdownRemark(fields: { slug: { eq: $slug } }) {
|
||||
frontmatter {
|
||||
certification
|
||||
superBlock
|
||||
title
|
||||
}
|
||||
|
||||
@ -178,10 +178,10 @@ export interface GetVerifyCanClaimCert {
|
||||
|
||||
export function getVerifyCanClaimCert(
|
||||
username: string,
|
||||
superBlock: string
|
||||
certification: string
|
||||
): Promise<GetVerifyCanClaimCert> {
|
||||
return get(
|
||||
`/certificate/verify-can-claim-cert?username=${username}&superBlock=${superBlock}`
|
||||
`/certificate/verify-can-claim-cert?username=${username}&superBlock=${certification}`
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -36,6 +36,18 @@ exports.challengeTypes = {
|
||||
codeally
|
||||
};
|
||||
|
||||
// (Oliver) I don't think we need this for codeally projects, so they're ignored
|
||||
// here
|
||||
exports.isProject = challengeType => {
|
||||
if (typeof challengeType !== 'number')
|
||||
throw Error('challengeType must be a number');
|
||||
return (
|
||||
challengeType === frontEndProject ||
|
||||
challengeType === backEndProject ||
|
||||
challengeType === pythonProject
|
||||
);
|
||||
};
|
||||
|
||||
// turn challengeType to file ext
|
||||
exports.pathsMap = {
|
||||
[html]: 'html',
|
||||
|
||||
@ -60,6 +60,7 @@ function getTemplateComponent(challengeType) {
|
||||
exports.createChallengePages = function (createPage) {
|
||||
return function ({ node: { challenge } }, index, allChallengeEdges) {
|
||||
const {
|
||||
certification,
|
||||
superBlock,
|
||||
block,
|
||||
fields: { slug },
|
||||
@ -76,6 +77,7 @@ exports.createChallengePages = function (createPage) {
|
||||
component: getTemplateComponent(challengeType),
|
||||
context: {
|
||||
challengeMeta: {
|
||||
certification,
|
||||
superBlock,
|
||||
block,
|
||||
template,
|
||||
@ -152,13 +154,23 @@ exports.createSuperBlockIntroPages = function (createPage) {
|
||||
return function (edge) {
|
||||
const {
|
||||
fields: { slug },
|
||||
frontmatter: { superBlock }
|
||||
frontmatter: { superBlock, certification }
|
||||
} = edge.node;
|
||||
|
||||
if (!certification) {
|
||||
throw Error(
|
||||
`superBlockIntro page, '${superBlock}' must have certification in frontmatter`
|
||||
);
|
||||
}
|
||||
|
||||
// TODO: throw if it encounters an unknown certification. Also, handle
|
||||
// coding-interview-prep. it's not a certification, but it is a superBlock.
|
||||
|
||||
createPage({
|
||||
path: slug,
|
||||
component: superBlockIntro,
|
||||
context: {
|
||||
certification,
|
||||
superBlock,
|
||||
slug
|
||||
}
|
||||
|
||||
@ -85,5 +85,10 @@
|
||||
"learn-css-grid-by-building-a-magazine": "HTML-CSS",
|
||||
"learn-css-transforms-by-building-a-penguin": "HTML-CSS",
|
||||
"learn-typography-by-building-a-nutrition-label": "HTML-CSS",
|
||||
"learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": "HTML-CSS"
|
||||
"learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": "HTML-CSS",
|
||||
"build-a-personal-portfolio-webpage-project": "HTML-CSS",
|
||||
"build-a-product-landing-page-project": "HTML-CSS",
|
||||
"build-a-survey-form-project": "HTML-CSS",
|
||||
"build-a-technical-documentation-page-project": "HTML-CSS",
|
||||
"build-a-tribute-page-project": "HTML-CSS"
|
||||
}
|
||||
|
||||
@ -113,7 +113,11 @@ export const superBlockCertTypeMap = {
|
||||
[SuperBlocks.SciCompPy]: certTypes.sciCompPyV7,
|
||||
[SuperBlocks.DataAnalysisPy]: certTypes.dataAnalysisPyV7,
|
||||
[SuperBlocks.MachineLearningPy]: certTypes.machineLearningPyV7,
|
||||
[SuperBlocks.RelationalDb]: certTypes.relationalDatabasesV8
|
||||
[SuperBlocks.RelationalDb]: certTypes.relationalDatabasesV8,
|
||||
|
||||
// post-modern
|
||||
// TODO: use enum
|
||||
'responsive-web-design-22': certTypes.respWebDesign
|
||||
};
|
||||
|
||||
export const certTypeIdMap = {
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "Build a Personal Portfolio Webpage Project",
|
||||
"isUpcomingChange": false,
|
||||
"order": 19,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"challengeOrder": [
|
||||
[
|
||||
"bd7158d8c242eddfaeb5bd13",
|
||||
"Build a Personal Portfolio Webpage"
|
||||
]
|
||||
]}
|
||||
@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "Build a Product Landing Page Project",
|
||||
"isUpcomingChange": false,
|
||||
"order": 16,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"challengeOrder": [
|
||||
[
|
||||
"587d78af367417b2b2512b04",
|
||||
"Build a Product Landing Page"
|
||||
]
|
||||
]}
|
||||
@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "Build a Survey Form Project",
|
||||
"isUpcomingChange": false,
|
||||
"order": 4,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"challengeOrder": [
|
||||
[
|
||||
"587d78af367417b2b2512b03",
|
||||
"Build a Survey Form"
|
||||
]
|
||||
]}
|
||||
@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "Build a Technical Documentation Page Project",
|
||||
"isUpcomingChange": false,
|
||||
"order": 13,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"challengeOrder": [
|
||||
[
|
||||
"587d78b0367417b2b2512b05",
|
||||
"Build a Technical Documentation Page"
|
||||
]
|
||||
]}
|
||||
@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "Build a Tribute Page Project",
|
||||
"isUpcomingChange": false,
|
||||
"order": 9,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"challengeOrder": [
|
||||
[
|
||||
"bd7158d8c442eddfaeb5bd18",
|
||||
"Build a Tribute Page"
|
||||
]
|
||||
]}
|
||||
@ -1,15 +1,14 @@
|
||||
{
|
||||
"name": "Learn Accessibility by Building a Quiz",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-accessibility-by-building-a-quiz",
|
||||
"order": 42,
|
||||
"order": 8,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"614ccc21ea91ef1736b9b578",
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "Learn Basic CSS by Building a Cafe Menu",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-basic-css-by-building-a-cafe-menu",
|
||||
"order": 10,
|
||||
"order": 1,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
{
|
||||
"name": "Learn CSS Animation by Building a Ferris Wheel",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-css-animation-by-building-a-ferris-wheel",
|
||||
"order": 15,
|
||||
"order": 18,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"6140c7e645d8e905819f1dd4",
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
{
|
||||
"name": "Learn CSS Flexbox by Building a Photo Gallery",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-css-flexbox-by-building-a-photo-gallery",
|
||||
"order": 20,
|
||||
"order": 6,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"61537485c4f2a624f18d7794",
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
{
|
||||
"name": "Learn CSS Grid by Building a Magazine",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-css-grid-by-building-a-magazine",
|
||||
"order": 16,
|
||||
"order": 15,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"61437d575fb98f57fa8f7f36",
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
{
|
||||
"name": "Learn CSS Transforms by Building a Penguin",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-css-transforms-by-building-a-penguin",
|
||||
"order": 47,
|
||||
"order": 17,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"619665c9abd72906f3ad30f9",
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "Learn CSS Variables by Building a City Skyline",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-css-variables-by-building-a-city-skyline",
|
||||
"order": 8,
|
||||
"order": 14,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
{
|
||||
"name": "Learn HTML by Building a Cat Photo App",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-html-by-building-a-cat-photo-app",
|
||||
"order": 9,
|
||||
"order": 0,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"5dc174fcf86c76b9248c6eb2",
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
{
|
||||
"name": "Learn HTML Forms by Building a Registration Form",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-html-forms-by-building-a-registration-form",
|
||||
"order": 23,
|
||||
"order": 3,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"60eebd07ea685b0e777b5583",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "Learn Intermediate CSS by Building a Picasso Painting",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-intermediate-css-by-building-a-picasso-painting",
|
||||
@ -9,7 +9,6 @@
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"60b69a66b6ddb80858c51578",
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
{
|
||||
"name": "Learn More About CSS Pseudo Selectors By Building A Balance Sheet",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet",
|
||||
"order": 43,
|
||||
"order": 10,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"6193d8081ec2531581ea7b98",
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
{
|
||||
"name": "Learn Responsive Web Design by Building a Piano",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-responsive-web-design-by-building-a-piano",
|
||||
"order": 13,
|
||||
"order": 12,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"612e6afc009b450a437940a1",
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
{
|
||||
"name": "Learn the CSS Box Model by Building a Rothko Painting",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-the-css-box-model-by-building-a-rothko-painting",
|
||||
"order": 12,
|
||||
"order": 5,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"60a3e3396c7b40068ad6996a",
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
{
|
||||
"name": "Learn Typography by Building a Nutrition Label",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-typography-by-building-a-nutrition-label",
|
||||
"order": 25,
|
||||
"order": 7,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"615f2abbe7d18d49a1e0e1c8",
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
id: 561add10cb82ac38a17523bc
|
||||
title: Back End Development and APIs Certification
|
||||
certification: back-end-development-and-apis
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
id: 5e46fc95ac417301a38fb934
|
||||
title: Data Analysis with Python Certification
|
||||
certification: data-analysis-with-python
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
id: 5a553ca864b52e1d8bceea14
|
||||
title: Data Visualization Certification
|
||||
certification: data-visualization
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
id: 561acd10cb82ac38a17513bc
|
||||
title: Front End Development Libraries Certification
|
||||
certification: front-end-development-libraries
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
id: 5e6021435ac9d0ecd8b94b00
|
||||
title: Information Security Certification
|
||||
certification: information-security
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
id: 561abd10cb81ac38a17513bc
|
||||
title: JavaScript Algorithms and Data Structures Certification
|
||||
certification: javascript-algorithms-and-data-structures
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
id: 660add10cb82ac38a17513be
|
||||
title: Legacy Back End Certification
|
||||
certification: legacy-back-end
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
id: 561add10cb82ac39a17513bc
|
||||
title: Legacy Data Visualization Certification
|
||||
certification: legacy-data-visualization
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
id: 561add10cb82ac38a17513be
|
||||
title: Legacy Front End Certification
|
||||
certification: legacy-front-end
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
id: 561add10cb82ac38a17213bd
|
||||
title: Legacy Full Stack Certification
|
||||
certification: legacy-full-stack
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
id: 561add10cb82ac38a17213bc
|
||||
title: Legacy Information Security and Quality Assurance Certification
|
||||
certification: legacy-information-security-and-quality-assurance
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
id: 5e46fc95ac417301a38fb935
|
||||
title: Machine Learning with Python Certification
|
||||
certification: machine-learning-with-python
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
id: 5e611829481575a52dc59c0e
|
||||
title: Quality Assurance Certification
|
||||
certification: quality-assurance
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
id: 606243f50267e718b1e755f4
|
||||
title: Relational Databases Certification
|
||||
certification: relational-databases
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
id: 561add10cb82ac38a17513bc
|
||||
title: Responsive Web Design Certification
|
||||
certification: responsive-web-design
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
id: 5e44431b903586ffb414c951
|
||||
title: Scientific Computing with Python Certification
|
||||
certification: scientific-computing-with-python
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -0,0 +1,47 @@
|
||||
---
|
||||
id: bd7158d8c242eddfaeb5bd13
|
||||
title: Build a Personal Portfolio Webpage
|
||||
challengeType: 3
|
||||
forumTopicId: 301143
|
||||
dashedName: build-a-personal-portfolio-webpage
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/zNBOYG>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
|
||||
You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
|
||||
|
||||
**User Story #1:** My portfolio should have a welcome section with an id of `welcome-section`.
|
||||
|
||||
**User Story #2:** The welcome section should have an `h1` element that contains text.
|
||||
|
||||
**User Story #3:** My portfolio should have a projects section with an id of `projects`.
|
||||
|
||||
**User Story #4:** The projects section should contain at least one element with a class of `project-tile` to hold a project.
|
||||
|
||||
**User Story #5:** The projects section should contain at least one link to a project.
|
||||
|
||||
**User Story #6:** My portfolio should have a navbar with an id of `navbar`.
|
||||
|
||||
**User Story #7:** The navbar should contain at least one link that I can click on to navigate to different sections of the page.
|
||||
|
||||
**User Story #8:** My portfolio should have a link with an id of `profile-link`, which opens my GitHub or FCC profile in a new tab.
|
||||
|
||||
**User Story #9:** My portfolio should have at least one media query.
|
||||
|
||||
**User Story #10:** The height of the welcome section should be equal to the height of the viewport.
|
||||
|
||||
**User Story #11:** The navbar should always be at the top of the viewport.
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
@ -0,0 +1,55 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b04
|
||||
title: Build a Product Landing Page
|
||||
challengeType: 3
|
||||
forumTopicId: 301144
|
||||
dashedName: build-a-product-landing-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/RKRbwL>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
|
||||
You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
|
||||
|
||||
**User Story #1:** My product landing page should have a `header` element with a corresponding `id="header"`.
|
||||
|
||||
**User Story #2:** I can see an image within the `header` element with a corresponding `id="header-img"`. A company logo would make a good image here.
|
||||
|
||||
**User Story #3:** Within the `#header` element I can see a `nav` element with a corresponding `id="nav-bar"`.
|
||||
|
||||
**User Story #4:** I can see at least three clickable elements inside the `nav` element, each with the class `nav-link`.
|
||||
|
||||
**User Story #5:** When I click a `.nav-link` button in the `nav` element, I am taken to the corresponding section of the landing page.
|
||||
|
||||
**User Story #6:** I can watch an embedded product video with `id="video"`.
|
||||
|
||||
**User Story #7:** My landing page has a `form` element with a corresponding `id="form"`.
|
||||
|
||||
**User Story #8:** Within the form, there is an `input` field with `id="email"` where I can enter an email address.
|
||||
|
||||
**User Story #9:** The `#email` input field should have placeholder text to let the user know what the field is for.
|
||||
|
||||
**User Story #10:** The `#email` input field uses HTML5 validation to confirm that the entered text is an email address.
|
||||
|
||||
**User Story #11:** Within the form, there is a submit `input` with a corresponding `id="submit"`.
|
||||
|
||||
**User Story #12:** When I click the `#submit` element, the email is submitted to a static page (use this mock URL: <https://www.freecodecamp.com/email-submit>).
|
||||
|
||||
**User Story #13:** The navbar should always be at the top of the viewport.
|
||||
|
||||
**User Story #14:** My product landing page should have at least one media query.
|
||||
|
||||
**User Story #15:** My product landing page should utilize CSS flexbox at least once.
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b03
|
||||
title: Build a Survey Form
|
||||
challengeType: 3
|
||||
forumTopicId: 301145
|
||||
dashedName: build-a-survey-form
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/VPaoNP>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
|
||||
You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
|
||||
|
||||
**User Story #1:** I can see a title with `id="title"` in H1 sized text.
|
||||
|
||||
**User Story #2:** I can see a short explanation with `id="description"` in P sized text.
|
||||
|
||||
**User Story #3:** I can see a `form` with `id="survey-form"`.
|
||||
|
||||
**User Story #4:** Inside the form element, I am required to enter my name in a field with `id="name"`.
|
||||
|
||||
**User Story #5:** Inside the form element, I am required to enter an email in a field with `id="email"`.
|
||||
|
||||
**User Story #6:** If I enter an email that is not formatted correctly, I will see an HTML5 validation error.
|
||||
|
||||
**User Story #7:** Inside the form, I can enter a number in a field with `id="number"`.
|
||||
|
||||
**User Story #8:** If I enter non-numbers in the number input, I will see an HTML5 validation error.
|
||||
|
||||
**User Story #9:** If I enter numbers outside the range of the number input, which are defined by the `min` and `max` attributes, I will see an HTML5 validation error.
|
||||
|
||||
**User Story #10:** For the name, email, and number input fields inside the form I can see corresponding labels that describe the purpose of each field with the following ids: `id="name-label"`, `id="email-label"`, and `id="number-label"`.
|
||||
|
||||
**User Story #11:** For the name, email, and number input fields, I can see placeholder text that gives me a description or instructions for each field.
|
||||
|
||||
**User Story #12:** Inside the form element, I can select an option from a dropdown that has a corresponding `id="dropdown"`.
|
||||
|
||||
**User Story #13:** Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the `name` attribute.
|
||||
|
||||
**User Story #14:** Inside the form element, I can select several fields from a series of checkboxes, each of which must have a `value` attribute.
|
||||
|
||||
**User Story #15:** Inside the form element, I am presented with a `textarea` at the end for additional comments.
|
||||
|
||||
**User Story #16:** Inside the form element, I am presented with a button with `id="submit"` to submit all my inputs.
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
@ -0,0 +1,55 @@
|
||||
---
|
||||
id: 587d78b0367417b2b2512b05
|
||||
title: Build a Technical Documentation Page
|
||||
challengeType: 3
|
||||
forumTopicId: 301146
|
||||
dashedName: build-a-technical-documentation-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/NdrKKL>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
|
||||
You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
|
||||
|
||||
**User Story #1:** I can see a `main` element with a corresponding `id="main-doc"`, which contains the page's main content (technical documentation).
|
||||
|
||||
**User Story #2:** Within the `#main-doc` element, I can see several `section` elements, each with a class of `main-section`. There should be a minimum of 5.
|
||||
|
||||
**User Story #3:** The first element within each `.main-section` should be a `header` element which contains text that describes the topic of that section.
|
||||
|
||||
**User Story #4:** Each `section` element with the class of `main-section` should also have an id that corresponds with the text of each `header` contained within it. Any spaces should be replaced with underscores (e.g. The `section` that contains the header "JavaScript and Java" should have a corresponding `id="JavaScript_and_Java"`).
|
||||
|
||||
**User Story #5:** The `.main-section` elements should contain at least 10 `p` elements total (not each).
|
||||
|
||||
**User Story #6:** The `.main-section` elements should contain at least 5 `code` elements total (not each).
|
||||
|
||||
**User Story #7:** The `.main-section` elements should contain at least 5 `li` items total (not each).
|
||||
|
||||
**User Story #8:** I can see a `nav` element with a corresponding `id="navbar"`.
|
||||
|
||||
**User Story #9:** The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation.
|
||||
|
||||
**User Story #10:** Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. There should be one for every element with the class `main-section`.
|
||||
|
||||
**User Story #11:** The `header` element in the navbar must come before any link (`a`) elements in the navbar.
|
||||
|
||||
**User Story #12:** Each element with the class of `nav-link` should contain text that corresponds to the `header` text within each `section` (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world").
|
||||
|
||||
**User Story #13:** When I click on a navbar element, the page should navigate to the corresponding section of the `main-doc` element (e.g. If I click on a `nav-link` element that contains the text "Hello world", the page navigates to a `section` element that has that id and contains the corresponding `header`.
|
||||
|
||||
**User Story #14:** On regular sized devices (laptops, desktops), the element with `id="navbar"` should be shown on the left side of the screen and should always be visible to the user.
|
||||
|
||||
**User Story #15:** My Technical Documentation page should use at least one media query.
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
@ -0,0 +1,43 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd18
|
||||
title: Build a Tribute Page
|
||||
challengeType: 3
|
||||
forumTopicId: 301147
|
||||
dashedName: build-a-tribute-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/zNqgVx>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
|
||||
You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
|
||||
|
||||
**User Story #1:** My tribute page should have an element with a corresponding `id="main"`, which contains all other elements.
|
||||
|
||||
**User Story #2:** I should see an element with a corresponding `id="title"`, which contains a string (i.e. text) that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug").
|
||||
|
||||
**User Story #3:** I should see either a `figure` or a `div` element with a corresponding `id="img-div"`.
|
||||
|
||||
**User Story #4:** Within the `img-div` element, I should see an `img` element with a corresponding `id="image"`.
|
||||
|
||||
**User Story #5:** Within the `img-div` element, I should see an element with a corresponding `id="img-caption"` that contains textual content describing the image shown in `img-div`.
|
||||
|
||||
**User Story #6:** I should see an element with a corresponding `id="tribute-info"`, which contains textual content describing the subject of the tribute page.
|
||||
|
||||
**User Story #7:** I should see an `a` element with a corresponding `id="tribute-link"`, which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of `target` and set it to `_blank` in order for your link to open in a new tab (i.e. `target="_blank"`).
|
||||
|
||||
**User Story #8:** The `img` element should responsively resize, relative to the width of its parent element, without exceeding its original size.
|
||||
|
||||
**User Story #9:** The `img` element should be centered within its parent element.
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user