-
-
Save matthieua/38b34db8ec9855ba7fd062fcf33d0c75 to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>SheCodes</title> | |
| <style> | |
| body { | |
| font-family: Cerebri Sans, Helvetica, Arial, sans-serif; | |
| } | |
| h1 { | |
| text-align: center; | |
| font-size: 34px; | |
| line-height: 48px; | |
| margin: 60px 0 0; | |
| font-weight: 900; | |
| color: #272044; | |
| } | |
| h2 { | |
| text-align: center; | |
| font-weight: 900; | |
| font-size: 34px; | |
| line-height: 48px; | |
| margin: 0; | |
| color: #8064e9; | |
| padding: 0 0 24px; | |
| } | |
| p { | |
| text-align: center; | |
| font-size: 18px; | |
| line-height: 28px; | |
| font-family: PT Mono, monospace; | |
| } | |
| button { | |
| border-radius: 25px; | |
| border: 1px solid #8064e9; | |
| background: #8064e9; | |
| color: #fff; | |
| font-size: 16px; | |
| display: block; | |
| margin: 0 auto; | |
| line-height: 22px; | |
| padding: 16px 24px; | |
| text-decoration: none; | |
| transition: all 200ms ease; | |
| box-shadow: rgba(37, 39, 89, 0.08) 0px 8px 8px 0; | |
| } | |
| button:hover { | |
| cursor: pointer; | |
| background: #5e41a7; | |
| } | |
| .limited-spots { | |
| font-weight: bold; | |
| } | |
| .button-container { | |
| margin: 60px 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1> | |
| 👩💻 SheCodes is a Coding Workshop for Women | |
| </h1> | |
| <h2> | |
| Access a new career in Technology | |
| </h2> | |
| </header> | |
| <section> | |
| <p> | |
| SheCodes teaches coding, design and management skills to women | |
| <br /> | |
| <span class="limited-spots"> | |
| Limited number of spots available! | |
| </span> | |
| </p> | |
| </section> | |
| <footer> | |
| <div class="button-container"> | |
| <button> | |
| Join now | |
| </button> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |
the video with the challenge (& learning before) doesn't make it very clear exactly what is expected for the solution until you watch the solution video. I'd suggest this particular section is reviewed and updated so the learning video actually includes part of what is in the solution!
I have to repeat what others are saying here, in that it's not entirely obvious what is meant to be done in the challenge.
I, too, agree with what others are saying. It is very easy to misunderstand and/or overthink this particular challenge.
I agree, I misunderstood the challenge video and thought I had to add a class to every element. It was difficult and I thought it a pointless exercise. But its only required for the div and span elements.
I agree, I misunderstood the challenge video and thought I had to add a class to every element. It was difficult and I thought it a pointless exercise. But its only required for the div and span elements.
Same here. I was very confused and frustrated trying to come up with different class names for every element.
It was confusing. Finally, I did it, but I completely changed the footer :))))
Honestly, at this point I'm totally ready for coding. Nothing is impossible!
I found the Shecode coding lessons so interactively. First, I place my mind on what the challenge is about and I watch the "Learn" video over and over to get my solution to the challenge in a similar way to the "Learn" video. This allow me to relate what the coding message or lesson we are expect to grab or understand! I'm loving coding. Thanks Shecode
And here I just added the elements without classes.
I agree
@matthieua ¿Podrías echar un vistazo a este ejercicio y mejorar las instrucciones para la solución? Thank you! ♥
Hi! From what you mentioned in the "learn" video, it seems like you would expect us to add classes to everything to get familiar with them as alternative options to "div". At least that's what I ended up doing on most of my code.
Here's my code:
<header class="header">👩💻 SheCodes is a Coding Workshop for Women</header>
<span class="call-to-action"> Access a new career in Technology</span>
<br />
<section>
SheCodes teaches coding, design and management skills to women
<br />
<strong> Limited number of spots available! </strong>
</section>
<footer>
<div class="button">Join now</div>
</footer>
I didnot understand what the challenge wanted us to do like most others here !
I also didn't understand the challenge
I'm sooo glad I'm not the only one that had no idea what I was supposed to do lol
well, a bit confusing...
I'm honestly struggling to get things, and remember all! The only element I've added was a div, and then I was literally lost in thoughts on how to use everything else! :(
I totally missed how we should do it... At least with the solution video I get a better understanding
Same here!
here is what I added, seeing that most of you are confused. Any suggestion is welcomed. And happy coding !!
``
h1 {
text-align: center;
font-size: 34px;
line-height: 48px;
margin: 60px 0 0;
font-weight: 900;
color: #272044;
}
h2 {
text-align: center;
font-weight: 900;
font-size: 34px;
line-height: 48px;
margin: 0;
color: #8064e9;
padding: 0 0 24px;
}
p {
text-align: center;
font-size: 18px;
line-height: 28px;
font-family: PT Mono, monospace;
}
button {
border-radius: 25px;
border: 1px solid #8064e9;
background: #8064e9;
color: #fff;
font-size: 16px;
display: block;
margin: 60px auto;
line-height: 22px;
padding: 16px 24px;
text-decoration: none;
transition: all 200ms ease;
box-shadow: rgba(37, 39, 89, 0.08) 0px 8px 8px 0;
}
button:hover {
cursor: pointer;
background: #5e41a7;
}
.header {
text-align: center;
}
.important {
text-align: center;
}
.specs {
text-align: center;
font-family: PT Mono, monospace;
font-size: 18px;
line-height: 28px;
}
.ending {
text-align: center;
font-family: PT Mono, monospace;
font-size: 18px;
line-height: 28px;
}
</style>
👩💻 SheCodes is a Coding Workshop for Women
Access a new career in Technology
SheCodes teaches coding, design and management skills to women
I'm a little confused as well
I totally missed how we should do it... At least with the solution video I get a better understanding
Same here!
Same
eyy i definitely got this challenge wrong.
l was so lost
So I just used div, span, section, header and footer without adding classes and hence I didn't make any changes at the CSS part- I just gave my div a class and thats it. I used these elements to my original code and even though I added these html elements to my code nothing really changed : this is what I used
👩💻 SheCodes is a Coding Workshop for Women
Access a new career in Technology
Shecodes teaches coding, designs and management skills to women
Limited number of spots available!
Join Now
This particular solution code partially goes against the initial instruction which is to add these elements without affecting the CSS already coded. As in we shouldn't have to touch CSS at all. The replacing the around "Limited number of spots available!" requires bold styling to be added which is not what was asked. A smidge of a confusing solution.
I almost had it, though I put and
I almost got the same outcome I think the paragraph moved a bit.
l got confused too
This was not clear
i was confused but now after the soIution video i see what we have to do
oh my🤣 i just added the element didn't expect that we are to add classes to them not to change the styling, but now i'm getting better at it, here i come div, span, section, header and footer🤣😍👩💻
Same here!