Skip to content
loading...
markdown guide
 

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)

 
 

Firstly, do you have any link to showcase it ?

Secondly, you can read the awesome and short book Don't make me think!

Thirdly, keep a simple rule in mind: KISS

It's a blog, so made to showcase content (mainly text).

  • Don't put rubbish in front of the user's eyes for them to be distracted with.
  • Don't slow it with huge 3rd party content, javascript files etc. The article is best left as static document.

My favourite example of such principles is the BigBinary blog, here.

I, personally, tried to follow the same principles while being a serious beginner in CSS, and this is the result: Here

 

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

 

Top bar is stuck to the top of the window. You have two solutions:

  • Remove the rounded edges
  • Add a margin of at least 1em before your page container

Subscribe/Write new post doesn't explicitly showcase that they are links:

  • make a slight border-bottom
  • style them as buttons

Subscribe/Write new post is too much stuck to the left/right sides. Add some padding !

I don't know about the date behaviour, but always add the full date (as ISO8601 preferably) in title, so if someone hovers the short-hand date, he'll be able to see the full date.

Apart from that, I think the overall UI is nice.

Could you display an example of a given article ?

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

Nothing to say about that. It's simple but clear.

 

Suggestion: please don't just create one of the bazillions of absolutely identical Bootstrap sites.

 

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

 

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)

Ok, I'll try to rewrite my frontend

Classic DEV Post from Dec 11 '19

If you work as a dev for a product team, what's it like?

German profile image

Sore eyes?

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ❤️