Advice on how to implement specific design in Sharepoint Online

I have been assigned by my company to create an intranet using Sharepoint Online (we have plan 2). I was given a design sketch on how it should look:

The main/welcome page:

A list of articles published/news archive (or news called in Sharepoint perhaps):

The layout for an article(news):

I am a beginner in Sharepoint and I would like some advice on how to implement things in a correct way. I am having full admin rights and I have the freedom to do almost anything.

So far, I created a communication site where I created a masterpage for having the black toolbar on the top with the required text etc. I also created a page layout for the artice page to have the content aligned on the middle, with an image at the beginning etc (I know HTML/CSS/JS etc). All our articles will have a big image at the beginning.

Now I am very confused on how to proceed with the News Archive page (and also display the latest 3 articles on the main page). What I need to display, as in the design, is the title, the image and the beginning of the article (and also an url to the article on click). So no fancy rolling up images.

Here is what I tried so far:

  1. Add a snippet in the design with a content query, but I only managed to get the articles’ titles and url. I was unable to retrieve the images and the beginning of the text (I need to get the images from the article itself, not from the Site Collection Images folder). I need somehow to run a query that retrieves all 4 things.

  2. Use the Corporate News App. But how do I add content to that app from my articles? From what I saw, you manually add some news in the app. When a user clicks on a news part, it has to be redirected to the article page (so it has the same layout). I need an automatic process, once a writer publishes an article, it automatically gets on top of the page.

  3. Create a team subsite in order to have the news functionality. But I wasn’t able to bring my custom article design when reading some news.

Which is the correct way of doing it? I want to know in what direction to continue my research/learning. Do I need to install Visual Studio and write some C# code in order to achieve this? Take into account that later on, I will have to add some filtering of the articles (can be seen in the design for the news archive).

Thank you.