What does i miss?


I already wrote the code but my page wasn’t looking pretty nice so i lpooked to example page at editor and i really wondered what kind of a fundamental mistake i ve made so i deleted his photos links and paragraphes and copy-pasted my ones and it was looking way too esthetic at his page. I wondered how the hell this is possible what is my diffrence is it the s at the end? and i copy-pasted all of it to my page and it was still looking very ugly.
is the freecodecamp uses pencode Pro or is there something unusual does i make a fundamental mistake?
thank you for your help :)))

No, you don’t need codepen pro. Regular codepen works fine.

If I understand you correctly, you are not pleased with the aesthetics of your page.

Yes, HTML, Bootstrap, CSS - these can all be very confusing and frustrating. If I ever write a book about learning HTML and CSS it will be entitled How the Heck Do I Get This Gosh Darn Thing To Center Before I Go Crazy and Put My Fist Through the Screen. Trust me, there is no frustration you can have that tens of thousands of others haven’t felt. But that is part of learning.

I find that people have better luck when they ask very specific questions. So make a list of every thing you want to change on your page, and go to the main part of the forum and just start asking. (Though you should probably do a google search first - many of these things are common problems.)

Remember that your doesn’t have to look anything like the example. It just needs to meet the user stories (which yours does) and look good. I’d say that yours looks pretty good. If I could change anything, I’d center the photo and maybe use less width on the screen, especially in the last section, so the lines aren’t so long.

But ask very specific questions so you can get specific answers.

1 Like

Since my first post of my question im working like 2 hours on it so it is improved a lot… thank you for your attention😄 How will i change the pictures places on the side will i use html or css part im writing align=“center” and text-align=“center” for hours
But they doesnt move themselves what can i code to move them to center??
(This site challenge teach me a lot about the practical side ot it)

Ahhh! I see whats going on… you were trying to mimic the behavior in the example page, and wondering where you were going wrong that your page was not responding the same way. You are using bootstrap classes in your design correctly, unfortunately, you do not have the bootstrap css attached to your page for the classes to actually work.

Go into settings, head to css, and in add external css, paste this link: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

Once you have bootstrap css linked, you’ll instantly see the difference in your layout, and many of the classes you are trying to use will work. Also, to center your images or text, you’ll only need to add the text-center class.

Yes, centering can be frustrating sometimes.

Since it is just that one image, you can apply CSS directly to the img tag with:

img {
    display: block;
    margin: 0 auto;

Otherwise you could do it with a class.

oh my god thank you a lot… I did just what u said and nearly all my problems over but i can’t understand how will i change the color of margin, i both tried margin and padding at css but both doesn’t work… What will i write for that? Thank you for your attention :slight_smile:

YAY! You’re getting there!!!

For the colour, consider what it is you are trying to change the colour of… its not the margin because margin is simply the empty space outside of a div, and its not padding because that is the empty space inside of a div. What you want to change is the colour of the element outside of, one step above your container-fluid tag… .which in this case is your body tag.

Just running that by you so that as you go through making changes, you have a better idea of where to look to find what you need.

So the the point…you have the body background colour set to #DE1B1B which is a shade of red. That is what you need to change :blush:

No…:cry: İm trying to make the whole background-color (all of it) the shaded red and i cant change the gey color at the center is it container-fluid how will i write it to css?
And also u are looking like an experienced coder do u suggest someone who is new at this field? :smile:
Thank you for your attention best regards

I see now…okay what you want to change … alright, when I said really consider what it is you are trying to change, this is what I mean… Look at your html… All of your content is nested like this:

                 ALL YOUR CONTENT

So, use a process of elimination to see what you need to change.

  • Its not <body> since the bg colour is red which is what you want.
  • Its not <container-fluid> since bootstrap only adds margin and padding to this class and you havn’t set any of your own styles on it.
  • It could be <jumbotron>, because the purpose of using this class is for bootstrap to add border-radius and colour styles to this class.
  • Its not <row> because bootstrap only uses that class to help create columns.

So…its the<jumbotron> class you need to change… If what you are trying to do is change the colour of it, add a new style in your css for it such as:
.jumbotron { background-color: #000000; }

But if you want the entire page red with no jumbotron styling at all, then you need to remove the jumbotron class from your html.

Of course it helps to know what the Bootstrap classes are actually for…if you have no idea how the Bootstrap classes you are using are affecting your layout, you need to head to http://getbootstrap.com/css/ to read the documentation and really understand why you are using particular classes on your page to understand what it does.

Hate to break it to you, but this isnt even the coding part :laughing: Im pretty solid with HTML / CSS but those are markup, not languages… Im trying to expand my horizons to the stuff I dont know that well…like JavaScript. Especially JavaScript! :laughing:

Don’t worry though, you’ll get the hang of this, esp with the HTML and CSS…its just a matter of asking yourself why you are using a certain class and where the classes are in relation to each other…and if you’re using Bootstrap classes, look at the documentation to understand what it does before you use it.