Source Code for CSS Typography Project

Hello everyone. There is a lot of posts in the Codecademy Forum requesting the solution to the CSS Typography project. There is no solid answer to the code anywhere and the video tutorial provided is not complete.

You can find the Codecademy Project here.

I am sure the code solution for the project would be useful. Please try to create the instructions again once you understand the solution. Also, feel free to provide your suggestions for improving the overall code of the website.

So here is it. both HTML and CSS part.


> <!DOCTYPE html>
<html>
<head>
  <title>Morocco</title>
  <link rel="stylesheet" type="text/css" href="styles/reset.css">
  <link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
  <!-- Header -->
  <nav class="header">
    <span class="logo">AOFIE CONLEAVY</span>
    <ul>
      <li><a href="#">TRAVELS</a></li>
      <li><a href="#">FICTION</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>

  <!-- Banner -->
  <div class="banner">
    <h2>DEC 20XX</h2>
    <h1>Morocco</h1>
  </div>

  <!-- Journal -->
  <div class="journal">
    <div class="first photo">
      <div class="image-container">
        <img src="https://content.codecademy.com/courses/freelance-1/unit-6/project-morocco/photo1.png">
      </div>
      <span class="caption">A convoy of camels criss-crossing the crests of the Sahara</span>
    </div>
    <p>
      <span class="first-letter">I</span> am in the Great Sahara Desert for the third sundown in a row. Fouad and I pass back and forth a sun-bleached map of the stars. Itā€™s more of a tug-of-war to be honest. With what remains of the daylight, we commit to memory the positions of spots on the page. We hope to find some correlation in its negative, which slides overhead as the sun rapidly dies.
    </p>
    <p>
      "Navigating by night is always easier." Fouad flicks these English words as ash from a cigarette. "Youā€™ll see."
    </p>
    <p>
      "We won't see anything. That's my point!"
    </p>
    <p>
      How did we get here?
    </p>
    <p>
      It started eight days ago when I arrived in Malilla on the boat from Malaga. The sun hit me like a judgement as I stepped onto the gangplank. A bit about Morocco:  
    </p>
    <div class="photo">
      <div class="image-container">
        <img src="https://content.codecademy.com/courses/freelance-1/unit-6/project-morocco/photo2.png">
      </div>
      <span class="caption">The long and winding road to Merrakec</span>
    </div>
    <p>
      Morocco has a population of over 33.8 million and an area of 446,550 km2 (172,410 sq mi). Its capital is Rabat, and the largest city is Casablanca. Other major cities include Marrakesh, Tangier, Tetouan, Sale, Fes, Agadir, Meknes, Oujda, Kenitra, and Nador. A historically prominent regional power, Morocco has a history of independence not shared by its neighbours.
    </p>
    <span class="quote">"Navigating by night is always easier."</span>
    <p>
      Since the foundation of the first Moroccan state by Idris I in 789, the country has been ruled by a series of independent dynasties, reaching its zenith under the Almoravid and Almohad dynasty, spanning parts of Iberia and Northwestern Africa. Marinid and Saadi dynasties continued the struggle against foreign domination, and Morocco remained the only North-African country to avoid Ottoman occupation. 
    </p>
    <p>
      The Alaouite dynasty, the current ruling dynasty, seized power in 1666. In 1912 Morocco was be divided into a French and Spanish protectorates, with an international zone in Tangier, and regained its independence in 1956. Moroccan culture is a blend of Arab, indigenous Berber, Sub-Saharan African, and European influences.
    </p>
    <div class="photo">
      <div class="image-container">
        <img src="https://content.codecademy.com/courses/freelance-1/unit-6/project-morocco/photo3.png">
      </div>
      <span class="caption">A stall at the Jemaa El Fnaa street market</span>
    </div>
    <p>
      Morocco claims the non-self-governing territory of Western Sahara as its Southern Provinces. Morocco annexed the territory in 1975, leading to a guerrilla war with indigenous forces until a cease-fire in 1991. Peace processes have thus far failed to break the political deadlock.
    </p>
    <p>
      Morocco is a constitutional monarchy with an elected parliament. The King of Morocco holds vast executive and legislative powers, especially over the military, foreign policy and religious affairs. Executive power is exercised by the government, while legislative power is vested in both the government and the two chambers of parliament, the Assembly of Representatives and the Assembly of Councillors. The king can issue decrees called dahirs which have the force of law. He can also dissolve the parliament after consulting the Prime Minister and the president of the Constitutional court.
    </p>
    <span class="quote">ā€œNavigating by night is always easier.ā€</span>
    <p>
      Morocco's predominant religion is Islam, and the official languages are Arabic and Tamazight. Moroccan dialect, referred to as Darija, and French are also widely spoken. Morocco is an influential member of the Arab League and a part of the Union for the Mediterranean. It has the fifth largest economy of Africa.
    </p>
    <div class="photo">
      <div class="image-container">
        <img src="https://content.codecademy.com/courses/freelance-1/unit-6/project-morocco/photo4.png">
      </div>
      <span class="caption">The desert at night is strange and beautiful</span>
    </div>
  </div>

  <!-- Footer -->
  <footer>
    <div class="image-container">
      <img src="https://content.codecademy.com/courses/freelance-1/unit-6/project-morocco/author.png">
    </div>
    <div class="content">
      <p>
        <span class="author">Aoife Donleavy</span> has been writing on her travels for over two decades.
        After graduating from the <em>Idaho Writers' Workshop</em>, she piloted a biplane on a two-year voyage from <em>Anchorage</em>, <em>Alaska</em> to <em>Isafjorour</em>, <em>Iceland</em> stopping along the way for adventures throughout Europe.
      </p>
      <p>
        Since then, she has camped on all seven continents, and has been recognized worldwide for her spare, ageless prose. Aoife's new novel, <em>Tide Blade</em>, is currently available from <em>Walrus Publishing</em>. 
      </p>
    </div>
  </footer>
</body>
</html>

This is the CSS part.

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:ital@0;1&family=Work+Sans:wght@400;500;800&display=swap');

@font-face {
  font-family: 'Croissant One';
  src: url('./fonts/CroissantOne-Regular.ttf') format('ttf');
}
html {
  font-size: 18px;
}

@media only screen and (max-width: 1000px) {
  html {
    font-size: 16px;
  }
}

@media only screen and (max-width: 680px) {
  html {
    font-size: 14px;
  }
}

/* Header */

.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 4.44rem;
  padding: 0 12%;
  background-color: white;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);
  font-family: Verdana, sans-serif;
  font-size: .77rem;
  font-weight: bold;
}

.header .logo {
  flex-grow: 1;
  color: #ffb78c;
}

.header li {
  display: inline;
  padding-right: 2.22rem;
}

.header li a {
  text-decoration: none;
  color: #4a4a4a;
}

@media only screen and (max-width: 550px) {
  .header {
    flex-direction: column;
  }

  .header .logo {
    flex-grow: 0;
  }
}

/* Banner */

.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 50rem;
  background: url("https://content.codecademy.com/courses/freelance-1/unit-6/project-morocco/banner.jpg") center center no-repeat;
  background-size: cover;
  color: #ffb78c;
}

.banner h2 {
  padding: .55rem 0;
  border-top: 4px solid #ffb78c;
  border-bottom: 4px solid #ffb78c;
  font-size: 1.44rem;
  letter-spacing: 2px;
  font-weight: 500;
  font-family: 'Work Sans', 'Arial', sans-serif;
}

.banner h1 {
  padding-top: 1.11rem;
  font-size: 11rem;
  font-weight: 900;
  font-family: 'Abril Fatface', sans-serif;
}

@media only screen and (max-width: 750px) {
  .banner {
    height: 40rem;
  }

  .banner h1 {
    font-size: 8rem;
  }
}

@media only screen and (max-width: 530px) {
  .banner {
    height: 30rem;
  }

  .banner h1 {
    font-size: 6rem;
  }
}

/* Journal */

.journal {
  padding: 0 25% 4rem 25%;
  background-color: rgb(254, 231, 218);
  color: #4a4a4a;
  font-family: 'Work Sans', serif;
}

.photo {
  width: 75%;
  padding: 1.11rem;
  border-radius: 5px;
  margin: 0 auto 4.44rem auto;
  background-color: white;
}

.photo .image-container {
  overflow: hidden;
  margin-bottom: 1.11rem;
}

.photo .image-container img {
  width: 100%;
}

.photo .caption {
  font-style: italic;
  font-family: 'Merriweather', serif;
}

.photo.first {
  position: relative;
  top: -2.77rem;
  margin-bottom: 1.67rem;
}

.journal p {
  padding-bottom: 2.77rem;
  font-size: 1.5rem;
  line-height: 1.4;
}

.journal .first-letter {
  float: left;
  padding-right: 1.4rem;
  font-family: "Abril Fatface", serif;
  font-size: 7.44rem;
  color: #10b0d8;
  line-height: 0.87;
}

.quote {
  display: block;
  padding: 4.44rem 0;
  margin-bottom: 3.33rem;
  border-top: 4px solid black;
  border-bottom: 4px solid black;
  text-align: center;
  font-size: 3.55rem;
  font-weight: 800;
  line-height: 1.2;
}

@media only screen and (max-width: 680px) {
  .journal {
    padding: 0 10% 4rem 10%;
  }
}

/* Footer */

footer {
  display: flex;
  align-items: center;
  padding: 0 1%;
  background-color: #212121;
  font-family: 'Croissant One', 'Merriweather', serif;
}

footer .image-container {
  width: 400px;
}

footer .content {
  flex-grow: 1;
  font-style: italic;
  color: #9b9b9b;
  line-height: 1.5;
}

footer p {
  padding-bottom: 1.66rem;
}

footer p:last-child {
  padding-bottom: 0;
}

footer .author {
  color: #ffb78c;
}

footer em {
  color: #cfcfcf;
}

@media only screen and (max-width: 750px) {
  footer {
    flex-direction: column;
    padding: 0 10% 2rem 10%;
  }

  footer .image-container {
    height: 300px;
    margin-bottom: 2rem;
    overflow: hidden;
  }
}

Please do ask questions on this topic so that there is a healthy discussion. I am sure most people would be able to proceed at least until 6 of 9 steps in the project. Is only after that the issue seems to be occurring. And the tutorial is not appropriate. I really think it needs to be updated.

18 Likes

Wow, that is helpful! On step 7 I originally use the @import that google fonts provided, however the lesson made it seem that we needed to use the @font-face. Literally went through each latin section of all 6 fonts and copy pasted the @font-face rules, but @import seemed to have the same effect. Plus it was cleaner and simpler to use @import.

Edit: actually now that i think about it, @import probably just imports all the pre-written @font-face needed for that step. :man_facepalming: Iā€™m also guessing that we only use @font-face if the source file is accessible locally since trying to establish src of a file from another site (google fonts) while inside codecademy interface might have some issues with formatting.

I just need to step back and actually understand each action I do instead of robotically following the lesson steps.

3 Likes

Thank you for posting this! Iā€™ve been trying to recreate the way itā€™s shown on the video and lost all of my font attributes when I ran it. I donā€™t particularly care for the misleading instructions on this project, although Iā€™m wondering if google fonts changed their formatting after this lesson was created?

1 Like

No there was no change. but it became more inclusive.

Hi there, I canā€™t get the ā€œCroissant Oneā€ font to work at all. Iā€™ve tried copying that step exactly as itā€™s shown in the video demo and also exactly how you have it coded here, but neither works. For some reason, ā€œurlā€ and ā€œformatā€ remain red instead of turning blue/purple. Does that mean that it isnā€™t seeing that information for some reason?

There are comparison tools online where you can check the difference between your code and mine. Try those.
If the error is still persistent, message me the code.

Step 7 was definitely a little confusing. I agree, it took me a while to figure it out. I thought we have to define a font-face and import it from google fonts.

Thanks for the @import solution

2 Likes

Amazing, thank you for sharing. This was the solution I ended up with:

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:ital@0;1&family=Work+Sans:wght@400;500;800&display=swap');

@font-face {
  font-family: "Croissant One";
  src: url('./fonts/CroissantOne-Regular.ttf');  
}

Basically following the instructions provided by Google Fonts, and unfortunately not the Codecademy solution. If I did need to optimise my site, I might go further into Font-Face, but that seemed like unnecessary leg work.

This section needs to be revised. Is there anywhere we can flag a lesson/project up for review?

4 Likes

We can send a Bug message in the Get Unstuck section.

The ā€œGet Unstuckā€ video for this project is incorrect, I was never able to link the CSS files locally, followed the steps in the video exactly but my links appeared gray, very frustrating, please update it!

Yes it is incorrect, rather incomplete. That is reason I have provided the resolution code here. Try and understand it. Message me for any queries. Thank you.

i too could not get the ā€œCroissant Oneā€ font to work at all no matter how I wrote the url link and the font-family in the @font-face so I just went on to Google Fonts and searched for ā€œCroissant Oneā€ and got the Latin @font-face by following the href url. It isnā€™t what is required in the step but its a workaround.

@font-face {
  font-family: 'Croissant One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/croissantone/v20/3y9n6bU9bTPg4m8NDy3Kq24UA31gng.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Hi, I am currently working on this project and I also found that step 7 was incredibly confusing. I watched the ā€œUnstuckā€ video and the teacher decided not to include what I thought was crucial to understanding that step. Just thought I would share my opinion as to why I think step 7 seemed to knock me back a bit haha.

I hope the resolution I provided would be of help. If there is any issue then please get back here with your doubt.

hi! I tried your solution code and unfortunately that didnā€™t work me either but I just experimented a bit and in the end this piece of code worked for me! But yes definitely donā€™t follow the assignment of Codecademy haha.

@import url(ā€˜https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:ital@0;1&family=Work+Sans:wght@400;500;800&display=swapā€™);

@font-face {
font-family: ā€˜Croissant Oneā€™; src: url(ā€˜ā€¦/styles/fonts/CroissantOne-Regular.ttfā€™) format(ā€˜truetypeā€™);
}

So finally did it worked for you or not? Still need help?

The code in my last message worked, your code didnā€™t work in the Codecademy tool either :frowning:

1 Like

Oddly enough, the issue with the @font-face rules in step 7 was purely visual, at least for me. I copy-pasted the separate @font-face rules from the Google Fonts stylesheet like the video described. While the links were all greyed out and the rest of the block was red as if it was invalid, the code actually still functioned properly and applied the fonts. Still took me an hour to even think about trying to run it. I plugged the entire project into my Visual Studio Code as well, and the @font-face rulesets all looked and functioned normally.

Try running the copy-pasted code from the Google Fonts stylesheet, even though it looks broken. As for which @font-face rulesets you need, at the part of the video where he says to copy and paste the ā€œrelevantā€ @font-face rulesets and says you only need three, he means you can consolidate them and have one for each font. For Work Sans, you can put all three font weight values in one font-weight property. I donā€™t know exactly how he did the Merriweather one, but for me the Merriweather photo captions still displayed as italic without needing a separate ruleset for the italic style. This was my code for the @font-face rulesets in step 7:

@font-face {
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/abrilfatface/v19/zOL64pLDlL1D99S8g8PtiKchq-dmjQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-fCZM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400, 500, 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v18/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Hope this helps at least explain what was originally intended for that step, since it was skipped over in the video!

Can someone confirm that the copy-pasted @font-face rules didnā€™t still apply the fonts for them despite being greyed out? Iā€™m hoping that it working for me wasnā€™t just a lucky exception, but I already submitted a bug report either way.

2 Likes

In the tasks list they are saying to put the link to font from google in the ā€œheaderā€ but they put it inside the ā€œheadā€ elements. Seeing as both terms exist it is confusing. The experienced software developer also mentions to put the link inside the ā€œheaderā€ verbally but then copy and pastes the link inside the ā€œheadā€. Goolgle also uses the terminology ā€œheadā€ not ā€œheaderā€. Confusing. Also no ā€œheaderā€ elements exists in the current HTML codebase, so Iā€™m assuming we need to create one? or place it in the ā€œheadā€ as shown and just refer to the ā€œheadā€ as the ā€œheaderā€. and If so what do we call the ā€œheaderā€ if we call the ā€œheadā€ the ā€œheaderā€.

3 Likes

Agree. steps 7 through 9 became a bit confusing. And the referring the head and header was also confusing. They call the ā€œheadā€ the ā€œheaderā€ but each exist independently as HTML elements so it seems the terms used should be more precise.

1 Like