
Free Ebook: How to Code in HTML5 and CSS3 - pimpl
http://howtocodeinhtml.com/
======
tsm
Any recommendations for a backend web developer who knows the basics of HTML
and CSS but not much more?

~~~
yodsanklai
Related question: how do "pros" write web pages. Do they do it by hand or do
they use some type of wysiwyg editor?

I know the basics of HTML/CSS too (I suppose all programmers do), but still I
don't feel qualified to make a web page. It seems to me that it's more a
designer than a programmer task, am I wrong?

~~~
grimgrin
I use vim with a few plugins to support newer CSS3/HTML5 related syntax.

[https://github.com/othree/html5.vim](https://github.com/othree/html5.vim)

[https://github.com/hail2u/vim-css3-syntax](https://github.com/hail2u/vim-
css3-syntax)

Chrome Developer Tools are invaluable in my workflow.

[https://developer.chrome.com/devtools](https://developer.chrome.com/devtools)

I can't speak to what the majority of designers use. I would guess that
Dreamweaver is less popular today than it was before. I might be wrong,
though?

------
rikkus
Looks easy to follow and the design is clean. It mentions accessibility in the
'What's next?' chapter, though, while I would have hoped this would be covered
as part of the material in general.

For example, the section on forms suggests you use the 'for' attribute to link
a label with a form element, which is great, but it wouldn't take much extra
text to give a short explanation why this is helpful to many users.

~~~
ferrante
Hi,

Thanks for your feedback! I will consider your points (very good) when working
on the next releases.

Author

~~~
oneplease
Can I suggest adding a section on responsive web design? Thanks!

------
jtheory
I haven't read through more than the ToC at the moment -- but here's a quick
summary of what I'd be interested to see, aside from just putting together
uncluttered (and as-semantic-as-possible) HTML and maintainable CSS:

Support for older browsers -- I'd assume anything here will support evergreen
browsers (including current IE) and emphasize how to always support that
baseline. But what's involved in supporting older versions of IE, in
particular? Easy mode: IE9+. Hard mode: IE6+. (I haven't had business reasons
to support anything older than that, fortunately). There's obviously work
involved (and not all sites need to do it) but it's worth pointing in the
right direction for those who need to know.

Support for devices: how will it display on a phone? Tablet? What's likely to
break? What main approaches are there? E.g., horiz elements wrap to vertical,
different display entirely, let the user zoom/scan around, etc..

i18n/l10n: when you add multi-language support, some text will suddenly be
three times as long, or even need to be displayed right-to-left. Numbers may
align differently. What will happen to your menus, dropdowns, titles, etc.?
Will they wrap in an ugly way, or be cut off? It's pretty common for things to
just break, because the original site was built by someone who assumed "Home"
would always be 4 chars.

And accessibility (already mentioned in another comment). Going into depth may
be overkill, but I'd strongly advise covering the choices that _ruin_
accessibility entirely. There are basic best practices that aren't too hard to
follow that will make a site at least usable by people with non-standard
browsers (even if it won't win any awards).

~~~
ryanSrich
> Support for older browsers...

Please no. The web industry has suffered enough because of IE. There's no
reason for a book like this to even acknowledge it's existence. Of course I'm
referring to older versions of IE. Newer ones at least support common use
cases.

I'd maybe mention the use of something like Respond [1] to deal with media
queries but I wouldn't go any further than that.

1\.
[https://github.com/scottjehl/Respond](https://github.com/scottjehl/Respond)

~~~
jtheory
> There's no reason for a book like this to even acknowledge it's existence.

That's not right; of course there's _are_ reasons, though you're welcome to
debate how much weight those reasons have.

I don't know what percentage of sites have a business need to support old IE
versions.

I know we do -- our site is used by medical staff in hospitals where the PCs
are locked-down, upgrades are hugely expensive and difficult (the silent auto-
upgrade approach just isn't safe), and so even though _no one_ likes IE7 there
are still plenty of hospitals who haven't yet succeeded in upgrading.

There are other industries besides healthcare that suffer from this effect as
well -- think especially of cases where companies have paid serious money for
custom-developed systems that were cutting-edge in 1999, and thus were fully-
browser-based and used the leading browser technology at the time, which was
IE 5 with a ton of ActiveX (or Java applets?). If they still fill the business
need perfectly well, the options around upgrading are not at all clear-cut.

I'm not sure how big this need is; I'm obviously biased because it affects me
directly.

~~~
ryanSrich
Follow up question.

Do you feel like the industry's support for older versions of IE perpetuates
the idea that businesses can continue using such archaic systems?

~~~
jtheory
It's the sort of question that needs more data than just what I think about
it.

But for a gut feeling -- no, not at all. No one wants to support old browsers,
and if you pay for custom site development, it's a common practice to add
seriously high extra fees if that's a requirement.

And so most sites _don 't_ support them.

But all of this doesn't really encourage or discourage a business that has
really poor options around upgrading. In some ways it's just irrelevant;
they're using the browser as a tool for employees to complete specific tasks,
and if Facebook doesn't work (but the expensive internal tools do) that's just
fine.

The two domains collide when there are _new_ , external tools that are
introduced to the environment. ...and this is why we need some support of old
IE, because we really don't want our sales pitch to include "...but you'll
need to also spend untold amounts of cash and effort to upgrade your browsers,
first".

------
Puts
Apendix A. would be to know the difference between markup and code...

~~~
iQuercus
Appendix B – "Correction to Appendix A"

"It is reasonable to say that HTML markup is code (and writing HTML markup is
coding), provided that people understand that it is comparable to using coded
notations when talking or writing. Think about the use of product codes, or
using special code books when sending telegraphs, so that short coded
presentations stand for long statements, or using colors as codes so that red
means "stop" or "warning" or "hot". It's a matter of using some notational
system which has been specifically agreed upon. (Actually, natural languages
are not completely different from codes; they too are based on agreements,
just more vague and implicit.)"

[https://www.cs.tut.fi/~jkorpela/prog.html](https://www.cs.tut.fi/~jkorpela/prog.html)

To be honest, it's a bit silly to argue this stuff to begin with. As long as
the meaning "to write/type HTML and CSS" was conveyed, does it really matter?
To look at a document as big as this and latch on to the code vs. not code
distinction (an arbitrary one depending on how you look at it) in the title is
to miss the document's greater value.

~~~
Puts
I think it does matter because code makes it sound complex, wheres markup
explains what it actually is. I don't think everybody in this world should
know how to program ("code") but I do think every person in this world should
know the concept of markup, because essentially that's the same thing as
knowing how to structure text which is just as important as spelling and
grammar.

~~~
jwdunne
What is your definition of 'code'?

~~~
Puts
To make it simple I'd say markup is about structure where code has inherent
meaning.

For example: <p>The quick brown fox jumps over the lazy dog.</p>

Here the markup does not change the fact that the dog is lazy. That is the
markup does not give meaning to the sentence.

But with code, the meaning is "coded" in to the text. Lazy could be code for
yellow, which in that case changes the meaning of the sentence.

~~~
jotux
>I'd say markup is about structure where code has inherent meaning.

With this definition couldn't you make the argument that code that defines
structure isn't code, but markup?

------
ArekDymalski
Seems to be really well crafted for the complete beginners with step-by-step,
encouraging approach (LEGO, clear transition from text to HTML with side-by-
side comparison etc.)

If you're targeting novices, perhaps you'll find some inspiration for the
layout in O'Reilly's "Head First" series:
[http://shop.oreilly.com/category/series/head-
first.do?sortby...](http://shop.oreilly.com/category/series/head-
first.do?sortby=publicationDate&page=all)

They have done incredible work to make not only the content, but also its
presentation attractive for the beginners.

------
otar
Thank you! This was timely for me.

I'm teaching my small nephew basics of web development and from now on I'll be
following your book.

~~~
ferrante
Thanks! Good luck!

Author

------
mcbetz
Just out of of curiosity: Which tools did you use to write the book? I know
it's especially hard to create different file format (HTML, epub, PDF).

~~~
ferrante
HTML to write a book. PrinceXML to generate a PDF out of it. Then calibre for
Mac to generate epub/mobi from HTML. I had to edit manually the output from
calibre though.

~~~
petecooper
Take a look at Scrivener[1], it might be a good fit for you.

[1]
[https://www.literatureandlatte.com/scrivener.php](https://www.literatureandlatte.com/scrivener.php)

------
DTV
Whenever I see one of these free books or websites, I say "Oh boy! I'm finally
going to sit down and learn how to code/build websites/etc." I start but after
a while I begin to slow down and ultimately stop.

I want to learn to code but every guide and how-to I read tells me to start
with a different programming language and I never know who to trust.

~~~
farresito
Well, that is true when there are several languages that overlap (for example,
you might want to do some server stuff and you find that there is C++, Java,
C#, etc.); however, if you are trying to learn the web, then you definitely
need to learn HTML and CSS, since those are the only languages available that
do the thing they are good at.

If you are trying to build websites, then that's the way to go.

------
bshimmin
"I cried when I wrote it." A glowing endorsement indeed from the author - I
heartily approve!

------
yazin
Great beginners guide! Perhaps consider selling it, or adding a donate button.
I've noticed that I always finish books I've actually paid for :)

------
SeanDav
Something like this but for JavaScript would be useful.

------
tdsamardzhiev
Add some exercises. Even better, add tons of them :)

------
sean_the_geek
Thanks to the author. Just what I was looking for!

------
rebootthesystem
Except...it isn't coding, it's markup.

Not trying to be pedantic. There is a huge difference between the two.

~~~
roneesh
Certainly true, and when I teach I try and make sure the distinction is
respected. However as time goes in, it's worthwhile to highlight the ways
markup is slowly becoming like coding. Semantic markup acts a lot like an
instruction for the crawlers reading pages. CSS and its robust pre-processor
eco-system now allow variables, mixins and includes which make it a great
introduction to programming concepts for those totally new.

~~~
rebootthesystem
If One can't write bubble sort, a genetic solver or iterate through data
(array, list, dictionary, whatever) while making decisions I think it is safe
to say it is not coding.

If you can't go through a CS curriculum with it then it isn't coding? Maybe
that's the distinction.

Yet I do see your point and there's probably nothing horrible about using it
in your title. "Learn HTML and CSS Markup" may have been a better title,
possibly even from an SEO perspective.

Again, not trying to be pedantic. Not a big deal. No data structures were
harmed in the making of this title.

BTW, that aside, this nicely done. I am going to have my son go through it.

~~~
Retra
If you want to explain how markup is different from a general purpose
language, you can always refer to the fact that markup isn't turing complete,
and can't be used to perform arbitrary loops and arithmetic.

But that would also make things like basic SQL 'not coding', and any program
you wrote where you didn't use an arbitrarily long loop.

That makes "print('Hello world')" not coding, and then it becomes clear that
you're drawing an arbitrary line in the sand. "If you aren't writing
compilers, you're not coding" or some such nonsense.

HTML and CSS are languages for en _coding_ the semantics of webpage formatting
and content. They are domain specific languages. They are not turing complete.
But they _are_ coding.

------
ocdtrekkie
When you read the first line of Chapter One, "I really like The Verge", you
suddenly lose all interest in the rest of what he has to say.

