DEV Community

German
German

Posted on

How to make beautiful web pages?

Recently I started to make my own blog on Python/Flask and Bootstrap 4. I haven't got actually any problems with programming and creating html pages, but anyway, my website doesn't look so beautiful and attractive. What can you advise me to fix?

Top comments (8)

Collapse
 
aurelkurtula profile image
aurel kurtula • Edited

General advice that works for me every time:

You've done the code with Python/Flask. Great, consider that project finished! Now start a new project with HTML and CSS only!

Close your editor and take some A4 paper and draw the website you want. Hang the first draft on the wall and look at it. Think about white space balance, then draw the site again.

(With the screenshot you provided you have balance issues)

Draw it again and again till it looks good to your eyes.

If you drew your site you have now on paper your eyes would have spotted the alignment problems.

Then open the editor and with pure HTML "sketch" out what you have drawn, then with CSS make it look as you've planned.

Then add those to your Python/Flask

I always design my sites in HTML and CSS first (I might use react to get the repetitive stuff in, I used to use PHP - for for example creating ten sample posts is easier with a loop).

It even makes backend development easier. You know exactly what you need your code to do. For example you might want to tag your posts, but when you code it out, it's easy to forget. However if you've included it in your HTML, there's no way to forget it.

Basically imagine yourself as two different people. First as a designer, you don't know and don't care about Python/flask. All you know is drawing boxes on paper and converting them to HTML and CSS. then you change your mindset to Python/Flask. You got this html and CSS from some other dude, now fit it in.

I've never been satisfied with my CSS when I wrote it whilst developing. And, in a way, I found development easier when I had HTML and CSS ready made. Further, you realise that you don't really need complex JS or even bootstrap (but I realise my views against bootstrap might not be sound) when all you care about is HTML and CSS.


Years back Elliot J Stocks created a video where he showed how he designed his blog if you can find that video I think it's well worth watching.

Everyone talks about not putting too much on your site. In general they are talking about JS libraries, (I'd even include bootstrap). But that doesn't mean don't put effort in you design! That doesn't mean since "content is king" don't bother with design.

So, get a cup of what ever liquid you like, some paper and pen and start drawing, for 30-60 minutes you know nothing about Python/Flask, Bootstrap, Algorithms or Data structures, you just want articles to look good on a box


(Photo: Elliot J Stocks. Here's the article but can't find the video)

Collapse
 
skymanone profile image
German

Great! Thank you

Collapse
 
skymanone profile image
German

I'm so glad to get you answer. Also, You can see a small piece of my work now. It would be fine to get some feedback. Do not pay attention on titles, because it's created just for tests

 
skymanone profile image
German

I haven't finished it yet. You gave me really useful advices. In addition, what can you say about colour theme?

Collapse
 
skymanone profile image
German

actually, I do it only just for practice and getting experience

Collapse
 
aurelkurtula profile image
aurel kurtula

Since you're practicing, I highly recommend you stay away from bootstrap! You need experience with writing your own css not using ready made css (which what bootstrap is)

Thread Thread
 
skymanone profile image
German

Ok, I'll try to rewrite my frontend