is there a way to make the Sharepoint looks like the picture below (without html coding)? As what I know, most of the Sharepoint with amazing design is powered by paid software such as Shortpoint. I was trying to use free template found on Google but ended up I realized that the template is actually for publishing site not enterprise wiki site.
For what environment are you looking for? SharePoint 2013/2016 onPrem or online? Online will be at least a little bit more tricky as there's the access to masterpage/pagelayout restricted. Modern UI is far harder to customize with just HTML and CSS. If we're talking about onPrem environments, you're lucky (with a lot of things to learn). In the case above the left handed navigation is disabled/not shown. The pagelayout is two-rowed with three columns in the second row. Each column got one Web Part Zone. The best way to learn is to copy a pagelayout you want and do some changes in it.
SharePoint gives you a nice and handy support with the html templates you can use following this technet: https://docs.microsoft.com/en-us/sharepoint/dev/general-development/how-to-create-a-page-layout-in-sharepoint