Easy website from github pages.

dice · 2021-07-08 15:16:09

Thought i would post my effort in creating a website on github pages. No javascript, just html and css.

Please let me know of any errors in this mockup. As it is it just content for the sake of content to learn from, i intend to go in other directions in the future.

https://techblerbs.github.io/

starbreaker · 2021-07-08 15:32:47

I don't know if you're interested in web accessibility, but here's what you see if you run your site through wave.webaim.org: https://wave.webaim.org/report#/https:/ … github.io/

dice · 2021-07-08 15:50:27

Thanks starbreaker, good learning tool that website. Made some corrections, still learning though.

Head_on_a_Stick · 2021-07-09 09:17:02

Your site looks fine but I would use the plain serif alias for the font — not everybody will have DeJaVu Serif (I don't) and the alias will ensure the site font matches the system font.

Have you seen http://bettermotherfuckingwebsite.com/? I used it for inspiration when writing my GitHub pages site.

There's a lot you can do with plain CSS & HTML:

https://github.com/you-dont-need/You-Do … JavaScript

Last edited by Head_on_a_Stick (2021-07-09 09:31:18)

dice · 2021-07-09 12:51:05

Had a bit of time to sit down and look into that web accessibility starbreaker, only one alert now saying no page regions, ill hopefully get a handle on that soon. Thanks again.

Thanks for the tips head on a stick, changed to plain serif and monospace for the font, good point.

I actually copied that same bmfw web site, just took elements from it i wanted to make my own. Yours is a good example of getting the message across with kiss principles. Thanks for the link too, i dont plan on learning javascript when there is so much that can be done with css and html on there own.

msi · 2021-07-09 13:03:58

Good to see someone aiming to build a reasonable Web site.

I see the following issues with this one, though:

1. I think it's not necessarily the best idea to promote GitHub by using it for something that really doesn't require GitHub.

2. Link formatting:

Quoting a comment I've recently posted somewhere else:

Hyperlinks should simply be underlined at all times – except for a few permissible exceptions, e.g., links that are clearly part of a menu bar, or links on web pages that naturally have a lot of them in their content (e.g., Wikipedia). [...] [T]he reason you use underlining to denote links is because its use in printed works has been obsoleted. All other standard formatting options are “taken”, which is also why they should not be used as a basis to format links.
So, it is underlining that is free to mark something that is beyond printed text. And on Web pages, that's hyperlinks.
Using only color to denote links is [a bad idea]. Anyone who does that should try to work with a greyscale version of what they designed for a week. (Some people are (partly) color-blind.) Then they would notice that while shades of grey might be relatively easy to tell from one another in a small piece of text when they're sufficiently different, it's a pain to locate bits of a certain shade of grey in a larger body of text. Underlining mitigates this to a considerable extent.

Speaking of color and color-blindness: I have pretty good vision. But when I take a screenshot of your website and transform that into a greyscale image, there is no way for me to tell a visited link from an unvisited one. And my guess is that, for visually impaired people, even the colored variant would present a bit of a challenge.

Last edited by msi (2021-07-09 13:04:55)

dice · 2021-07-09 14:01:57

duly noted, thanks for your insight msi, appreciate it. Its little things like this that make the web worthwhile and accessible for everyone.

Updated but still a wip: https://techblerbs.github.io/

starbreaker · 2021-07-09 15:38:50

dice wrote:

Had a bit of time to sit down and look into that web accessibility starbreaker, only one alert now saying no page regions, ill hopefully get a handle on that soon. Thanks again.

If you want to fix the "no page regions" issue, it should be a simple adjustment since you're already using the doctype for HTML5. I noticed that you're using a <div> element with a "header" class for your header; you could replace that with HTML5's <header> element. There's also a <footer> element. You could wrap your page content in <main>, and put your navigation inside <nav>.

PS: Mozilla still has their MDN documentation for HTML, CSS, and JavaScript. It's an excellent reference and I use it at my day job. https://developer.mozilla.org/

Last edited by starbreaker (2021-07-09 15:40:31)

dice · 2021-07-10 11:42:01

Thanks again starbreaker, that really helped me understand how to get the html and css together better, its easier to configure css when the page is layed out with page regions as described. I decided to go all monospace fonts as well as i believe it looks better and more readable imo.

msi · 2021-07-10 14:26:27

dice wrote:

I decided to go all monospace fonts as well as i believe it looks better and more readable imo.

I find this slightly problematic because, doing it that way, you lose the simplest possible way of denoting inline code, which is also the standard way of denoting inline code.

Last edited by msi (2021-07-10 14:31:31)

dice · 2021-07-10 15:04:14

msi wrote:

dice wrote:
I decided to go all monospace fonts as well as i believe it looks better and more readable imo.
I find this slightly problematic because, doing it that way, you lose the simplest possible way of denoting inline code, which is also the standard way of denoting inline code.

I could perhaps denote inline code where necessary with css styles and marking the beginning and end of the code with a say capitals like [BEGIN_CODE] code [END_CODE] ? I see your point though.

Inspiration for that all monospace look, http://forthworks.com/.

msi · 2021-07-10 18:52:22

dice wrote:

Inspiration for that all monospace look, http://forthworks.com/.

I see. But that is someone effectively writing plain text with hyperlinks. HTML being a markup language means you don't have to resort to the kind of formatting hacks that plain text requires, e.g., using backticks to denote code, as it's usually done.

One way to mark inline code in an all-monospace scenario is to have it shown with a different background color. And that is probably the best way. It's a bit like underlining for links and, if done right, has the same benefits over using (just) a different text color.

Often (including on this forum), a different backgorund color is used for inline code on top of displaying it in a monospaced type, which makes it nicely easy to tell references to the find command from regular usage of the word “find”, for example.

yeti · 2021-07-11 09:41:54

msi wrote:

Often (including on this forum), a different backgorund color is used for inline code on top of displaying it in a monospaced type, which makes it nicely easy to tell references to the find command from regular usage of the word “find”, for example.

And such a boxed inline code would still be recognisable in a pure B/W printout...

The officially official Devuan Forum!

#1 2021-07-08 15:16:09

Easy website from github pages.

#2 2021-07-08 15:32:47

Re: Easy website from github pages.

#3 2021-07-08 15:50:27

Re: Easy website from github pages.

#4 2021-07-09 09:17:02

Re: Easy website from github pages.

#5 2021-07-09 12:51:05

Re: Easy website from github pages.

#6 2021-07-09 13:03:58

Re: Easy website from github pages.

#7 2021-07-09 14:01:57

Re: Easy website from github pages.

#8 2021-07-09 15:38:50

Re: Easy website from github pages.

#9 2021-07-10 11:42:01

Re: Easy website from github pages.

#10 2021-07-10 14:26:27

Re: Easy website from github pages.

#11 2021-07-10 15:04:14

Re: Easy website from github pages.

#12 2021-07-10 18:52:22

Re: Easy website from github pages.

#13 2021-07-11 09:41:54

Re: Easy website from github pages.

Board footer