Fall 2022 TECH 272 A: Week 2

Best Practices In Web Dev, Continued: Dir & File Naming Conventions |  The CSS Cascade: Reviewing CSS Selectors | Intro to Classes & IDs | What's Document Flow?| Quick Hint: CSS & Images | HW pt 1: Reimagining the Declaration of Independence For Modern Audiences | HW pt 2: 501c3 Starter Website

 


 

First, we'll start with a quick review of concepts from last class, including how and why we name our HTML elements, as well as the kind of HTML elements that "contain" other elements.

This will get us talking about why as developers we want to follow industry-standard best practices, such as proper saving and naming conventions for our HTML elements as well as for folders, images, PDFs and more.

As we talked about, also important is commenting your code - a big deal in HTML, CSS, JS and other languages.

 

 

This will lead into learning more about selectors and the "cascade" in CSS. As part of this we'll talk about why it's so important to separate content from presentation. In other words, we want to keep our HTML and our CSS in separate files whenever we can. To put this in perspective, when you use CodePen and see sections for HTML, CSS and JS, imagine that in a real-world scenario these woud be separate pages. We'll cover this in more detail down the road a bit.

Then we'll start to dig deeper into CSS - we'll review the CSS cascade as well as learn more about CSS selectors, which tie-in directly to the idea of our naming our HTML elements.

Remember: If we want to style something in the HTML with CSS, that something often needs a name, such as a class or an ID. (You'll see in one of the HW videos how there are numerous ways to select one or more items in the DOM.)

Remember: CSS is all about setting default styles for your HTML elements, then over-writing those styles as needed, in more specific siutations. In this image, the top-level CSS styles load 1st from an external document. Its styles will be applied right away but can be immediately over-written by any CSS typed right in the <head>.

Inline CSS is more specific still, but is violating our matra of separatng content from style; and finally, a user can adjust her browser settings to change how CSS is applied (this last is of no concern to us as coders, FYI, as we cannot control it.)


We'll talk about document flow, and see how a page's content arranges itself in the browser.

 

Below, we have an example of responsive web design (take tech 273) which shows how the page's content flow is initially positioned and then change order as the screen changes width. 

 

 

 

 

 

 

 

 

 

 

 

Look at this pen when I uncomment its text - do you see how all the content just flows left to right in a completely unreadable way? HTML ignores the line breaks in the text - when we put that text into an HTML element, though, it becomes part of the document flow, and acts accordingly.

 

HTML & CSS | Floated Responsive Image

I was asked some VG questions, which I thought I'd address here:

What exactly are closing elements and why do they need to be added? 
 
Almost every element in HTML (that is, everything we code into the DOM such as paragraphs, images, lists, divs, etc.) has an opening and closing "tag". 
 
Here is one such headline:
 
<h1>some text</h1>
<p>more text</p>
 
If a closing tag is missing, like:
 
<h1>some text
<p>more text</p>
then the layout will break. 
 
 
Why does it need to be in this format (with the exclamation points and dashes)? 
Those characters are turned to "comments" by that format, rendering the code inoperative. Comments serve 2 reasons: notes to yourself, and turning something on/off with ease when coding & testing.
 
I'm asking everyone to add closing comments such as these to the DIVs because it is very easy for a layout to break if an extra </div> is accidentally added or deleted. Adding a comment after each closing DIV tells us what div specifically we're working on. Go back to MC's site, inspect some text and look in the DOM at how many DIVs are nested inside each other. 
 
As a best practice, I only do this for DIVs.
 
Adding comments like this will make life for you much easier as a code. PS: we have comments in CSS and JavaScript too, for the same reason.
 
Does this mean that every time I change class and ID names, I have to change them in two different spots (in HTML) and once in CSS?
 
Yep. (And in the JS too, if you're using that.)
 
What's true for any element in the page - div, paragraph, ul, etc.: every time you change its name (either ID or class, to be discussed tomorrow) you have to change that name in both the HTML and CSS. Part of that includes the comments just discussed.
 

Comments In Action

See if this link will open MC's rendered code in your browser - as you scroll to the bottom you can see examples of some notes/comments their developers included throughout:

Paste this into your browser bar and hit ENTER:

view-source:https://www.montgomerycollege.edu

This Week's Class Links & Assets

Recording of Today’s Class
https://montgomerycollege.zoom.us/rec/share/OuA5Z_CVRht1tXcUySLAAxpHQXYpdJhY_yMzW_7cGY-2FRIUhIBRJXCCCSz0Vea_.cf4E-Cs_JjNcwFZ6
Passcode: .t?KW2J7

https://montgomerycollege.zoom.us/rec/share/Pq-sPisGUD7gb8nMcdDPcl8N9p6M5ucmFhttjFhDOcC1yiM17SLpienJhZjBNjbO.cMyZm2MAkJl82wO_
Passcode: yz9^tBLD

MC site which we’ll discuss in detail throughout the course
https://www.montgomerycollege.edu/

HTML CSS Color Codes
https://htmlcolorcodes.com/
Remember that for our intro course, we need only the hexadecimal value for a color. A “hex number” starts with a # sign, and has 3 or 6 values. Red looks like this: #F00 (which is shorthand for this #ff0000).

Browsers can interpret colors differently (hex, rgb, hsl, color name and more.) We’re using hex values in our CSS for this course. You’ll learn the others in tech273.

This Week's Homework Readings & Videos

ul: The Unordered List element
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

File Naming Conventions
https://www.oreilly.com/library/view/web-design-in/0596009879/ch04s03.html
For your files to traverse the network successfully, you must name them in accordance with established file naming conventions

Naming Conventions 101 for Developers
Note that this is aimed at JavaScript developers but the ideas apply to us as well.

https://medium.com/swlh/naming-conventions-101-for-developers-8997bb96fd60

Learn Every CSS Selector In 20 Minutes


 

HTML and CSS basics, normal document flow and HTML elements

 

CSS: The Difference Between ID and Class

The Difference Between ID and Class

 

HTML Content Flow: A Learning Journey to Web Development
https://medium.com/ux-art/html-content-flow-d94b7c03f98

As we create lots and lots of elements in our document, HTML defines how those elements are rendered and organized on a web page. It determines which element comes before another one, which one sits on top of another one etc. These rules that control the flow of content is called the HTML content flow.

What Is Document Flow?
https://soulandwolf.com.au/blog/what-is-document-flow/

Document flow is the arrangement of page elements, as defined by CSS positioning statements, and the order of HTML elements. This is to say, how each element takes up space and how other elements position themselves accordingly.

This Week's Homework Assignment(s)

Your HW assignment for this week is due at the beginning of class Thursday next week.

For this 2-part assignment you will 1) use HTML to code and style a famous but hard-to-read document, and 2) create a 501c3 starter section that you can reuse any time you need it.

Part 1: Re-Imagining the Declaration of Independence (DoI)

For this assignment you will go through the supplied excerpts from the DoI and convert them to HTML elements (headlines, paragraphs, lists, etc.)

Then you will give it basic styling with CSS, outlined below.

Where to get started? Analyze the text. Is something a headline? If so, is it an h1, h2 or h3? Code it that way in your HTML. Give it a class or ID, then style it.

Primary Goal
The main goal for this assignment is to explore laying out a page’s contents and marking it up accordingly (a headline is marked up with an HTML header such as h2; a list is coded as an unordered list; text is one or more paragraphs, etc.)

Secondary Goal
The next goal is to continue exploring the intersection of CLASS and ID names in HTML and CSS.

Tertiary Goal
The tertiary goal is to continue thinking about the “sweet-spot” between development and design as we aim to make this content into something readable for modern audiences.

Guidelines

– As you’ll learn, webDev provides us many ways to accomplish a task. This assignment must be completed using the approach provided in this week’s lesson plan. Anything different will not be accepted for grading.

– As before you will change my class and id names in the HTML and CSS, reflecting the naming conventions we discussed in class and in the readings.

– You will change the background colors, font colors, and font sizes.

– You must use and style at least one SPAN.

– You will delete the image I used as well as the commented text.

————————————————-

Part 2: 501c3 Starter

For this assignment you will use the template I provide (https://codepen.io/carmody/pen/abLOJbB), replace my content with that from your 501c3, including an image, then give it basic styling with CSS, outlined below.

Primary Goal
The main goal for this assignment is to continue exploring HTML elements as containers into which we may nest other containers. Here we are nesting DIVs, Lists and more. This also ties-in to something we’ll discuss in a few classes: writing semantic HTML.

Secondary Goal
As with the 1st art of the assignment the next goal is to continue exploring the intersection of CLASS and ID names in HTML and CSS, especially as we are going to learn fonts next week.

Tertiary Goal
The tertiary goal again is to continue thinking about the “sweet-spot” between development and design as we work on a basic layout that can be reused time and again. That is DRY in action.

Guidelines
– As you’ll learn, webDev provides us many ways to accomplish a task. This assignment must be completed using the approach provided in this week’s lesson plan. Anything different will not be accepted for grading.

– You will change the content on the template I provide to text related directly to your 501c3. That’s headlines, link text, body content, etc.

– As we’ve not yet covered making links you do not have to make the links work (you do have to change the text though.)

– As we’ve not yet covered adding fonts, you do not need to change the “font stacks” you see in the CSS.

– You will change the font color and background colors to colors found on your 501c3 site. Remember how to find those colors? Inspect an element from your 501c3 in the DOM, copy/paste its color values to your CSS.

– You will add comments in your CSS organizing your code per the guidelines and examples we reviewed today

– You’ll add 1 pertinent image to each of the 2 main columns using the “responsive max-width approach” we covered. You will make sure that the text next to the images floats to its right.

– As before, you’ll change the names of the IDs and CLASS names in the HTML and CSS, making sure your styles still work, of course.

—————————–

Deliverables

You will send me 1 email with the 2 pen links to me as before:

john.carmody@montgomerycollege.edu

subject:

tech272 A Week 2: 501c3 Starter + Declaration of Independence

This is due by the beginning of class next Thursday.

Course Syllabus

Here's the course syllabus: learn it, live it, love it.

Please Remember

You are responsible for reading all of the content I provide each week on our class website (notes, explanations, articles, links, videos, code examples, etc.)

Please note also that turning in work up to one week past the due date is OK but will receive a reduced grade. After 1 week, it will not receive a passing grade, FYI.

Finally, all assignments must follow the guidelines laid out - variations will not receive a passing grade, FYI.

Course Lessons

Links to lessons will be activated the week of their occurrence.