Web Development 101 Workshop 29-08-2018 Initiated by Web Development 101 Workshop 29-08-2018
Agenda Web Fundamentals and GitHub Developing Front End Content - HTML - CSS JavaScript Programming Language CSS Design Framework – Materialize CSS
Web Fundamentals
Web Page A web page is simply an electronic page that is a part of a book which in this case is a website. A website is composed of several web pages. These web pages are a combination of text, images, videos and links. Web pages are often linked to each other through hyperlinks. So a web page is one single page of information whereas a website is made up of a number of web pages.
How do web pages work? Browsers are applications that can display web pages. E.g. Chrome, Firefox, Safari, Internet Explorer, Edge, etc.
How do web pages work? Web pages are written in a markup language called HTML, so browsers display a web page by reading and interpreting its HTML.
How do web pages work? The HTML file might link to other resources, like images, videos, as well as JavaScript and CSS (stylesheet) files, which the browser then also loads.
It either stores or generates the web page returned. How do web pages work? A web server is a program running on a computer that delivers web pages in response to requests. It either stores or generates the web page returned.
How do web pages work? srmdsc.com 1. You type in a URL, which is the address of the HTML file on the internet.
How do web pages work? GET 2. The browser asks the web server that hosts the document to send that document. GET
How do web pages work? 3. The web server responds to the browser with HTML file that was requested. OK
How do web pages work? GET OK OK ... GET 4. The browser reads the HTML, sees the embedded resources and asks the server for those as well. GET OK ... GET OK
How do web pages work? 5. The web page is loaded when all the resources are fetched and displayed. srmdsc.com
GET vs POST HTTP request
Web Hosting A web hosting provider offers a service that allows us to make our website accessible to anyone who goes to our domain on the internet. So we need to register/purchase a domain from a hosting provider and then ALSO purchase a hosting service as well. These are two DIFFERENT things altogether. A domain is paid annually and hosting is mostly paid monthly/quarterly/yearly.
GitHub Pages GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository. You can create and publish GitHub Pages sites online by using GitHub Desktop or the command line. GitHub Pages is a static site hosting service and doesn't support server-side code such as, PHP, Ruby, or Python.
Text Editors A text editor is a program where you write your code. You can write code for HTML, CSS, JavaScript, Python, PHP, Ruby etc. It is essential that you choose a good text editor when you start. A good text editor can increase productivity and development speed considerably and it makes you more efficient.
HTML
CSS
JAVASCRIPT
HTML
HTML is <em>awesome!!!</em> <img src="puppy.png" /> What is HTML? HTML (Hypertext Markup Language) Describes the content and structure of a web page; not a programming language. Made up of building blocks called elements. <p> HTML is <em>awesome!!!</em> <img src="puppy.png" /> </p>
Basic HTML page structure (i.e. copy/paste boilerplate) <!DOCTYPE html> <html> <head> <title>Web Dev 101</title> </head> <body> ... contents of the page... </body> </html> Saved in a filename.html file.
Basic HTML page structure (i.e. copy/paste boilerplate) <!DOCTYPE html> <html> <head> <title>WEB DEV</title> </head> <body> ... contents of the page... </body> </html> Metadata that doesn't appear in the viewport of the browser E.g. <title> shows up as the name of the tab Contents that render in the viewport of the browser
HTML is <em>awesome!!!</em> <img src="puppy.png" /> HTML elements <p> HTML is <em>awesome!!!</em> <img src="puppy.png" /> </p> An element usually has start and ending tags (<p> and </p>) content: stuff in between start and end tags An element can be self-closing (img) An element can have attributes (src="puppy.jpg") Elements can contain other elements (p contains em and img)
Some HTML elements (to place within <body>) Top-level heading h1, h2, ... h6 <h1>Moby Dick</h1> Paragraph <p>Call me Ishmael.</p> Line break since feeling is first<br/> who pays any attention Image <img src="cover.png" /> Link <a href="google.com">click here!</a> Strong (bold) <strong>Be BOLD</strong> Emphasis (italic) He's my <em>brother</em> and all
CSS
CSS selector { property: value; } CSS: Cascading Style Sheets Describes the appearance and layout of a web page Composed of CSS rules, which define sets of styles selector { property: value; }
Saved in a filename.css file. A CSS file is composed of style rules: selector { property: value; } selector: Specifies the HTML element(s) to style. property: The name of the CSS style. value: The value for the CSS style. Saved in a filename.css file.
"All forks on the table should be gold" CSS // NOT REAL CSS fork { color: gold; } "All forks on the table should be gold"
"All <p> elements on the page should be blue and bold" CSS p { color: blue; font-weight: bold; } "All <p> elements on the page should be blue and bold"
HTML & CSS Quick Intro