Web Page Basics 2: Responsive Design

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

 

March 18th Meeting Agenda

25n-logo horizontal

This week we will meet in the boardroom at 25N.

Continue building the Film Details Page:

  • In-depth analysis of current site
  • Finish building out the HTML/CSS for the page
  • Database schema: what tables do we need?
  • PHP: a first look at PHP code and how we use it to:
    • Connect to the database
    • Pull all the film detail data for a specific record
    • Map data fields to the page and populate the page with those details

Web Page Basics 1 – Starter Page

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>

March 11, 2016 Meeting Agenda

This week, the Fox Valley Girls Coding Club will meet in the vault at 25N.

Meeting Agenda:

  • Reconsider the Film Details Page using F12 Developer Tools
  • Review Image Tags
  • Introduce Links – Anchor Tags
  • Introduce Cascading attributes of CSS
  • ATOM text editor: make sure it is set up and working for everyone
    • Install Atom-Beautify Plugin
  • FTP: transfer files between your laptop and your real Web page on the server
  • Have questions?  Need help with the code you are working on? We plan to allow some time to address individually or as a group

Happy International Women’s Day!

March 8th is International Women’s Day and a great time to reflect on Women’s participation in Technology. There is a lot more that needs to be done to narrow the gender gap in technology fields and we are so happy that our Fox Valley Girls Coding Club is one organization that is working towards that goal.

If you are an organization looking for ideas to promote International Women’s Day there are lots of great ideas  available “in a box” that can be downloaded from: NCWIT. Along with event ideas,  there are links to other resources, articles, statistics, and award nominations. The celebration of International Women’s Day isn’t just limited to March 8th; any day this week would be a great day to promote it!

March 4, 2016 Meeting

This week, the Fox Valley Girls Coding Club will meet in the boardroom at 25N.

Meeting Agenda:

  • Continue working on your own Web page; whether you’ve been to all the meetings or missed some, this will be a great chance to catch up or to add some new features to your page
  • Review HTML and CSS
  • ATOM text editor: make sure it is set up and working for everyone
  • FTP: transfer files between your laptop and your real Web page on the server
  • Have questions?  Need help with the code you are working on? We plan to allow some time to address individually or as a group