Web Development – The Big Picture Photo Credit: https://cdn-images-1.medium.com/max/600/1*pixFq7k28LKsABpDNRCjJw.png Code For Her - Fall 2018 – Week 1 – 9.18.18 Joslenne Pena Katie O’Leary

Course Expectations Absence – 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 Optional practice problems or assignments Please ask questions! Feel free to work with your peers / workshop mates You will always have a break for 10-15min This is your time! Here to learn and take advantage get what you get our of it!

Course Structure Always some type of lecture (will try to minimize and not making boring!) Hands-on activity Practice/Exercises Break More content On your own and Questions

Ted Talk https://youtu.be/HVnXJf9_tTM  https://youtu.be/-jRREn6ifEQ​

What is Web Development? Can be known as front-end engineering or development or client-side development or UI engineering/dev

What is Web Dev? Visual elements Design Graphics Multimedia User interface Coding Markup Prototyping / sketching User feedback Personally why I like it… Not like your average object oriented programming, you can see what you are doing right away, quick pay off and fun and useful

Main Web Technologies HTML CSS Bootstrap JavaScript / Jquery Angular.JS, React.JS, Node.JS PHP Rubyonrails Python **There are several other languages out there for Web Development

Language Responsibilities HTML Hypertext Markup Language(markup language) Responsible for content and document structure HTML files end in .html JavaScript (scripting language – follows a more traditional programming language structure) Responsible for the behavior of the markup and JavaScript files end in .js CSS Cascading style sheets (style sheet language) Controls the presentation, style, and articulation of design of an HTML document CSS files end in .css When HTML was first introduced, it did have limited functionality for formatting content in a document, in the form of tags for things like font size and color. However, for complex webpages, having to repeat those tags for every single piece of content took a lot of time, and if you wanted to change something, then you had to change all of those tags individually - generally it was very inefficient. So developers came up with the idea of stylesheets, stored in separate files to dictate the formatting rules for each type of content on a website - for example, everything with the header 2 tag will be align: left, color: blue, and font-family: "Georgia". SHOW PLAIN HTML – boring

How does it work? Markup -> Browser renders it -> Displays it

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 Cloud9 WYSIWYG editors (drag and drop) Google Web Designer MS Visual Studio Adobe Dreamweaver Image Editors Illustrator Photoshop FireWorks Make this slide perhaps what we will be using which IDE

Browsers **Make sure your browsers are always up to date! Google Chrome Mozilla Firefox Safari Microsoft Internet Explorer (please do not use!) Browsers are not consistent with their support of different technologies, hence, why we have cross- browser compatibility You might be thinking why are browsers but they are VERY important!!!! Each browser has their own standard and system for rendering features Because when people like Mozilla, Google and Microsoft write their web engines (Geckos, WebKit, Trident), they don't completely follow the standards set by the World Wide Web Consortium. Thus when markup is rendered in different browsers it appears differently.  Don’t follow W3C **Make sure your browsers are always up to date!

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

Debugging “process of finding and resolving defects or problems within a computer program” View Source Firebug Inspect Element Exercise and practice – show sample website https://people.eecs.berkeley.edu/~bjoern/

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

Page Structure https://mozteach.makes.org/thimble/html-cheatsheet https://mozteach.makes.org/thimble/css-cheatsheet https://mozteach.makes.org/thimble/html-cheatsheet

<h1>Here's a header!</h1> 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>

Syntax Comparison HTML v. CSS v. JS https://codepen.io/katrienc/pen/EexWEX In linguistics, syntax is the set of rules, principles, and processes that govern the structure of sentences in a given language, usually including word order. The term syntax is also used to refer to the study of such principles and processes. What is a tag/element, attribute,

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. https://www.w3schools.com/css/css_howto.asp

CFH walkthrough Sites.psu.edu/codeforher Gitlab All workshop information and slides Resources Gitlab All codes and projects

Set up Environment You have downloaded Visual Code Studio Make a file path to keep your source files Includes code, images, videos, audio, etc. Make a New Folder called Code For Her 2018 in your Documents Path We will store everything for the workshop here

Let’s try Hello World

Let’s try an about me

For Fun Wayback Machine

More

Additional https://www.html5rocks.com/en/tutorials/internals/howbrowser swork/ Browser render, DOM tree W3c markup validation - validate your website code to see if it is properly utilized Accessibility https://www.10bestdesign.com/dirtymarkup/ A linter not only points out the errors but it also flag up the warnings for your bad coding practices (credit: https://medium.com/@sarahelson81/finding-cross-browser- compatibility-issues-in-html-and-css-ccb43c60f9e7)

Notes