9 ms·
Free Ebook: How to Code in HTML5 and CSS3
- rikkus 11y agoLooks 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.
- Puts 11y agoApendix A. would be to know the difference between markup and code...
- iQuercus 11y agoAppendix 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 11y agoI 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 11y agoWhat is your definition of 'code'?
- Puts 11y agoTo 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.
- SerpentJoe 11y agoSurely script and meta elements aren't markup?
- jotux 11y ago>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?
- hnal943 11y ago"Markup" is insider jargon. A layperson looking at HTML may (reasonably) assume that is the website's "code". To the uninitiated, "markup" may be even more intimidating than "code".
- 11y ago
- otar 11y agoThank 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 11y agoThanks! Good luck! Author
- mcbetz 11y agoJust 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 11y agoHTML 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 11y agoTake 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
- rachelandrew 11y agoSigil is really good for tweaking your EPUBs http://sigil-ebook.com/ http://sigil-ebook.com/ I use Pandoc to generate my EPUB and then Sigil to do a bit of tidying. Usually just the front matter etc. Some other resources here, the slides from ConFoo are the most up to date http://rachelandrew.co.uk/presentations/css-books http://rachelandrew.co.uk/presentations/css-books
- ArekDymalski 11y agoSeems 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=publicationDate&page=all http://shop.oreilly.com/category/series/head-first.do?sortby... They have done incredible work to make not only the content, but also its presentation attractive for the beginners.
- tdsamardzhiev 11y agoAdd some exercises. Even better, add tons of them :)
- deleted 11y ago[deleted]
- jtheory 11y agoI 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).
- steamy 11y agoIn summary, IE has been a disaster for the web community save for the XHR spec and something here something there and I can't wait for the day to come not to have to support IE9, IE10 or even IE11. I'm cautiously optimistic about the Spartan project and I wish them all the best but if the new boss would be like the old boss, that would be the last nail in Microsoft's coffin when it comes to the web standards.
- maroonblazer 11y ago>...but if the new boss would be like the old boss... Fortunately, based on what we've seen so far, that doesn't appear to be the case.
- sean_the_geek 11y agoThanks to the author. Just what I was looking for!
- tsm 11y agoAny recommendations for a backend web developer who knows the basics of HTML and CSS but not much more?
- throwaway12357 11y agoI'm also very interested in this. I'm a SW engineer who has worked mostly with C, C++, Java and Python. But now I would like to learn web development. Although I suspect learning HTML and CSS to be manageable, with CSS having some weird corner cases. However when it comes to JS and all its frameworks things get more complicated. Especially when deciding which JS framework to choose from. It's of interest to bet on something that will still matter in the next 3 to 5 years. edit: This resource was posted some weeks ago on HN. Although it's more of a set of tutorials from different sources than an ebook. https://developer.mozilla.org/en-US/docs/Web/Tutorials https://developer.mozilla.org/en-US/docs/Web/Tutorials
- UUMMUU 11y agoIf you're interested in getting your feet wet with JS, not in a web developer sense, Codewars.com has some cool coding challenges that can be done in JS. When it comes to frameworks, I've found that AngularJS is probably the most entry-level friendly but I absolutely love using React in my projects.
- deleted 11y ago[deleted]
- hugozap 11y agoTime spent on learning frameworks is mostly wasted. Except when there is an interesting concept behind. In 3-5 years things like web components will be mature enough so it may be worth to learn/use from now. Having a strong understanding of JavaScript, CSS, SVG/Canvas/WebGL will be much more valuable than learning a framework api.
- UUMMUU 11y agohttps://www.bento.io/ https://www.bento.io/ is pretty good for a list of teach-yourself-technology. I would also check out Codeschool (although they're not free) because they have some really great classes on everything from Rails to jquery and CSS.
- bshimmin 11y ago"I cried when I wrote it." A glowing endorsement indeed from the author - I heartily approve!
- ocdtrekkie 11y agoWhen 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.
- rebootthesystem 11y agoExcept...it isn't coding, it's markup. Not trying to be pedantic. There is a huge difference between the two.
- roneesh 11y agoCertainly 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 11y agoIf 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 11y agoIf 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 encoding the semantics of webpage formatting and content. They are domain specific languages. They are not turing complete. But they are coding.
- yazin 11y agoGreat 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 11y agoSomething like this but for JavaScript would be useful.
- DTV 11y agoWhenever 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 11y agoWell, 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.