Portfolio project - architecture

Portfolio project - architecture
0.0 0


I’m afraid I’m stuck.
I began this project with the idea of using rows class and col class, as we saw in the cat app.
Then I tried to give a structure to the page using <head>, <body> and so on.
But the css doesn’t work with <head> or <body> to change style.
For example, my background color doesn’t change. It only work with <div> but the whole background color changes instead of only a part of it.
Can anyone could give me some advice about giving structure compatible with css ?
I didn’t have a look at the code source of the examples provided. Do I have to look at it ?
Thank you for helping.


Are you using Codepen to build your portfolio project? If so, then provide us a link and explain exactly what you are expecting your current code to do. Also, explain what it is doing instead. Be as detailed as possible.


Hello and thank you for your reply.
Yes this is the link to codepen :


I’ve just read again my question and some words disappeared… it’s strange. Every time I mentioned a part of the code, between arrows it has been deleted.
I’m looking for an efficient structure, I would like the style of each part (top, body and bottom) to be modified easily. Do I have to keep the columns or to get rid of them ?
Thanks again.


I made the tag word visible for you by adding a single backtick before and after each tag in your original post. The forum allows you to use html markup, so that is why the words seemed to disappear in your original post.

After reviewing your Codepen, I noticed you are doing something which is not possible. The head element (everything between <head> and </head>) is very special in that you can not use it to put elements like div, h1, etc…

In Codpen, you do not even use the head tag in the HTML module. It is automatically added to your code behind-the-scenes for you. Also, you do not even need to use the body tag when using Codepen, because everything inside the HTML module gets put into the body tags behind-the-scenes for you.

You do not even need the link tag when using Codepen to add the Bootstrap 3 library. Instead, click on the gear in the CSS module and use the Quick-add: dropdown to select Bootstrap 3. Again, behind-the-scenes, Codepen will add this and many other things for you and make sure everything is in the right place.

If you really want to see what Codepen is doing for you behind-the-scenes, then you can export your project by clicking the Export button in the lower right-hand corner of the Codepen. It will create a zip file of all the files (index.html, index.js, index.css) for the 3 modules. When you open the index.html on your own computer, you will see how it has added everything for you in the proper location. This is how you would structure you pages when not using Codepen.

Try removing the elements I mentioned and using the Codepen settings and your html will look like below. See what this does in your preview. If you have further questions, just reply back and ask.

<div class="container-fluid">
  <h3 class="fontcolor=black text-center">Front-End Developer</h3>

  <div class="row">
    <div class="col-xs-6">
      <h4 class="text-center"></h4>
      <div class="well" id="left-well">
        <div id="target1"><img src="http://www.cyrcle.org/wp/wp-content/uploads/HQE-accueil-626x448.jpg" class="img-responsive"></div>
        <div id="target2"><img src="http://www.meilleurduweb.com/images/laune_capture.gif" class="img-responsive"></div>
        <img src="http://www.cirad.fr/var/cirad/storage/images/site-cirad.fr/actualites/toutes-les-actualites/articles/2012/ca-vient-de-sortir/site-internet-cirad-madagascar-ocean-indien/65286-1-fre-FR/le-nouveau-site-internet-du-cirad-a-madagascar-et-dans-les-pays-de-l-ocean-indien_lightbox.jpg"
    <div class="col-xs-6">
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>



Thank you very much for your help.
I’ll try what you said.
Thank you too for the tricks you gave me on how Codepen works “behind the scene”.


I made a new Portfolio including what you show me above :

Unfortunately, the CSS doesn’t seem to work. I cannot change anything.
I’m afraid I didn’t choose the right set of instructions (row, col, …).

Could you give me some advice to use a convenient structure or should I look at the code used in the model page given ?

Thank you for your help.


The CSS you wrote is not valid syntax. Review the following FCC challenges for how to correctly create classes and use id selectors in your html/css. You seem to have confused referencing a class versus referencing an id for styling purposes. Also, your use of class names is not correct.

Use a CSS Class to Style an Element

Style Multiple Elements with a CSS Class

Use an ID Attribute to Style an Element


:face_with_raised_eyebrow::thinking:… Thank you for your useful help… I see the light.:star_struck:
I’ll be back soon.


I still have some work, but it’s better :slight_smile:

Thanks again


Hello Eurisko. I looked at your portfolio page, and it looks like you’re further than me, but I did have a suggestion. I think you mean “Toward a new horizon”, without the s. It’s a small thing, and may be debatable. I’m just looking for ways to help. Btw, I also tried to add “head”.
Looking at your project showed me that I was supposed to be putting things in the CSS area. I am Noob. Thanks.