I am a back en dev who is terrible at anything frontend. I can not design web pages. I know my stuff in the hosting and back end development though.

Now I have started my own firm for consulting as a dev/ops engineer and would like to serve some sort of company web page.

What I want is very simple. One page. Good looking design. Information about my company and what I do, and a mailto -link for contacting me.

One single simple static web page for this. No fancy scrolling or effects.

How do I go about this? I have tried 11ty, Hugo, WordPress, and simple HTML templates.

I feel like neither of these are the right tool. They are either very complicated, full of features, or they create badly looking web pages.

11ty, Hugo and Jekyll all seem nice and more like what I need, but they are focused towards blogging which does not fit my use case. The templates that look good that I found didn’t work and had minimal or no instructions at all about how to get them to work.

What is clear to me is that I have a huge front end shaped gap in my competence that I should work on. Please do not bash me over this.

Now that you understand my situation; What tool or template would you recommend that I use?

I just want a simple good looking landing page with info and a link.

Thank you for any support or advice. I am just tired of failing at something I feel like should be an easy task to manage.

    • Mister Neon@lemmy.world
      2·
      2 months ago

      So bare minimum for no frills this doesn’t need to look fancy:

      1. Look up the bare minimum HTML template but it’s going to be more or less an html element that contain head and body elements.

      2. In the head is where you put your metadata. Add a title element along with a style element for your css. Do some research here for placing fancy things like a favicon, font families, and SEO stuff.

      3. In the body add a header, a div, and a footer elements. Add a nav element to your header for your navigation. If you’re using a single page then you’ll use anchor tags to get around. The div give it a class of “container”, “wrapper”, “app” or whatever. Put your legal and contact info in the footer.

      4. The h1 through h6 tags are headers with the higher number h being by default smaller font sizes. Use these as your titles for your content. You shouldn’t have more than h1 element.

      5. If you’re not using a style library then do a quick search for display grid and display flex. You can make a really rudimentary column and row layout without much effort.

      6. I’d section out my content then assign an id so the nav can jump to it. <section class=“container container_foobar” id=“foobar”> <h2>Foobar Experience</h2> <div class=“row”> <div class=“column column–size_2”> <p>words</p> </div> <div class=“row”> <div class=“column column–size_1”> <p>things</p> </div> </section>

      7. Quick style tips. Center your content if you don’t want to worry about screen size. Don’t put plain black text on a plain white background, it hurts the eyes for long periods of reading. Use box-sizing: border-box on your parent elements to make them more manageable. Padding adds size to an element; Margin pushes the element away. Add position relative to your content div and sections; if you get fancy with position (such as absolute or fixed) the element will reference that “relative parent” for it’s placement.

      8. Do all of this in VS Code if you don’t have a better editor. If you want images host them on your server and you can reference the URL endpoints in the html file.

      I have now worked on my day off. I hope that helped. Edit: Lemmy doesn’t like html markup in chat (reasonable). Here is an example section element