Mercurial Hosting > reactionary

comparison src/learn.html.luan @ 63:e8122e01e2dd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
minor
author Franklin Schmidt <fschmidt@gmail.com>
date Fri, 16 Aug 2024 11:00:17 -0400
parents 7fe3cfba9c85
children b91375e2a28a
comparison
equal deleted inserted replaced
62:7fe3cfba9c85 63:e8122e01e2dd
187 title = [[HTML and CSS]] 187 title = [[HTML and CSS]]
188 content = function() 188 content = function()
189 %> 189 %>
190 <p>Google Chrome is the standard client-side web development tool. So the first step is to make sure that you have Chrome installed and running.</p> 190 <p>Google Chrome is the standard client-side web development tool. So the first step is to make sure that you have Chrome installed and running.</p>
191 191
192 <p>Using Chrome, on any page you can right-click in an empty area and from the menu select "View Page Source". This will show you the HTML for the webpage. If you try this on different websites, you will probably notice that my webpages are fairly short and well organized while the webpages of modern scum are unreadable. Another thing to try is to right-click anywhere in a page and select "Inspect". This should open the developer tools with the tab "Elements" selected. In this tab, you get the HTML organized as tree that can be expanded to collapsed. The "Elements" tab of Chrome developer tools will be your core tool when you work with HTML and CSS. You should play with it and do your own research on it to learn how it works.</p> 192 <p>Using Chrome, on any page you can right-click in an empty area and from the menu select "View Page Source". This will show you the HTML for the webpage. If you try this on different websites, you will probably notice that my webpages are fairly short and well organized while the webpages of modern scum are unreadable. Another thing to try is to right-click anywhere in a page and select "Inspect". This should open the developer tools with the tab "Elements" selected. In this tab, you get the HTML organized as a tree that can be expanded to collapsed. The "Elements" tab of Chrome developer tools will be your core tool when you work with HTML and CSS. You should play with it and do your own research on it to learn how it works.</p>
193 193
194 <p>The next step is to download this website like this:</p> 194 <p>The next step is to download this website like this:</p>
195 195
196 <code block> 196 <code block>
197 ~/learn $ wget -r -k http://www.reactionary.software/ 197 ~/learn $ wget -r -k http://www.reactionary.software/
216 216
217 <p>I left out resources for HTML itself. You should just look up HTML tags with Google or ChatGPT as you encounter them. That is good enough to learn HTML.</p> 217 <p>I left out resources for HTML itself. You should just look up HTML tags with Google or ChatGPT as you encounter them. That is good enough to learn HTML.</p>
218 218
219 <p>Ideally one should be able to look at web pages around the internet to learn. But unfortunately they are mostly overcomplicated crap that is very difficult to understand. You can try. My personal websites are like this one - very simple, so they don't look professional to modern scum. I can't link to my best commercial website because that would ruin its reputation (because I am infamous). But I can link to some of my old commercial websites <a href="http://test.tleggings.com/">here</a> and <a href="http://test.super-resume.com/">here</a>. These have reasonable HTML and CSS.</p> 219 <p>Ideally one should be able to look at web pages around the internet to learn. But unfortunately they are mostly overcomplicated crap that is very difficult to understand. You can try. My personal websites are like this one - very simple, so they don't look professional to modern scum. I can't link to my best commercial website because that would ruin its reputation (because I am infamous). But I can link to some of my old commercial websites <a href="http://test.tleggings.com/">here</a> and <a href="http://test.super-resume.com/">here</a>. These have reasonable HTML and CSS.</p>
220 220
221 <p>I have a few general principles for working with HTML and CSS. First, modern scum claim that HTML is for content and CSS is for styling. This is bullshit. Both HTML and CSS are for layout, don't think of them as being conceptually different. Just use both in the simplest possible way to get the results you want. Don't bother with the useless new HTML5 content tags like <code>header</code>. Just use <code>div</code> and <code>span</code> for most things. Also I use HTML attributes as selectors, not HTML classes. This is just simpler. HTML classes are useless, leave them for modern scum.</p> 221 <p>I have a few general principles for working with HTML and CSS. First, modern scum claim that HTML is for content and CSS is for styling. This is nonsense. Both HTML and CSS are for layout, don't think of them as being conceptually different. Just use both in the simplest possible way to get the results you want. Don't bother with the useless new HTML5 content tags like <code>header</code>. Just use <code>div</code> and <code>span</code> for most things. Also I use HTML attributes as selectors, not HTML classes. This is just simpler. HTML classes are useless, leave them for modern scum.</p>
222 222
223 <p>You will need HTML, CSS, Javascript, and Luan to make a website. So I suggest that you get a basic understanding of each of these and then go back later to study them in greater depth.</p> 223 <p>You will need HTML, CSS, Javascript, and Luan to make a website. So I suggest that you get a basic understanding of each of these and then go back later to study them in greater depth.</p>
224 <% 224 <%
225 end 225 end
226 } 226 }