Category: Web Page Basics

Meeting Announcements & Notes, Web Page Basics

December 1, 2017 Meeting

Dottie

NOTE: Our December 1st meeting will be held at the St. Charles Public Library.  We will meet at the usual time 5:45PM to 7:45PM 

Agenda

  • Fix the Jelly Wobbly Gravity game! With the book’s original code, the character won’t move…the jellies are all dropping in the same line and splattering before hitting the floor…the character isn’t able to get sick from the jellies because the “collisions” have no effect. Let’s help The Dude enjoy (or not) his fill of jellies!
  • Make your own changes to any part of the game and/or to your site’s home page
    • We can do some changes as a group if there are suggestions and desire to do that
    • We can help each other with updates to individual pages

Resources

To copy the JavaScript file with all the bug fixes:

  • Go to the file on GitHub: Wobbly Jelly Gravity Corrected JavaScript
  • Click the “Raw” button when viewing the file
  • Right-click and select “save as” to save it to your machine
  • Upload the saved file to your project in Cloud9 and swap it for the “bad” JavaScript. Detailed instructions for doing that are in the debugging document in the below link

Detailed notes for the debugging exercise and concepts:

A working version of the game: Jelly Gravity

Meeting Announcements & Notes, Web Page Basics

November 3, 2017 Meeting

Dottie

Dissect the Typography Game

We are looking forward to tonight’s meeting at 25N where we will be taking a deeper dive into the inner workings of the typography game.

Explore the answers to these questions and more:

  • What happens when the user enters the URL into the Browser? How does the Browser process the request? How does it integrate the styles in the CSS file and the code in the JavaScript file with the HTML elements on the page? 
  • How does clicking a button or pressing a key cause something to happen on the Web page? The keydown and click events!  What is an event listener? What is an event handler? What is a keycode? Reference: Keycode lookup
  • How do we define a single object that can represent either the player or the “bad guy” in the game? Define a function that is used as an object constructor; within the function define methods such as “move” and “setSpeed”.  Use the keyword “new” to create named instances of the class – “hero” and “enemy”. Use those named instances to control the players. Examples: hero.move()  or enemy.setSpeed(speed * 23)

Document: Notes for today’s activities

Web Page Basics

Updated Notes for Web Development

Dottie

In case anyone missed a meeting or needs catching up, here are some technical notes on what we have done so far in our Web Development meetings. The documents also include more details on some of the concepts we are covering:

Week 1: Getting set up with Cloud9 and GitHub; cloning the code from a repository

Intro To Web With Cloud9/GitHub Notes

Week 2: Adding and editing files in a Cloud9 workspace; Git commands; pushing your Cloud9 code up to your GitHub Repository; publishing your site on GitHub

Web Week 2 Notes

Week 3: Languages of the Web: High level look at use of HTML, CSS, and JS. Web directory structure: organizing your files. Hands-on exercise: clean up the sample code for the “Chapter 3” project from the book, separating the JavaScript and CSS out of the index page. Brief look at Dev Tools and Debugging

Web Week 3 Notes

 

Meeting Announcements & Notes, Web Page Basics

October 27, 2017 Meeting

Dottie

We are looking forward to another fun meeting full of discoveries! Here’s some of what we are planning:

  • Help anyone get up to speed who hasn’t completed the GitHub and Cloud9 setup and basic Web pages from the previous 2 weeks; don’t worry if you weren’t able to attend those meetings
  • Notes about the Book and the source code
    • Sample code in our Repo has different chapter numbers than the chapters in the actual book, i.e., Chapter 3 code directory = Chapter 2 of book
    • the book focuses on  on what the HTML5 specification adds to the “older” specifications of HTML, CSS, and JS and assumes knowledge of basic HTML, CSS, JS, so we will review the basics of these 3 Web languages
  • Three Languages of the Web:
    • HTML: HyperText Markup Language – determines  structure of the page content -> the SKELETON
    • CSS: Cascading StyleSheets – determines appearance of the page, the presentation (colors, fonts, and much more) -> the SKIN
    • JS: JavaScript – determines actions on the page, the behavior. For example, what happens when you click a button, hover with the mouse, or when the page loads -> the MUSCLE
    • Remember that the W3 Schools Tutorials are an excellent resource for learning these languages and many other Web Development skills
  • Typical Web directory structure
    • Explore the folders for css, img, fonts, and js as in the Chapter 4 code folder
    • Look at the index.html page for Chapter 4’s code to see how the css and js files are linked to it
    • Compare to Chapter 3’s index.html (Typography Game, chapter 2 in book); note how the CSS is embedded between <style> tags in the <head> and the JavaScript is embedded between <script> tags just above the closing body tag
    • Group exercise: Separate out the CSS and JS from Chapter3/index.html into separate files and link them in the index.html page. It will help to have the code folding setting turned on in Cloud9 to make copying easier. Menu Cloud9 –> Preferences –> User Settings –> Code Editor
  • Debugging:
    • Debugging tools are used not only to find “bugs” in the code but to analyze running code to understand what is going on
    • Chrome Debugging Tutorial
    • For the Typography Game, let’s run through a brief debugging session to see what the code is doing, how to step through it, how to change a variable, as well as inspecting the HTML/CSS. Analyze how the game works and find something you would like to change
    • Small teams or individuals can work on each making a change to the code, change something in the CSS or the JS or the HTML, then look at it in the debugger
Meeting Announcements & Notes, Web Page Basics

October 20, 2017 Meeting

Robin

Welcome Back! Let’s get down to it!

This week we are going to:

  1. Quickly introduce and catch up anyone who is new this week – WELCOME!
  2. Make sure everyone has the following:
    1. GitHub Account
    2. Cloud9 Account with our team
    3. Forked the HTML5, CSS and JS book repo at github
    4. Created a new workspace with the github repo in Cloud9
  3. Let’s add a home page for our site – kind of like this: https://youtu.be/ent9dh0dRJg
    1. Add “index.html” in cloud 9 and type in a bit of html (we will talk about this in a bit)
    2. git add .
    3. git commit -m “added index.html”
    4. git push
  4. Enable GitHub Pages in settings (it is probably turned off by default)
  5. Copy the URL in your GitHub settings for your website, once you push your changes, your site is published there! Whoot!
  6. Now let’s add
    1. A title for our index page <title>This is my really great page</title>
    2. A header <H1>This is my really great header</H1>
    3. An image <img src=”myImage.jpeg” alt”really great image”/>
      1. Make a new folder called “images”
      2. Find a great image online somewhere and save as to your desktop
      3. File -> upload local files in Cloud9
      4. push again to git
        1. git commit -a -m “my note”
        2. git push
    4. What happened? Didn’t work quite right? Let’s TROUBLESHOOT!
      1. Can we see what is going on by using F12 developer tools in Chrome?
      2. Can we see if everything got up to git the way we wanted? Check out our git hub repo online.
      3. Use Ctrl+F5 to do a forced refresh of your browser
    5. BONUS: If we have time, check out https://www.favicon-generator.org/
      1. Make a favicon
      2. Add it to the root of your website
      3. Add two lines to your header
      4. Commit, push and check out your site!
  7. Awesome! Share your site URL on Slack so we can all see it!

 

Home, Meeting Announcements & Notes, Web Page Basics

October 13, 2017 Meeting

Robin

Welcome to a new year of Fox Valley Girls Coding Club!

We will meet in the Board Room of 25N at 5:45pm, October 13, 2017.

Meeting Agenda:

Excited to meet our new members and catch up with our returning members! It is going to be a great year! 🙂

bookcover

 

Web Page Basics

Bootstrap & Web Site Structure

Dottie

What is Bootstrap?

“Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.” – From W3Schools Bootstrap Tutorial

Why Use It?

  • Responsive Web Design: lots of built-in (“out of the box”) features to ensure that your site looks good across all types/sizes of devices
  • NavBar: Beautiful menus!
  • Consistent look and feel: buttons, menus, headings, lists, and many other Web page components
  • Themes: Many lovely themes available to change the colors and other aspects of appearance just by swapping out a file! See Bootswatch for a nice selection of free downloadable themes
  • Grow your Developer Skillset: the skillset we want to build here isn’t Bootstrap per se, but rather the ability to incorporate a third-party framework into a project, and an understanding of how the pieces fit together within the project structure. While Bootstrap isn’t a required tool for all development projects, it is a common and very useful one. There are many, many, many JavaScript and CSS libraries out there and even before you start writing your own JavaScript code you can and should understand how to install and use these tools.

How Do I Get Bootstrap Into My Project?

  • Prepare your directory structure: Bootstrap includes files for scripts (JavaScript), fonts, and CSS and we need to organize these files within our site. We will follow the common convention of creating separate directories for CSS, Scripts, Images, and Fonts.
    • Open your Web project in Atom: make sure you are in your site’s main Project Folder (FilmFestivalSite in below example).
    • Add project folders: right-click on your project folder in Atom and choose “New Folder” to create folders named css, fonts, images, and scripts.

DirectoryStructure

  • Get Bootstrap
    • Download: Go to http://getbootstrap.com/getting-started/#download. Click the Download Bootstrap button. That will download a file named bootstrap-3.3.6-dist.zip to your computer.
    • Unzip the files: On Windows machines you will find the zip in your Downloads directory, right-click and choose “Extract All”. You can change the destination folder if you like before hitting the “Extract” button, but be sure you know where the files are.
    • Copy the files to the folders in your Web project: the extracted files are organized into css, fonts, and js folders below the bootstrap-3.3.6-dist folder. Copy to the matching folders in your Web project: css to css, fonts to fonts, and “js” to “scripts”. Hint: In Atom you can right-click on a folder and select “Show in Explorer” (Windows) or “Show in Finder” (Mac) to open your destination folder to set up the copy with side-by-side windows.
  • Get JQuery:
    • Note: Version as of this writing is 1.12.3; get the latest 1.x.x version
    • Download JQuery: https://jquery.com/download/. Under the JQuery 1.x section right-click on “Download the uncompressed development jQuery 1.12.3” and choose “save link as”.  Save the file as  jquery-1.12.3.js
    • Copy the JQuery file to your project: copy jquery-1.12.3.js to the “scripts” folder of your project
    • Note on Uncompressed vs. Min versions of JQuery:  JQuery can be downloaded in its uncompressed form as above or in a “minimized” form jquery-1.12.3.min.js. The min version is much more efficient for use on your Web Page. For user-friendly pages it is important to minimize page load time and the size of scripts so in “Production” we would always deploy the “min” version of both CSS and JavaScript files. However, for development we want to be able to read, understand, and learn from the CSS and script files so we use the uncompressed (non-“min”) versions in our development environment.

Our First Bootstrap Page:

  • Add a new HTML file named “BootstrapSample.html” to your Web site’s main folder.
  • Copy content from our “Bootstrap Sample Page” to experience the power of Bootstrap right away. Once everyone has it running in your environment we can explain some of the opportunities for you to customize it and make it your own. This one is put together from combining elements of sample templates on the Bootstrap site
  • The one change you will need to make is highlighted: that is the anchor <a> tag for one of the menu links; in my example it links to a page named “FilmDetails.html”. Change it to link to your own page.

Deployment Considerations:

Once you have your page working in your own environment if you want to upload it to your Web site on the server you need to ensure that the folder structure and files needed for Bootstrap and JQuery are uploaded as well. In ATOM you can select your css folder for upload to copy the folder and its contents; do the same with your scripts, fonts, and images folders.

 

Web Page Basics

Web Page Basics 2: Responsive Design

Dottie

Responsive Web Design: You will want your Web page to look good on all Browsers and devices including tablets and phones. This is where Responsive Web Design comes in. Before adding more content to our base page, let’s design the overall layout to be Responsive.

Do Not: Use the Table tag to force your page’s elements to fit into an overall page layout; a Table will not wrap or stack to fit onto a small screen.

Instead:

  • Create areas on the page using the Div tag. “Divs” that appear next to each other on a full-size computer screen can stack vertically when the screen is scaled down on a phone
  • Use a responsive grid layout; this divides the page into rows and columns using divs rather than tables. There are some excellent frameworks, such as Bootstrap, available that make this easy with many advanced features to make your site responsive as well as beautiful. We will be looking at examples of this in one of our future meetings.
  • For your first Web page start with using divs and we will work our way towards the responsive grids.

Do Not: Use fixed-width pages or fixed-width elements 

Instead:

  • Use percentages to define width: examples: width:100%;  or max-width:300px; or max-width:100%;  
  • Set the Viewport to scale to the device: the viewport is the area of the page visible on the user’s device screen.  Adding the following “meta” tag inside the <head> of the page tells the Browser to scale to the device rather than just shrinking everything  to a tiny font size to show the full page view :

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

  • In the CSS define separate styles for large and small screens when appropriate; these are called “media queries” in the CSS. Not needed for every element but can just what your page needs sometimes to address problem areas with the display across devices.

See W3C Tutorial for more on responsive Web Design

 

Web Page Basics

Web Page Basics 1 – Starter Page

Dottie

Over the last few weeks we have been learning about the basic building blocks for Web pages using HTML and CSS to create our own pages. This series of Blog posts will review the concepts implemented so far.

Create a basic HTML page in a text editor; save the file with an .html extension.

  • Start with the document type declaration !DOCTYPE html; this tells the Browser what type of content to expect
  • The Web page is an HTML document and is structured using paired (opening and closing) HTML tags; tag names are enclosed in “angle” brackets; closing tag starts with </
  • Begin structuring the page by adding HTML starting and closing tags: <html></html>
  • Add the <head></head> tags just below the starting <html> tag; head content is not displayed, but contains information about the page, including title, links, styles, and “meta” tags used for Search Engine Optimization (SEO)
  • Add the <title></title tags inside the <head>; type your page’s title between the tags. The title will display on the tab in the Browser when you view the page.
  • Add the <body></body> tags below closing </head> tag . The only content that will be visible on your page is the content that you create inside the body.
  • Add some content in the body: a simple thing to add is a heading using the <h1></h1> tag pair and/or a paragraph using the <p></p> tags
  • Save the .html file;  view it in your Browser. Your document should look something like this:

<!DOCTYPE html>

<html>

<head>

  <title>My Web Page</title>

</head>

<body>

    <h1>Hello World!</h1>

    <p>Come back later for much more interesting content!</p>

</body>

</html>