i managed to do this challenge just using basic concepts of css,html

Hey bro, keep practcing... Heres a thing that u can do to change the fonts:

To use Google Fonts on your HTML CSS web page, follow these steps:

Browse to the Google Fonts website at fonts.google.com and select the font(s) you want to use.

After selecting a font, click on the "Select This Font" button, and then click on the "Embed" tab.

Copy the code provided under the "@import" or "link" tab. Paste the copied code "link" into the head section of your HTML file. The "@import" you paste on first line of your "principal" css, but choose just "link" or "@import" to use ok?

Next, add the font family to the CSS styles for the element(s) you want to use it on. For example, if you want to use the "Open Sans" font on all paragraphs on your page, you can add the following CSS:

css

p {
  font-family: 'Open Sans', sans-serif;
}

Note that the font name in the CSS must match the font name in the Google Fonts code.

Save your HTML and CSS files and view your webpage to see the changes.

That's it! Your webpage should now be using the Google Font you selected.

Hello there 👋. Good job on completing the challenge !

I have one suggestion about your code that might interest you.

• Use "./" before the file path of the styles to display it.

‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎✅ Do: <link rel="stylesheet" href="./styles.css" />.

‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎❌ Don't: <link rel="stylesheet" href="/styles.css" />.

More information.

I hope you find it useful! 😄

Happy coding!

Keep up the good work till you're done

Here is a little tip! Hope it helps

• HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities) .

You can use the <div> for sub items within landmarks like <section>. In other words for containers or sections in your HTML you can use the <section> tag if you want to nest in sub items <div>.

Landmarks such as the <section> may actually require that you specify a heading within. In other words if the section has no heading it may throw an error when checked by an accessibility tool.

It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.

There exist an attribution <div> that comes with the frontendmentor starter kit. You will have to wrap this <div> in a <footer> tag

Read

• W3schools Accessibility Landmarks Notes for more information.

• MDN Web docs notes for more information.

I hope you find the above solution useful! 😄 Nevertheless, the solution you submitted is great! Happy coding!