jgthms / marksheet Goto Github PK

View Code? Open in Web Editor NEW

1.0K 26.0 193.0 3.02 MB

Free tutorial to learn HTML and CSS

Home Page: http://marksheet.io

License: MIT License

HTML 6.87% CSS 0.91% JavaScript 85.28% Sass 6.94%

css tutorial html free

marksheet's Introduction

Marksheet: a free HTML and CSS tutorial

License

The content of this project itself is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

The underlying source code used to format and display that content is licensed under the MIT license.

marksheet's People

Contributors

Stargazers

Watchers

Forkers

willemwijnans fusky akaz00 cthulhuu jordanlev immortalin amdshrif blueaccords edwinyzh davidmaoconnor jnettome darjanin ravenjam thejaredwilcurt scottsuen maviroot kwadwo kublaj jayfliz sebastianekstrom mahmoudaljabary jazzis18 alpower prashanth726 mikechristopher belev symbwell stormwild fiatluox mohammed-fawzy arnavpuri brwegley ismnoiet tequilajs absorber deejayelly khalidl modulexcite davidbradway earthfront kobeuu jeremy-shannon jonirrings stewones ideasvn-fork kevinrodbe digideskio njm2112 marcoarib sethips patrickk alkinkasap rubelahmed57 normanbrobinson leoruhland samuelhagan rojoplacebo g33ktony cruiseliugit miguelpaz webdevreference devreference arshadlrn a1ip willytiengo danielrubango e-f-e blueclock jacob-carrier kingleoric2010 diproart diullei adroit11 sushantsikka dynamicmetaflow 19test vianziro freeman-67 csseditor herbertkarajan cnchg hnnguyen45thinkful tanrax wolffx soufianedev7 dedalik lajunta kbsbroad zu asdevgit shilezi 0fline mrpc4 agm30 palimadra gr550 jandsu pauljo livestoriz cpsloal

marksheet's Issues

Translate to Spanish

Good. I would love to translate into Spanish. With your permission. I figure it would take me the whole month of July. Of course, if I have your permission. I would make a Folk. Thank you!

Incorrect/ Incomplete Select Example

In the 2015-03-07-html-forms.md post the select tag is missing a name attribute and the options are missing their value attributes.

Extra Word Error

Great site, but there's either an extra "a" or a missing qualifier in this line in 1.2: "It was invented in 1969 to connect a computers across the US."

Translate to Portuguese

Hello! Can I translate that awesome work to Portuguese (pt-BR) ? If yes, how ?

Spelling Error

On the http://marksheet.io/css-color-units.html page

under the "hsl and hsla" section,

the word 'define' should be 'defined'

Again, the red color of this website is define this way in HSL:

missing facebook image which is set to OG

that's it

<meta property="og:image" content="http://marksheet.io/images/marksheet-facebook.png">

Italian translation

Like others, I would like to translate this awesome work into my native language, I await instructions about it (whether to fork and host, or add my translation to this repo)

Hello
First I want to thank for the great website you have created.
And I noticed a mistake so I thought I would let you know.
here at section http://marksheet.io/css-animations.html#animation-fill-mode you are saying that animation ends with blue, but in the table the animation with green. I think this is a mistake, isn't it ?

Typo https://marksheet.io/css-transitions.html

You can meaning that the transition will happen at a constant speed. Timing functions can make the transition accelerate and/or slow down.

Code color not applied in Mac Firefox

This might very well be something specific to my setup, but I'm seeing it in safe mode, too. The text color for <code> elements visually remains black, so they aren't readable.

You can see in the dev tools, though, that it seems to be correctly computed as the bright aqua color.

At first I thought it was some extension gone awry, but like I said, it's happening with everything disabled too. Might be an FF bug, but that would surprise me, too...

Content does show inaccessible examples

I can’t comment on everything, but there are a lot of inaccessible examples on the pages, for example:

<html> element is listed without a language specified. http://marksheet.io/html-valid-document.html#the-html-element
Images: No alt attribute shown or explained. http://marksheet.io/html-images.html
Tables: Need at least scope attributes or headers and ids in some instances. http://marksheet.io/html-tables.html
Forms: Should have labels in the early examples as well. There is no point in using unlabelled form elements. Labels are often not associated using for and id which makes them useless. http://marksheet.io/html-forms.html

VLC can create files

On this page you claim that VLC can not create files, but actually it can create video and audio files.

Otherwise very good work!

Typo in Domains paragraph

I believe you meant "tell them apart" on the domains paragraph.

How about a "Where to go next" section after Sass Section

Basically just a list of curated resources for beginners.

Stuff like:

Marksheet Typo, Css Section 6: Css Background

Bear in mind to always to choose an appropriate text color to keep your content easy to read.

I think this is a grammatical error. The last "to" should be deleted.

Typo in sentence

http://marksheet.io/css-transitions.html

You can meaning that the transition will happen at a constant speed.

not sure what the intention here was, so no pull request with correction, sorry :}

Replace Internet Explorer

I understand that it says "most popular" but as Microsoft Edge has been around for a while now and Internet Explorer 11 came out in 2013, I think it should be okay to replace it in the introduction? Especially as that appears to be the IE9 logo.

Better SEO

A bit more publicity and search engine optimization would be nice. I forgot to bookmark it and spent quite some time diggin through the Show HN history trying to find it.

Mistake in text

http://marksheet.io/html-syntax.html#comments

"A comment starts wih ."

Issue about linear-gradient in CSS

Issue link

CSS gradients

Original Text

If you want a more specific angle, you can use a value in degrees:

0deg is the default value, from top to bottom

20deg is slightly diagonal, going clockwise

90deg is like 3pm, from right to left

180deg is from bottom to top

Should be corrected to:

If you want a more specific angle, you can use a value in degrees:

0deg is the default value, from bottom to top

20deg is slightly diagonal, going clockwise

90deg is like 3pm, from left to right

180deg is from top to bottom

Reference

MDN

Include Atom in list popular text editors

According to G2 Crowd, Atom is more recently a very popular text editor. It would be nice if you could include it on the list of popular text editors.

Propose JS section

Firstly, though this may increase the number of pages, a section for JavaScript (JS) is necessary. JS is one of the core branches of front end code and without it, most of the web wouldn't be what it is today. In fact, I definitely dare to say that the Saas section should be removed in favour of a JS section. It is also kinda unfair to other pre-processors of CSS, the (largely thought of as superior) post processors of CSS and all the things used when writing CSS, JS and HTML (I'm talking frameworks, the plating languages etc.).

Wrong explanation of Hexadecimal system

In hexadecimal, we have 16 symbols to form numbers. Because 0-9 are not enough symbols, we also use A-F. And it starts at zero. So:

the number 4 in hexadecimal is 3

the number 12 in hexadecimal is B

This is not correct: The (decimal) number 4 in hexadezimal is also 4, due to dezimal and hexadezimal starting at zero.
The same mistake has happened in the second line: The (decimal) number 12 in hexadecimal is C.

Wrong information about "The Sass Way" using SASS instead of SCSS

on link "https://marksheet.io/sass-scss-less.html" it's stated on "remember that" section:

all resources on the internet (like The Sass Way) mention Sass, not SCSS

actually, The Sass Way use mostly SCSS in their examples, as the majority of the resources that I know about.

Anatomy of a URL link 301 redirects to an unrelated page

This page now redirects to a generic articles page:
https://doepud.co.uk/blog/anatomy-of-a-url

Looks like it's been returning 301 redirect since May-2021.

200 status last seen April 2021:
https://web.archive.org/web/20210414023525/https://doepud.co.uk/blog/anatomy-of-a-url

Translate to Danish

Hi! I really like Marksheet.io and Denmark really need a danish site like this. Can i have your permission to

Fork your repo and translate it to danish
Serve under a danish domain with credits to your site

The site will be without ads of course. 😄

A few spelling issues

There is a spelling error in 'The Internet' section under domains.

Should be apart.

Also on web section.

Should be remembering.

Code Sample and Result doesn't match in HTML form

In HTML From section, https://marksheet.io/html-forms.html, the example of complete signup form's code and result doesn't match. In the code, all value attributes are set while in the result no default values are shown.

Syntax error in scss example

There's some syntax error in 2nd example of section Nesting purpose.

Perhaps missing some ampersand also?

minify the assets (html pages, css, js) and clean the whitespaces

Loading of each page is damn slow with 100 Mbps connection.

On block and inline nesting

The HTML block and inline elements section lists paragraphs (<p>) as block elements. The HTML hierarchy section states that

Block elements can contain either block or inline elements.

This seems to imply that paragrahps can contain block elements. Unfortunately, this is wrong: the content model for P element allows only phrasing content (HTML5 analog of HTML4's "inline elements"), and, since the end tag for P is optional (again, in contradiction to Block and inline elements section saying that all block elements always have closing tags) it gets implicitly closed just before any 'block' element opening tag, resulting in this new block element being its sibling, not child. It seems to be quite a common confusion for beginners (example).

Moreover, the tutorial claims that it is on HTML5, but HTML5 doesn't have terms 'block and inline elements' at all. It has 'flow content' and 'phrasing content' instead. Aside from being unable to explain why some block elements can contain other blocks and some block elements can't, the oversimplified 'block vs. inline' classification leads many beginners to false conclusion that an element can be converted from one kind to another just by changing its CSS display property (because its values sound the same).

Wouldn't it be better to use HTML5 terms in the HTML5 tutorial instead of HTML4 terms, and introduce the true "Content model" concept instead of oversimplified heurisitic rules with too many exceptions? It might be harder to get from start, but it will lead to much deeper understanding of the topic and much less confusion in the practice.