The officially official Devuan Forum!

You are not logged in.

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

dice
Member
Registered: 2020-11-22
Posts: 559  
Website

Easy website from github pages.

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/

Offline

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

starbreaker
Member
From: United States
Registered: 2021-06-03
Posts: 23  
Website

Re: Easy website from github pages.

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/


"Out of order? [BLEEP!] Even in the future nothing works."
desktop: refurbished ThinkCentre M92p (i7, 32GB RAM, 1TB SSD, 2TB HDD)
laptop: refurbished Thinkpad T60 (Core 2 Duo, 3GB RAM, 1TB SSD)
gemini capsule: starbreaker.org

Offline

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

dice
Member
Registered: 2020-11-22
Posts: 559  
Website

Re: Easy website from github pages.

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

Offline

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

Head_on_a_Stick
Member
From: London
Registered: 2019-03-24
Posts: 1,694  
Website

Re: Easy website from github pages.

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)


antifa ftw!

Offline

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

dice
Member
Registered: 2020-11-22
Posts: 559  
Website

Re: Easy website from github pages.

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.

Offline

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

msi
Member
Registered: 2017-02-04
Posts: 143  

Re: Easy website from github pages.

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)

Offline

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

dice
Member
Registered: 2020-11-22
Posts: 559  
Website

Re: Easy website from github pages.

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/

Offline

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

starbreaker
Member
From: United States
Registered: 2021-06-03
Posts: 23  
Website

Re: Easy website from github pages.

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)


"Out of order? [BLEEP!] Even in the future nothing works."
desktop: refurbished ThinkCentre M92p (i7, 32GB RAM, 1TB SSD, 2TB HDD)
laptop: refurbished Thinkpad T60 (Core 2 Duo, 3GB RAM, 1TB SSD)
gemini capsule: starbreaker.org

Offline

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

dice
Member
Registered: 2020-11-22
Posts: 559  
Website

Re: Easy website from github pages.

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.

Offline

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

msi
Member
Registered: 2017-02-04
Posts: 143  

Re: Easy website from github pages.

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)

Offline

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

dice
Member
Registered: 2020-11-22
Posts: 559  
Website

Re: Easy website from github pages.

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/.

Offline

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

msi
Member
Registered: 2017-02-04
Posts: 143  

Re: Easy website from github pages.

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.

Offline

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

yeti
Member
From: I'm not here: U R halucinating
Registered: 2017-02-23
Posts: 253  

Re: Easy website from github pages.

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...


𝕰𝖛𝖊𝖗𝖞𝖙𝖍𝖎𝖓𝖌 𝖙𝖍𝖆𝖙 𝖈𝖔𝖒𝖊𝖘 𝖜𝖎𝖙𝖍𝖔𝖚𝖙 𝕺𝖗𝖌𝖒𝖔𝖉𝖊 𝖎𝖘 𝖉𝖎𝖘𝖙𝖎𝖓𝖌𝖚𝖎𝖘𝖍𝖆𝖇𝖑𝖊 𝖋𝖗𝖔𝖒 𝖒𝖆𝖌𝖎𝖈.  – 𝖞𝖊𝖙𝖎.
𝕯𝖔𝖓'𝖙 𝖋𝖔𝖗𝖌𝖊𝖙 𝖙𝖔 𝖚𝖓𝖘𝖚𝖇𝖘𝖈𝖗𝖎𝖇𝖊!

Offline

Board footer