Here's a design for my personal website:

• a free resource for Web-UI engineers
• looks like a book
• composed with Typography. 4 in total: Cormorant, Laila, Mr Bedfort, and Georgia.
• using HTML, CSS, & JS
• built with @eleven_ty


https://www.youtube.com/watch?v=AWbzTVSuEhc

Image 1: The front cover which serves as the homepage's header
Image 2: Fallback design of the front cover if for some reason, the web fonts fail to load
Image 3: The TOC. The article on Content Layout is an intro to a CSS framework I'm working on. Trying to fill a gap still left open by Bootstrap/Tailwind Typography. I'll be publishing a second part in a couple of days. This one as well needs an update
Image 4: The footer design

I must say, the design is STILL a work in progress.

I'll be experimenting with flipping pages (like those of a book) rather than scrolling the page as it's common on the web. I'll be sharing updates on Twitter @toheebdotcom

For now, Ask me anything about designing websites. I should be able to share one or two experiences I have.

Knowing there are people who major on typography is enough to give you a second thought when preparing that text on the graphic you're about to make.

Unnecessary line break could cause the reader to misinterprete what you intend to pass across just like kerning does in The rapist when you actually meant Therapist. Big blunder right?

Here's another example, pictured below. Why the line break in the hash tag? when the designer could have reduce the font size. If you are a Yoruba guy, the 3-letter word on the new line means Stupid which is enough to shift your cognitive sense from the real message.





Think of your readers when designing that piece!

Jregz:
Seriously? Why? If you do, someone would think it's "secure" and start his own crappy startup.

What's the essence of building a payment gateway if it won't be secured in the first place?

Well, mine is simple...

25 real projects before August...

You want to learn all these only for you to start writing application letters?

Think again Bro! You can do better...

So?

At first, I was understanding the comments. Now, I don't know if I understood what I taught I understand.

A very good one for the initiative.

As Astro gotten to the production level? I meant if it can be used in creating some apps right away.

If yes, are there any tutorials that introduces the Lang? Majority won't want to know the cores the thread has been discussing at first... Maybe later.

As Asalimpo has said, you may need to leap back and talk more on what makes astro better rather than the generics.

Nice one again!

Nice job bro...

However, the interface can be better...

Before the points, have you ever been in a position where you know something is not right when when you look at it? Unfortunately, you can't say what it is... That's your instinct telling you there are some so called tiny details missing.

Let's see how we can improve the interface. At the end of it, compare the two and smile at the result.

Let's start from the very top..

On alignment.
To the left of Gradekulator, I believe that's the logo. You should align it to the left of the parameter's tab.

Same should happen to the "about" button and the "output" tab. (Which I think is done already)

But something will still not feel right or else you make the margin of the left (the space between the parameters tab to the boundary of the window) equal to the right margin(the space between the output tab and the right window).



*********
Remember those days when we don't need to underline the topic of our letters if written in capital letters? These are user experience tips. On the web, underlined text are mostly used to denote a clickable link, I guess that's why you did that but you already denote the clickable effect when you used a button.

For the best result, remove the line even though you will be using small letters.

For better result, add a little space at the bottom of the text before the line. Do this if you don't want the option above.


On whitespace
The parameter's tab will look better if the space between the columns of course, score, units and total can be equal.

The width of each input boxes should be in proportion as well.

**
For the text PARAMETERS and OUTPUT, add some padding space as well. You may need to restructure the parameter's tab because COURSE needs a breathing space as well.

A tip here is to push the PARAMETERS' text upwards so the line is now in form of a step at the right of the text.

Same tip above apply to the OUTPUT tab because of the Grade Point.
********

The placeholder doesn't need to be in capital letters. Placeholder are suppose to be subtle. If you need to drag the user's attention to that spot, use colour instead. It maybe background colour. Sometimes, until we do it is when we know the best option.

I will be glad if you can implement these tips and see for yourself, post a copy here as well.

Like someone said above, nice start!

Plus 1 for the interface...


Okay, after that, your target matter should be to kids