Web作业 | 代做Css | 代写Html | 作业Assignment | 代写Javascript | Lab代写 | 作业Html5 – 这是一个前端的web开发任务，包括css，js等方面的知识运用
DEVELOPMENTFRONT-END WEB DEVELOPMENT
FRONT-END web
The four headings are each worth 20%.
Each heading contains ve speci c criteria : each is worth 5 points (5%) and is marked on a scale of three.
So each of the marking criteria are allocated a percent as follows:
not addressed: 0
partially addressed: 2.5%
fully addressed: 5%
Valid html5 and CSS3 source code throughout
Consistent code nesting and indentation (2 spaces is industry-
standard)
Separate .css and .js les (e.g. no "style=" or "onclick" in HTML)
Use of CSS3 features e.g. exbox, animations,
Tidy le and folder organisation with lower-case names
CSS grid
2. JavaScript, APIs & JSON
No javascript errors in the browser console
Use of JavaScript for DOM manipulation and/or interaction
ES6 syntax: e.g. "let" and " " over "var", template literals,
arrow functions
Use of JavaScript to handle data (e.g. JSON from an external API)
DRY * code e.g. no repeated similar functions without parameters
const
(* D o not R epeat Y ourselfsee JavaScript Clean Coding…)
Follow these recommended JavaScript tutorials for extra help.
MARKING: MARKING: 33
3. Responsiveness, Accessibility and Interaction
Responsive at any size with mobile- rst CSS breakpoints
Well-ordered information architecture, ease of navigation at all
sizes
Web accessibility (e.g. HTML5 semantic elements, "alt" attributes,
heading structure, etc.)
Coherence of overall design - colour, content, styles, etc.
CSS layout of HTML5 elements e.g. no tables
(the table element is okay for displaying tabular information )
MARKING: MARKING: 44
4. GIT Version Control
Source code and live site on GitHub classroom
Use of for feature development
Regular commits, not all last few days
Brief, informative commit messages
Basic readme.md le with references in
GIT branches
Markdown format
WARNING:WARNING: OUTDA OUTDATEDTED
TUTORIATUTORIALS!LS!
PLEASE NOTE! The Brad Traversy CSS Grid Layout video is
too complicated!!
assignment TIPS: ASSIGNMENT TIPS: 11
CHOOSINGCHOOSING A TOPIC A TOPIC
choose a subect you're interested in
a website youd like to continue working on
perhaps make a site you can use in your career
ASSIGNMENT TIPS: ASSIGNMENT TIPS: 22
TIPS ON TIPS ON USABILITYUSABILITY
Think about your readers/visitors
Let others try your site while you watch and make notes
listen to user feedback (not just your friends!)
check the previous slides on web accessibility
ASSIGNMENT TIPS: ASSIGNMENT TIPS: 33
QUALITYQUALITY NOT NOT Q U A N T I T YQ U A N T I T Y
Keep to 4 pages/screens , therere no set number of features, commits, JavaScript functions…
BUT demonstrate:
Understanding of , and
Structure of code (semantic, well-formatted)
Progression of development (regular commits)
HTML CSS JavaScript
ASSIGNMENT TIPS: ASSIGNMENT TIPS: 44
TECHNICALTECHNICAL TIPS TIPS
Use and adapt example code from the labs
Keep JavaScript for user interaction and/or data
use animation/transition as interface cues
Write brief, informative Git commit messages
ASSIGNMENT TIPS: ASSIGNMENT TIPS: 55
YOUR CTEC3905 CLASSROOM REPOSITORYYOUR CTEC3905 CLASSROOM REPOSITORY
the remote is already set when you clone it
check le paths :
images !== ../images !== /images
make sure you have a lower-case index.html:
NOT home.html or Index.html
keep .html les in the root directory
ASSIGNMENT TIPS: ASSIGNMENT TIPS: 66
BROWSERBROWSER SUPPORT & SUPPORT & VALIDATIONVALIDATION
we will use Chrome for marking
Dont worry about the HTML validator showing warnings for elements that are valid but unsupported in some browsers e.g. HTML5 form eld types color, date…
CSS validation can also throw up some warnings, which we will be lenient about.
ASSIGNMENT TIPS: ASSIGNMENT TIPS: 77
PLAGIARISMPLAGIARISM
writing original code shows your understanding , so if you use tutorials, examples etc. be careful :
adapt the code to the modules marking guidelines
beware of outdated or bad practice (e.g. onclick)
explain what changes you made in code comments or readme.md
reference your sources in the readme le
If in doubt, adapt the lab exercises instead!
PAST WORK: PAST WORK: 11
You wanted to see examples of previous work ,
but Fania has gone much, much further ...
CTEC3905 past work examples
JAVASCRIPT: HELPJAVASCRIPT: HELP
Two good introduction courses to JavaScript :
- you can continue from this lesson to
Or for a video-based approach:
CodeCademy: Introduction To JavaScript
learn why the variables const and let are favoured over var
Watch and Code: Practical JavaScript
Brief article on ES6: JavaScript Versions: ES6 and Before
JAVASCRIPT ES6JAVASCRIPT ES
"use strict"; is good practice ( )
use let or const instead of var for variables
see use strict
const creates an immutable object binding :
const person = { age: 5 };
person.age = 30 ; // OK: can change a property value
person = { age: 10 }; // error: cant replace the object
person = "me"; // error: cant change object to string
person.age = "ten"; // OK: change integer value to string
The person object cannot change, but the values it contains can change! Matthias Byens or Ada Rose Cannon on ES6 const !== immutability
LOCAL STORAGE: LOCAL STORAGE: 11
Browsers have their own storage , similar to cookies.
In this module, we’re using one of the storage functions: localStorage
its for small amounts of data (5Mb)
it stores data in key value pairs
localStorage is insecure so not good for sensitive data (see
- at least for anything sensitive!). However, used correctly its good for non-critical data.
Please Stop Using Local Storage
LOCAL STORAGE: LOCAL STORAGE: 22
Setting and getting data:
localStorage.setItem("name", "Dave");
localStorage.getItem("name"); // Dave
Changing data: basic syntax :
localStorage["name"] = "Fania";
console.log(localStorage["name"]); // Fania
LOCAL STORAGE: LOCAL STORAGE: 33
Instead of using cookies , many websites now use local storage to keep small amounts of data between visits.
It can store preferences or personalise your next visit.
You can see what a website stores in your own browser:
open the web inspector
select the "Application" tab ...
Facebook uses localStorage for several settings:
No, we dont know what most of those are! However, you can
see objects ({…}) and arrays ([…]) stored above.
LOCAL STORAGE: LOCAL STORAGE: 44
Example: set a localStorage item from a eld value :
let theName = document.getElementById("name-field");
localStorage.setItem("name", theName.value);
myElement.innerText = localStorage.getItem("name");
LOCAL STORAGE: LOCAL STORAGE: 55
You can remove an item from localStorage or clear everything :
localStorage.removeItem("name");
localStorage.clear();
And attach an eventListener to use the data on another page :
localStorage.addEventListener("change", myFunction);
myFunction handles what you do with the locaStorage data NOTE browser support is still patchy for LocaStorage events
CSS GRID: CSS GRID: 11
Developers once used the HTML table element to arrange
page elements , but this practice stopped many years ago and
developers began to use CSS float.
CSS float is ne for simple cases , as in the second part of
the when the nav
and main were arranged in two columns beneath the menu.
exbox menu exercise solution for 02-lab
HTML tables are now used only for displaying tabular data in
columns and rowsnot for page layout.
CSS GRID: CSS GRID: 22
CSS grid allows you to arrange major web page content
areas in rows and columns.
These elements can span multiple rows or columns
E.g. in a 4-column layout a header can span all four columns
and at larger screen widths the main tag might span three
columns , while a nav tag spans one column ( exbox inside
the main tag can still arrange section tags side-by-side)
CSS GRID: CSS GRID: 33
THIS IS THIS IS HUGEHUGE!!
You can then rearrange the order of your major web page
content areas using CSS breakpoints!
CSS GRID: CSS GRID: 44
The HTML: marking up the areas
<div class="title">intro</div>
<header>header</header>
<nav>menu</nav>
<main>content</main>
<footer>footer</footer>
CSS GRID: CSS GRID: 55
The CSS (1): naming the areas
.title grid-area { (^) : intro; }header (^) { (^) } grid-area: header; nav grid-area { (^) : menu; }main (^) { (^) } grid-area: content; footer grid-area { (^) : footer; }
CSS GRID: CSS GRID: 66
CSS (2): setting up the grid for default/mobile:
.grid {
display: grid;
grid-template-columns: 1 fr;
grid-template-rows: 1 fr 1 fr 1 fr 1 fr 1 fr;
/* OR- grid-template-rows: repeat(5, 1fr) */
grid-template-areas:
"menu"
"intro"
"header"
"content"
"footer";
}
CSS GRID: CSS GRID: 77
CSS (3): changing the grid for larger screen styles:
@media screen and (min-width: 700px) {
.grid {
grid-template-columns: 2 fr 1 fr;
grid-template-rows: 1 fr 1 fr 1 fr 1 fr;
/* OR- grid-template-rows: repeat(4, 1fr) */
grid-template-areas:
"header header"
"intro menu"
"content menu"
"footer footer";
}
}
CSS GRID: CSS GRID: 88
CSS grid is complex but this will help get you started.
Its only recently gained enough browser support to be
usable, and many of the tutorials are confusing.
Good, simple introductions to CSS grid are hard to nd and
may confuse so, for now, follow the example above.
GIT BRANCH: GIT BRANCH: 11
use branches for developing a feature
branches preserve the "master" branch from harm
develop the new feature on the branch until it works
you can then merge the branch back into "master"
Here’s the workl ow …
GIT BRANCH: GIT BRANCH: 22
get your master branch into a good state
git add. and git commit -m "message here"
create and checkout a new branch :
git checkout -b my-new-branch
work on the new branch , test in the browser
all good? git checkout master
git merge
GIT BRANCH: GIT BRANCH: 33
If you have uncommitted changes on master there will be con icts. These are marked by GIT like this:
<<<<<<< HEAD
new code (keep)
=======
old code (delete if youre sure)
>>>>>>> master
edit les and remove the old code
all good? add and commit
git branch will show all branches