1 of 27

Welcome to Code for Us!

2 of 27

Web Development – The Big Picture

Joslenne Peña

​

Photo Credit: https://cdn-images-1.medium.com/max/600/1*pixFq7k28LKsABpDNRCjJw.png

3 of 27

Please call me Joslenne

​

CS professor | Code for Us Founder

4 of 27

Code for Us: Our Philosophy and Research

We want to offer a free basic coding workshop

Building websites!

Using the library as informal space to create a community for folks

Adults as professionals or outside of college have little free options to learn, not much is known about what works especially if you're learning programming at a later time

We aim to study the impact of the workshops on your knowledge, learning and behavior! [2 surveys]

5 of 27

Workshop Expectations

  • Absences – contact us in advance and we can direct you to resources for that given week
  • Final projects – expectation of a finished or almost finished website which can reflect interest
  • Informal learning space – no grading or homework
  • Please ask questions! Feel free to work with your peers / workshop mates
  • You will always have a break for 10min
  • Laptops are available: just need to ask in advance!
  • Any slides or code, I will always send a follow up email the next day.

​

Other Notes

Library graciously allowed us to use space

have to abide by their rules

no full on dinner or meals in the space

snacks are okay!

We can use library bathroom and water fountain

Wifi is free

Parking is free underneath in the parking ramp

​

6 of 27

Questions?

7 of 27

Who invented the World Wide Web (WWW)?

Tim Berners Lee (1989)

8 of 27

What is Web Design and Development?

9 of 27

Well…. it is a combination of things!

  • Visual elements
  • Design
  • Graphics
  • Multimedia
  • User interface
  • Coding
  • Markup
  • Prototyping / sketching
  • User feedback

​

​

​

​

10 of 27

Main Web Technologies

  • HTML
  • CSS
    • Bootstrap
  • JavaScript / Jquery
    • Angular.JS, React.JS, Node.JS

There are other tools too..

PHP

Rubyonrails

Python

​

​

**There are several other languages out there for Web Development

​

11 of 27

Language Responsibilities… think of a house!

  • HTML Hypertext Markup Language (markup language) - circa 1993!
    • Responsible for content and document structure
    • HTML files end in .html
  • JavaScript (scripting language – follows a more traditional programming language structure) - circa 1995!
    • Responsible for the behavior of the markup and
    • JavaScript files end in .js
  • CSS Cascading style sheets (style sheet language) - circa 1996!
    • Controls the presentation, style, and articulation of design of an HTML document
    • CSS files end in .css

12 of 27

How does it work?

Markup [Code] –> Browser renders it [Interprets it] –> Displays it [Shows us what we want!]

​

​

“Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for its appearance”

13 of 27

Web Tools and Environments

  • Content Management Systems (CMS)
    • Wordpress
    • Joomla
    • Drupal
  • Text editors
    • Notepad
    • Text Wrangler
    • Sublime Text
  • Integrated Development Environment (IDEs)
    • Eclipse
    • Aptana Studio
    • Visual Studio Code
  • WYSIWYG editors (drag and drop)
    • Google Web Designer
    • MS Visual Studio
    • Adobe Dreamweaver
  • Image Editors
    • Illustrator
    • Photoshop
    • InDesign
  • Domain/Hosting
    • Glitch
    • Github
    • Netlify
    • SquareSpace

14 of 27

Browsers

  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Opera
  • DuckDuckGo
  • Microsoft Internet Explorer (please do not use!)

*** Browsers are not consistent with their support of different technologies, hence, why cross-browser compatibility

**Make sure your browsers are always up to date!

​

15 of 27

16 of 27

Browsers

  • https://caniuse.com/
    • Gives us up to date information on which features are currently supported by each browser

17 of 27

Debugging

  • “process of finding and resolving defects or problems within a computer program”

​

    • View Source
    • Inspect Element
    • HTML and CSS Validators

​

​

18 of 27

HTML 4.0 vs HTML 5: A matter of semantics!

  • Simplify the process of making web applications
  • Keep up with globalization and evolution of the internet
  • Faster speeds and technologies like smartphones, tablets, etc

19 of 27

Page Structure

https://mozteach.makes.org/thimble/html-cheatsheet

https://mozteach.makes.org/thimble/css-cheatsheet

20 of 27

Common HTML Tags

HTML elements are structured with a start tag and an end tag, with the content in between:

  • <h1>Here's a header!</h1>
  • In this case, 'h1' is the type of element we are creating.
    • Always remember to close your tags!

Here are some other important tags to remember:

  • <html> and </html> - defines the whole document as an HTML document
  • <body> and </body> - the actual content goes between these tags
  • <h1> and </h1> - one of the six header tags
  • <p> and </p> - the paragraph tag
  • <a href="http://www.yourlinkhere.com">link text</a>

href is an attribute indicating the link address

Some kinds of elements don't require an end tag:

  • <br> - line break
  • <img src="Documents/Pictures/cat.png" alt="Cat">

This is for images saved on your computer - make sure you know where the image is saved!

  • <img src="http://i.imgur.com/81qyN1y.jpg" alt="Doge">

This is for images already hosted online

  • <div>
  • <nav>

​

21 of 27

Syntax Comparison

HTML v. CSS v. JS

22 of 27

Detection of CSS and JS in HTML

  • All 3 work together, they can be combined in one place or separate
  • The differences are called inline, embedded, and external
    • Inline: <a href="/index.html" style="text-decoration: none;">
      • In the actual HTML document file and line
    • External: <link rel="stylesheet" type="text/css" href="mystyle.css">
      • A separate sheet is linked; appropriate for a big project keeps things organized
    • Embedded: {enter styles here} then html code
      • Embedded styles are styles that are embedded in the head of the document. Embedded styles affect only the tags on the page they are embedded in. As in only the html document you work with.

23 of 27

Let’s try Hello World!

24 of 27

Extra Time: Let’s try an about me on Glitch! https://glitch.com/

  1. Can you add an image?
  2. Can you add a list?
  3. Can you add a link?

​

25 of 27

Fun Stuffs! :)

  • Wayback Machine
  • The Useless Web

26 of 27

Want to learn more?

Free resources! Woohoo!

27 of 27

Thank You!

CRII: CNS: RUI: Developing Computational Skills in Non-Computing Professionals using an Informal Learning Approach

  • Next 2 years working on building a workshop series in St. Paul focused on diverse groups of workforce professionals to learn computational skills (programming)
  • Hosted at Macalester College Library/Rondo Community Library and boasts a uniquely designed space, curricula for their needs using an informal learning lens
  • Community outreach and partnerships across campus and St. Paul

Second Year Launching Fall 2024!!!!