I think thats actually the right road to improve. You start working on projects. You acquire your own vision how things should be. You work to apply it, until it truly becomes what you wish it to be. You learn lot of side effects and methods during that time. It might take hours, but in the end you’ve improved. Much better to face that task now, then if you were working on a job assigment and encoutner such problem for the first time. No, you’ve already figured a way to solve such matters and a work flow to suite you.
I checked your codepen and i dont know if you have made some temporary changes, but i saw you have your image and captions put wrong. The Semantically correct way to put captions for an image(as you have understood) is to use figure and figcaption, but i noticed you didnt apply them correct. Here is a correct order:
<figure>
<img src="https://image.jpg" alt="Image">
<figcaption>Caption text</figcaption>
</figure>
Its not mandatory to use that semantics, but its much more clear what the purpose of those elements is, contrary to simply using div and p tags for example, which are very ambigious.
Ive noticed you’ve got other images arround your project, which also use captions. You can use for them the same approach. You can add class to the figure and figcaption tags, to be able to style those elements similarly.
Your problem with making image and text go on separate lines, roots from the display setting of the img and text elements. The image, is <img> obviously, while i saw the text of question was an anchor(<a>). By default, images are with setting display: inline-block, which makes them take up only their width and can be put alongside other elements on the same “line”. Anchors are displayed as inline, which makes them take up only the space of their content, again letting them be placed alongside other elements on the same line. The difference between inline and inline-block is, inline-block can have additional settings like width, height, margins, paddings, which are innate to block elements(block elements are the ones which take up an entire row/line). As you can see, if you place an image and anchor together, if their combined width is less than the width of their container, they will stay next to each other. There are various ways to make them appear one above the other. One way could be to change their display setting, but i wouldnt choose that approach. Another way could be, to make sure their parent is the same with as the image for example, which will make the image take up one entire line, leaving no choice for the anchor, but to fo beneath.
In your case, you can put the anchor inside the figcaption, which is a block element and will go on the next line, after the image. I strongyl advise you not to use inline styles like you do with align: right, because its harder when you style both within the css and the html parts. Right now you apply two contradictory methods. You tell your image to align to the right, then you put your text beneath it, by using position: absolute and hardcode its position, which should be a last resort solution.
