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.
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?
Imagine if someone wanted to develop a simple web game or something, but they didn’t have backend experience. They’re asking what tool they should use. They say they tried nginx, apache, and caddy, they messed around with PHP and node, but they’re very complicated, full of features, and they create malfunctioning web pages.
What tool or template would you recommend that they use?
I’m not saying this to bash you, just gently telling you that you are using the correct tools, and I suspect that you’re unfamiliar with being a beginner at something web-related, so you’re assuming that the tool is the issue if it doesn’t work exactly the way you want it right away. The issue is just that you haven’t learned your way around yet.
Wordpress is probably your easiest option. Pay for one of the paid themes that looks nice and fits exactly with what you’d like to do, and customize it. Hugo, Bootstrap or something similar may better suit how you want your workflow to be, although they’ll be a little bit less professional.
If you have a Hugo theme in mind that looks nice, I’d be happy to take a crack at getting it working, I’ve worked with Hugo before.
Yeah, I am very much aware that I am a beginner and getting started really is the biggest problem here. I don’t know where to start. Doing bullet lists in html for hours on end in some web course feels like I am not learning much other than the names of different tags. But what is my next step? I don’t know. All tutorials, courses or guides I find are either way to basic or way to complicated. This is where I am at, not knowing how to progress really.
I have done a blog using a simple Hugo theme before which was great. Therefore I was leaning towards that sort of tool now.
I have been looking at this Hugo theme, but never got it to work as I wanted it to. Also, it has to be re-done from “marketing” to just a dead simple company info page.
I appreciate you offering, but I don’t expect you to work for me. I will figure something out eventually. I am just a bit frustrated. It feels like I should be able to whip something up. The task is not big, it is just new to me.
Thank you for your reply
Makes sense. I know it has a bad reputation, but GPT or Claude can sometimes be really useful to bridge that gap when you’re first getting started with something until you get your feet under you. I know exactly the feeling you’re talking about. The chatbots aren’t smart enough to really get the big work done, but they can point you in the right direction for the first few steps so you don’t have to dig through 10 different tutorials to find where the basic stuff is.
You might have already found this, but if you do decide to start out with that Hugo theme, content/*.md, layouts/_default/baseof.html and layouts/_default/index.html are the big starting points for page content and presentation. Start with just compiling the completely default site, make sure it looks like the demo, then make changes one by one, asking the chatbot for what file to change if you get lost for how to make a change or it doesn’t seem like it’s functioning right, but ignoring its attempts to do it for you since it usually won’t get it completely right.
Best of luck!
So I’m a front end dev so I’m actually the opposite. My first question is where you want this to live, how are you going to host this site?
If you don’t need anything fancy can a standard HTML file with some style tags in the head with some fundamental css suffice?
A standard HTML file with some styling is all I need. I will host it on my own server in a nginx container on k8s.
So bare minimum for no frills this doesn’t need to look fancy:
-
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.
-
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.
-
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.
-
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.
-
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.
-
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>
-
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.
-
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
-
I’d say consider playing around with the React-App template on glitch.com! I’m biased because I do React for my main job, but it is pretty easy to use and if you grab a library like MaterialUI you get some really pretty looking components without having to do any HTML/CSS yourself
Cool, I will look into that! I am a bit scared it is above my level of understanding to jump into React when I can hardly do what I want in plain html and css, but I will test it out!
One simple page means just HTML with CSS served by Nginx or Apache. Nothing more is needed. Everything else is overengineered. As long as you don’t need any interactivity you should stay with static HTML. When it goes beyond three pages get whatever language you’re familiar with and use it just to break up the pages into common elements.
Don’t start thinking about using a CMS unless you or someone without HTML skills has to do frequent changes.
Keep it simple.
You should also consider hiring a designer to design the page and while they’re at it a matching logo and letterhead. Probably not in that order.
Yeah, if I had the HTML and CSS I would be golden. I have no problems hosting an nginx container and all that.
The problem is as soon as I want to change something in the style/structure I am at a loss. I will start messing around where it seems appropriate, but I will never get it where I want, because I don’t know html/css. I am only copying what I see and doing qualified guesses.
Yeah, I might hire someone to do a webpage some time in the future, but not now. For now an OK page will have to do.
I’ve had good success with templates from html5up.net.
The code is clean, files are small.
Yeah, I’ve tried some of them out, but am too bad at doing html to get where I want with most of them.
Try using Swipepages to start
Keep it simple stupid. Find a nice theme on WordPress and refine it from their. Ive never done it but my frontend dev does things with figma if u want some more advanced react type shit going on.
If ur really struggling u can always just pay some guy on fiver to do it for ya.
eat your own dogfood. make something, maybe not public and use it once a day like you wanted dev work. once online get any friends and family to do so and give feedback.
Draw what you want your website to look like on a piece of paper first, then focus on using the tools at hand to create what you drew.
There’s a lot you can do with pure HTML using DIVs and “flexbox”.
When you have to ask, consult a professional. Last time I made a webpage for our company, it was with the senior boss, on a Friday afternoon/evening, with a simple paint program and a text editor. That was 30+ years ago. I would not touch web frontend development with a ten foot pole, even though I basically program anything that is not on a tree at the count of three.
