I don’t think you should start over with basic HTML. What I think it’s best is to see coding in practice and start building things from scratch as you are doing with the tribute page. The first two projects, the tribute page and the portfolio are really good projects to practice your skills and advance your level before you proceed. So, I would suggest to invest more time on the projects rather than working again basic html challenges.
Try to make your code simpler and start again. First delete all the classes you have created and keep only bootstrap’s classes you have already assigned to your elements. Also delete (or comment!) all the styling in tags you have written. This will allow you to get familiar with bootstrap’s classes without worrying about the overlapping effects that your classes probably cause. Then focus on specific bits of your code. Try to simplify them and fix the positions. Once you get them to desired positions then you can start play with their style.
Points on some bits of your code:
For the title and subtitle your code looks like this…
<body class="background">
<div class="container-fluid">
<!-- gray platform -->
<div class="platform">
<div class="row">
<div class="col-md-12 col-xs-8">
<p>
<h1 class="assata"><b>Assata Shakur</b></h1>
<h2 class="subtitle">America's Most Wanted Fugitive</h2>
</p>
</div>
</div>
In order to make this bit of code simpler, and based on the points I have written in a previous message, I come up with something like this
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-8">
<h1 class="text-center"><b>Assata Shakur</b></h1>
</div>
<div class="col-xs-12 col-md-8">
<h2 class="pull-right">America's Most Wanted Fugitive</h2>
</div>
</div> <!-- row ends -->
I think this one has the basic structure we would like and we can start doing some styling, which will be left to you.
Note that ‘pull-right’ should be used in h2 tag.
for the image, your code is something like this…
<div class="row">
<div class="col-md-12 col-xs-8">
<div class="imgspc">
<img class="img-responsive image" src="https://goo.gl/mrV1Mg">
<p class="caption"><em>Picture of Assata earlier in her life.</em></p>
</div>
</div>
</div> <!-- row ends -->
I have replaced the above with this:
<div class="row">
<div class="col-xs-12 col-md-8 centered">
<img class="img-responsive centered" src="https://goo.gl/mrV1Mg">
<p class="text-center"><em>Picture of Assata earlier in her life.</em></p>
</div>
where I have replaced your class ‘caption’ with the ‘text-center’ (the latter is a bootstrap class) and I have written a small class called ‘centered’ and use it where I would like my element to be centered. This class has only two lines of code.
.centered {
margin: 0 auto;
float: none;
}
This is it!
With this you will not have to use min-width…
The other thing I would like to mention is that you should start reading code that is written by others and try to understand what they have created. This is another good practice to learn things fast. You can take a look at the tribute page I made.
some points on codepen. In general, every html code usually starts with
then you open your html tag, which includes the head and body. In the head you declare your dependencies (links of libraries you intent to use, scripts, some styling etc.) and finally inside the body you write your html code. It seems you already know all these. However, in codepen you don’t have to write a head tag in your html section, since codepen has already included one with the pen you have opened to write. The html section refers primarily to the body tag and you are ready to start writing your code. You can custom your head if you press ‘Settings’ and there you can include js and css libraries like Bootstrap. The same goes with css section below html. Codepen has already included the file and it saves and sync everything when you press Save.