allejo/intro-to-web

intro-to-web's Issues

Remaining Chapters

An ongoing issue with notes of remaining lessons

Chapter 2

• Part 2 of working from a design @davidshower @kmgrossi
• Chrome inspector tools for debugging and fixing CSS issues

Chapter 3

• JavaScript introduction
• Graph creator project

Issues/Notes

• The code snippets all contain a useless horizontal scrollbar.
• 1.1: CSS - The Beauty: "Without CSS, sidebars could not exist because every element in HTML will take up the entire width of your browser by default (more on this later)." I don't think that every element will take up the entire page. For example, if you have a table, in which there are two columns, the table will take up the whole page, but each column will only take half a page. Second, don't buttons auto size to fit the text? Or is this automatic CSS? Lastly would elements also take up the entire height also, if they're taking the entire width?
• 1.1: "This is what JS looks like with jQuery:" - I think a brief explanation of what jQuery is would be helpful, or just drop the term and tell the student that you're simplifying it for the sake of the level of detail needed.
• 1.1: JavaScript - The Functionality: "Have you ever been on YouTube and clicked on “Show All Replies” in the comment section?" The button says, "Show more", but I might just have a different browser.
• The link to the next lesson doesn't work. It should be, http://projects.allejo.io/Intro-To-Web/book/chapter-01/lesson-2-html-vocabulary/ , but it's http://projects.allejo.io/book/chapter-01/lesson-2-html-vocabulary/ .
• 1.2: "Hyper Text Markup Language (HTML) defines the structure of a website and is XML based." Same thing as the note on jQuery; XML could be explained shortly or dropped.
• 1.2: Angle Bracket: "Angle brackets consists of an opening element (<) and a closing element (>)." I'm pretty sure that those are characters/brackets/symbols, and elements are different.
• 1.2: Tag: "A tag is an HTML keyword surrounded by angle brackets." From the code snippet: "". "charset" is an attribute (as explained in the next section). I don't want to nitpick, but I remember tripping on a lot of things when I learned programming.
• 1.2: Parents & Children: The code snippet contains the "class" keyword, which might confuse anyone that knows a little bit of Java. FWIW, it's covered in 1.3.
• 1.2: The link to the previous lesson is broken. The link to the next lesson works though.
• 1.3: Intro paragraph: it might just be me with my lack of experience, but it seems that there's a lot of embedded css everywhere in the html, and even in the JS/other scripts. It might also be worth noting that the HTML file can technically have all the CSS in the (maybe other places too; I don't know). On that note, the JS can also be embedded or inline. And then there's HTML5...
• 1.3: Comments: You didn't say anything about comments in HTML.
• 1.3: Comments: Using "White" as the background color will be less confusing than "#EFEFEF" to people who are new to all this, and will wonder what's up with the twitter hashtag.
• 1.3: Comments: I can't tell if the commented out code is actual code or not. I don't think so, but it looks like it should be.
• 1.3: Rule Set: That first rule sort of isn't a "pair". I've never understood what's going on when more than one font is specified. Then again, I've never looked it up.
• 1.3: Rule Set: The code snippet contains another hex color code, if that's an issue. On the other hand, you might just tell students that the actual values aren't important.
• 1.3: Declarations: "A declaration is any property/value pair inside of curly brances; ..." First, a spelling error on "braces". Besides that, could you call each of these "rules"? That seems logical, given that they're the body of a "rule set".
• 1.3: Declarations: "Each declaration uses the following syntax: property: value;." (It was formatted correctly in the page). It actually follows the syntax, "property: value1, value2, ...;", at least in the case of fonts, or "property: value1 value2 value3 ...", as shown in the code snippet for Class Selector.
• 1.3: Selectors: "The selector of a rule set defines the element the following declarations will be applied to." You didn't tell us what an element is yet, besides referring to angle brackets as elements.
• 1.3: Element Type Selector: "...would be appropriate since all anchors should be treated..." Wait, "anchors"?
• 1.3: Class Selector: The code snippet most definitely breaks the 1:1 ratio between property and value.
• 1.3: ID Selector: For new students, "Octothorpe" could probably be replaces with a more common term (ie, one I've heard before :).
• 1.3: ID Selector: Could you just use a unique class name for the element, instead of an ID? If so, that might be worthy of note.
• 1.3: Attribute Selector: These actually have a few types of syntax, depending on how you want it to go about matching (ie, http://www.w3schools.com/css/css_attribute_selectors.asp ).
• 1.3: Attribute Selector: The example looks like it's doing a simple search and style, which I think could be done with a class or something, but I've used this ability to find elements with certain content and change the styling. This can be very useful, but may not be relevant to the lesson.
• 1.3: Attribute Selector: I'm not sure if the dash is supposed to be there in "...or styling elements based on data- attributes."
• 1.3: Both navigation buttons work.
• 2.1: Wait, what happened to JS, the third part of a web page? It wasn't covered.

---

• The "Edit this page" link at the top of lessons leads directly to a Github 404.
• 2.1: You may have copyright issues if you screenshot web pages; I don't know copyright laws very well (at all).
• 2.1: The Container: "Make your browser skinny right now and you’ll see this page adapt." The page does adapt, but not in a way that is obvious, especially if you do it right then and there; it only seems that the words wrap. The difference will be even less pronounced if the browser is already narrow and they try to narrow it further, or if they're on a mobile browser.
• 2.1: The Container: "...where as on a desktop or larger screen, you may only want it to take up 992px or 1200px." Where do these two numbers come from? They seem pretty arbitrary, and might deserve some explaining.
• 2.1: The Container: "All of your website’s content will belong inside of the container but your entire website does not belong in the container." What? This is explained a bit better in the next paragraph, but this sentence doesn't make sense initially.
• 2.1: The Container: "The text is the content of this page..." Technically, the text is not all the content of the page; the content of the page in the screenshot is everything except the background image of cables. The content includes text, icons, buttons, pictures, links, etc. It may be more clear to say that the content is everything but the background stuff (ie, backgrounds).
• 2.1: The Container: Can containers be nested? As a GUI programmer, this is one of my first questions about containers. This may not be relevant to the class though.
• 2.1: The Grid System: "I’m looking at one of my editors on this one" Is this a reference to a text editor, or to your lesson editors? I don't know what kind of experience your students will have, but text editors may not be their first thought.
• 2.1: The Grid System: It might be worth noting that HTML has a similar system with tables ( and ).
• 2.1: The Grid System: Example 1: "We’ll be thinking about the desktop layout of this structure and then think about how to make it fit on a tablet and phone screen." A few paragraphs ago you said that mobile users were the priority, and the first heading you see on the page is "Mobile-first" (which, incidentally, is not in title case).
• 2.1: The Grid System: Example 1: Why did you give the sidebar a greater portion of the space on mobile (8/4 columns on desktop vs 6/6 columns on mobile)?
• 2.1: The Grid System: Example 1: "Finally, on a phone, I would like to have both the main content and sidebar take up the whole width of the screen..." So are they overlapping, or is the page 2x as wide as the screen, or...?
• 2.1: The Grid System: Example 1: HTML: The "Show Setup" button doesn't change to "Hide Setup" while the setup is displayed.
• 2.1: The Grid System: Example 1: HTML: I'm not sure that "setup" is a good term for the CSS. I might also note that this is embedded CSS, not in its own file as you said it should be in one of the other lessons.
• 2.1: The Grid System: Example 1: HTML: Is it important that the contents of the divs be exactly as shown ("#main" and "#sidebar"), or could the contents be arbitrary? If you aren't familiar with what's going on, it might look like the CSS is matching against those, because the CSS has those terms exactly, but the HTML id's don't have the #.
• 2.1: The Grid System: Example 1: HTML: The CSS for #main specifies color as black, which is unnecessary and gives no visible result.
• 2.1: The Grid System: Example 1: HTML: I don't know what's going on with the class tags in the HTML. What do "col-sm-6" and "col-md-8" mean? And do these automatically work as shown? Or do you have to import Bootstrap or something?
• 2.2: You assume that the students are good with photoshop or other relatively powerful image manipulation tools. On the other hand, a simple tool like MS paint, which does not allow layers (I'm pretty sure) seems like it would be a huge pain to work with for designing a web site. A pencil and paper (or a whiteboard!) may be a better tool than a image manipulation tool for some people (like me).
• 2.2: The color codes could be made simpler by using keywords, not hex color codes. It might also be worth noting that RGB works too, for those that are more familiar with that.
• 2.2: "...there is never a wrong answer." Technically, there can be, if the solution is so inefficient that it would not process in a reasonable amount of time (ie, a O(2^n) algorithm). It may be technically correct, but not actually solve the problem.
• 2.2: ".col-w-* - This class will define the amount of columns an element should span horizontally." First, s/amount/number , because "amount" is how much, and number is how many. Second, is the star a wildcard? That was what I read it as, but it seems to be a placeholder for a number.
• 2.2: Same issue with ".col-h-*".
• 2.2: Same issue again with the wildcards.
• 2.2: "clearfix hack" wait what? This is later used in the CSS, but I still don't know what it is.
• 2.2: First Row: "All HTML elements can use the class attribute, which has support for multiple classes being combined, delimited by spaces, as described above." That discussion was actually in a previous lesson.
• 2.2: Second Row: It might be better to say that the rectangles can have areas of transparency, instead of being partially transparent.
• 2.2: Second Row: Bullet point 2: "This option consists of nothing but rectangles so it can be created easily with vanilla HTML and CSS." What about Bootstrap?
• 2.2: Second Row: "If you add another element after the last red block, it’ll wrap to the next line and appear under the purple square." Wait, what purple square? You forgot to put the purple square in the example layouts, so it's a surprise when it shows up.
• 2.2: Absolute Positioning: Can z-index's be negative or zero?
• 2.2: On Your Own: You really ought to have some sort of auth for accepting the assignment.
• 2.2: On Your Own: You said that CSS should be in its own file, but haven't shown anything but embedded CSS, or how to link to a CSS file.
• 2.2: On Your Own: The github repo has a couple useless files, like an empty CSS file; I don't know if that was intentional.
• On the bottom of pages, it says, "Copyright © 2016", but doesn't list a copyright holder.