Finally finished the project 1 of 5 Responsive Web Design

Hey guys, I finally finished my first project, I am really excited to share with you.

Here is my link: https://codepen.io/ayhanizmir/pen/yLeyKva?editors=1100

and also I was confused about a few things when I was coding. The result is not bad (in my opinion) but as you see in HTML and CSS a lot of div tag (and classes) and after some point they are becoming disorganized.
Where did I make mistake? Could I do this syntaxes more readeble and useful? Do you have any advice for me?

I just started to learning coding 3 weeks ago :sweat_smile: and I had not had any experience before

hi @ayhanisidici

good luck with your project :slight_smile:

It is a very good start. The text in the middle and could be wider though.

Welcome to the forum @ayhanisidici and congrats on completing your first project.

I’ve taken a peek at your markup & stylesheet as you asked if we had any advice for you.

You have several classes that are doing exactly the same thing such as .first-class { style: value} etc. You could eliminate this repetition by just having a single class and assign that to all the divs that currently have individual styles defined. Think about that and other styles, such as the ones you have just centering text. This would be another candidate for a single class and would reduce the number of lines in your stylesheet.

You could also think about applying a style to a single div that wraps all the divs that can share the same style. Other elements within that wrapper can have other styles applied after that (such as the sub-headings which you want centred) Those stlyes would simply need to be declared after your ‘wrapper’ style in the stylesheet.

Well done so far though :wink:
LT

Welcome to the forums @ayhanisidici. Your page looks okay. There are some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 1/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
    • mentioning because you have elements out of order. The head element would be before the body element, not inside it. Where you have a head element I think you meant to have header. Move the link to your font to where codepen expects it (it’s wrong to have it all over your html code like that) and change what you’re calling the head element to be the header element.
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.
  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for. If you want three paragraphs then have three paragraph elements.
  • Review the lesson about giving meaningful text to links.