Spring 2020 Webpage

Kyra's IST 276 Spring 2020 Webclass Page

Spring Assignments

Assignments

Hobbies Assignment

In this assignment we created a single index.html text file that contained validated HTML5 code, text, links to external sites , and refernces to pictures. The assignment had three of our favorite hobbies and was asked to be structure a particular way.
My Hobbies Webpage Link

Styled Hobbies Assignment

In this assignment we created a single CSS text file that contained validated CSS code that styles a copy of my HTML 5 Hobbies homework page. The assignment should be created in a new folder named Styled Hobbies, while placing a copy of my Hobbies index.html file and other refernces in new folder.


My Styled Hobbies Webpage Link

Collage

In this assignment we created a single index.html file that creates a phto collage with a collection of images pasted together onto a single poster with specfic elements.


My Collage Link

SVG

In this assignmnet we created a single index.html file that creates a graphic design of a famous destination around the world. With this assignment we had to use a series of challeges to complete the art work.


My SVG Creation Link

Test 2


My Test 2 WebPage Link

Assignments Cont.

Bootstrap

In this assignment we created a single index.html file with the new program bootstrap!


My Bootstrap Project

Test 3


My Test 3 Page

Development Tools Help

CODEPEN

CodePen is a web development environment for front-end designers and developers. It is all about faster and smoother development. It allows to build, deploy website and build test cases.

Check It Out

SASS

Sass is the most reliable, mature, and robust CSS extension language. This tool helps to extend the functionality of an existing CSS of a site like variables, inheritance, and nesting with ease.

Check It Out

Class Linked WebClass Pages

Current Client Side Web Technology

HTML

HTML, or “Hypertext Markup Language,” is a code used to build web pages and web applications accessed on the internet.

Netflix Plans to Ditch Silverlight for HTML5

https://www.wired.com/2013/04/netflix-plans-to-ditch-silverlight-for-html5/
The three things Netflix needs to bring its video player to HTML5 are the Media Source Extensions specification, the Web Cryptography API and the Encrypted Media Extensions specification, better known as DRM for the web.
Check This Out

Weblink Aims to Bridge the Nagging Smartphone-Car Disconnect

https://www.wired.com/2013/03/weblink-abalta-auto-apps/
Abalta says Weblink solves this issue since its compatible with all major smartphone OSs and allows existing HTML5 apps to easily integrate into existing infotainment platforms.
Check This Out

CSS

CSS stands for Cascading Style Sheets, CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once.

Building Multi-Directional Layouts

https://css-tricks.com/building-multi-directional-layouts/?utm_campaign=CSS%2BLayout%2BNews&utm_medium=web&utm_source=CSS_Layout_News_235
The :dir() pseudo-class is a new selector modifier that selects an element based on its direction value. It works like this:
Check This Out

4 CSS layouts without using media queries

https://polypane.app/blog/4-css-layouts-without-using-media-queries/?utm_campaign=CSS%2BLayout%2BNews&utm_medium=web&utm_source=CSS_Layout_News_235
With flexbox and grid you can make responsive layouts without having to define fixed breakpoints with media queries. Adam Argyle recently showed us a tweet-sized example of this in action, where just 13 lines of CSS give you 4 separate layouts.
Check This Out

JAVASCRIPT

JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc.

Create simple POS with React, Node and MongoDB #2: Auth state, Logout, Update Profile

https://blog.soshace.com/create-simple-pos-with-react-node-and-mongodb-2-auth-state-logout-update-profile/
Today we will add functionalities to handle authentication state and log out. We will also create a user profile where users can update user information.
Check This Out

Routeless, Targetless, Runnable Routes

https://medium.com/@anywhichway/routeless-targetless-runnable-routes-62a70d59d7a1
Routing can’t get much simpler than this. Just put an "hcx-router" on your page and any time the # changes, a document element with a matching id will be sought and its contents used to replace the empty space between the start and end tags of the router.
Check This Out