Hi! I don’t understand why the practice show a grid-template-columns for the main section with 3 coumns, and the logo appears to be in all the section, I mean, the logo is a cover, so How the logo takes all the size of the screen if it’s inside main section (3 Columns). I’m a little bit confused there!
Do you have a link to the challenge, and your current code? We cant help if we cant see anything
Hi! I don’t know if you can see the preview there.
Theres a link to the challenge, but what does your current code look like? Can you post your current in a reply using the formatted text. The button looks like
For future reference there should be a ask for help button in the challenges, and when you click on it, it will generate a post with the link to the challenge and your current code. Just for next time
Thank you very much for your recommendation, I appreciate it. However, I wasn’t able to see any help button in the challenges, At least in my end. The previous version of html-css (Legacy responsive Web design certification) do have that button, but my current version don’t (New responsive web design) Sorry If I’m wrong!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Magazine</title>
<link
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<section class="heading">
<header class="hero">
<img
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
alt="freecodecamp logo"
loading="lazy"
class="hero-img"
/>
<h1 class="hero-title">OUR NEW CURRICULUM</h1>
<p class="hero-subtitle">
Our efforts to restructure our curriculum with a more project-based
focus
</p>
</header>
<div class="author">
<p class="author-name">
By
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
>freeCodeCamp</a
>
</p>
<p class="publish-date">March 7, 2019</p>
</div>
<div class="social-icons">
<a href="https://www.facebook.com/freecodecamp/">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com/freecodecamp/">
<i class="fab fa-twitter"></i>
</a>
<a href="https://instagram.com/freecodecamp">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/school/free-code-camp/">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="https://www.youtube.com/freecodecamp">
<i class="fab fa-youtube"></i>
</a>
</div>
</section>
<section class="text">
<p class="first-paragraph">
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.
</p>
<p>
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!
</p>
<p>
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.)
</p>
<blockquote>
<hr />
<p class="quote">
The entire curriculum should be a series of projects
</p>
<hr />
</blockquote>
<p>
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.
</p>
<p>
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".
</p>
<p>
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.
</p>
</section>
<section class="text text-with-images">
<article class="brief-history">
<h3 class="list-title">A Brief History</h3>
<p>Of the Curriculum</p>
<ul class="lists">
<li>
<h4 class="list-subtitle">V1 - 2014</h4>
<p>
We launched freeCodeCamp with a simple list of 15 resources,
including Harvard's CS50 and Stanford's Database Class.
</p>
</li>
<li>
<h4 class="list-subtitle">V2 - 2015</h4>
<p>We added interactive algorithm challenges.</p>
</li>
<li>
<h4 class="list-subtitle">V3 - 2015</h4>
<p>
We added our own HTML+CSS challenges (before we'd been relying on
General Assembly's Dash course for these).
</p>
</li>
<li>
<h4 class="list-subtitle">V4 - 2016</h4>
<p>
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.
</p>
</li>
<li>
<h4 class="list-subtitle">V5 - 2017</h4>
<p>We added the back end and data visualization challenges.</p>
</li>
<li>
<h4 class="list-subtitle">V6 - 2018</h4>
<p>
We launched 6 new certifications to replace our old ones. This was
the biggest curriculum improvement to date.
</p>
</li>
</ul>
</article>
<aside class="image-wrapper">
<img
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
alt="image of the quote machine project"
loading="lazy"
class="image-1"
width="600"
height="400"
/>
<img
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
alt="image of a calculator project"
loading="lazy"
class="image-2"
width="400"
height="400"
/>
<blockquote class="image-quote">
<hr />
<p class="quote">
The millions of people who are learning to code through freeCodeCamp
will have an even better resource to help them learn these
fundamentals.
</p>
<hr />
</blockquote>
<img
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
alt="four people working on code"
loading="lazy"
class="image-3"
width="600"
height="400"
/>
</aside>
</section>
</main>
</body>
</html>
and my 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;
border: 1px solid rgba(120, 120, 120, 0.6);
}
.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: ' "';
}
That’s my code. Sorry if I’m generating some problems. Thank You!
No worries, I havent looked in the new curriculum so it may not be there. If its not then hopefully it gets added soon.
When I look in your css I dont see the class the directions ask you to make
“ Create a .text-with-images selector and set the display property to grid .”
You need to make a new class in your css file with the name text-with-images, and then inside that class make a display property which has a value of grid. You can see in the css there is another propert already in there that sets the display as grid. You can pretty much copy and paste that example
Thank you very much! My question is not about this step, I Sent this step in order you see the logo(freecodecamp) in the preview. I don’t understan why the logo takes almost all the screen size and this logo is inside the main section which is set as a Grisd of three columns! That’s my question!
That is my fault, I should have paid closer attention to your question. Hmm. Thats a good question. I have copied and pasted your html/css code but I do not get the same issue you are having
@juanmarro2506 just editing my post here. It took a minute, but the logo finally loaded and I see what you are saying.
@juanmarro2506 Unfortunately , I have to run but from what I can tell the reason the logo is so big is because of this style
img {
width: 100%;
object-fit: cover;
}
You can play around the width and see how the image changes, but then this line is just saying it will start at column 2 and end at column 3 which gives it the center location.
grid-column: 2/3;
1 Like
Your explanation has helped me to understand better this topic. It has to do with the size of the image and its position, in this case 2/3. I guess! Thank you!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.