The website designs and details are found in Files > Static HTML (the WebsiteSpecifications.pdf page has some styling specifications):
The idea behind this is as a web developer you won't be asked to design just program what the designer has created.
Also if you would like to create the first 3 pages of your portfolio site which has at least a homepage, about, and contact page then you can do that and it will be graded with similar expectations as the static site created here.
Assignment
-
Create a new GitHub repository
-
If the repo is private then make sure to add kamijean as a collaborator so I can examine the code, if it is public then you won't need to add me as collaborator.
-
Create a .gitignore file in the main section of the project
-
Ignore all the .orig files (and if you have a mac ignore the .DS_Store files) and any other files you feel necessary to ignore
-
Create an index.html page which will be your homepage, an about.html, and a contact.html pages
-
Put images into an image folder8
-
Make sure all pages have associated titles to describe what they are
-
Add basic bootstrap.css file or whatever you've chose to make your project responsive to the project.
-
Use the images and help to create HTML and CSS to the 3 pages given to you in the Files
-
Use javascript to validate the contact form before submission (e.i. verify the email is a valid email or is present as well as the name) and show error/success message if it validates.
-
Use javascript or css to animate at least one element on the site
-
Put site online via Cloud9 or Heroku or on a domain you own
-
Submit both your code to GitHub and link to live site
(Links to an external site.)Extra Learning (Links to an external site.)Tutorials http://www.w3schools.com/html/ (Links to an external site.)
https://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1?curriculum_id=50579fb998b470000202dc8b (Links to an external site.)
(Links to an external site.)If you want...
-
Learn something about html
-
Add a new file to the repository that tells me something useful you've learned
(Links to an external site.)References (Links to an external site.)Quick HTML Reference http://www.simplehtmlguide.com/cheatsheet.php (Links to an external site.)
http://www.htmlgoodies.com/beyond/reference/article.php/3472851/Quick-HTML-Reference.htm (Links to an external site.)
(Links to an external site.)Quick CSS Reference http://www.dhtmlgoodies.com/scripts/css-lookup/css-lookup.html (Links to an external site.)
https://www.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf (Links to an external site.)
http://www.csszengarden.com/ (Links to an external site.)
http://paletton.com/ (Links to an external site.)
(Links to an external site.)Editors https://atom.io/ (Links to an external site.)
https://www.sublimetext.com/ (Links to an external site.)
https://github.com/vim/vim (Links to an external site.)
(Links to an external site.)Git Help https://desktop.github.com/ (Links to an external site.)
http://gitx.frim.nl/ (Links to an external site.)
https://git-scm.com/docs/git-mergetool (Links to an external site.)
(Links to an external site.)Submitting Github has a timestamp and will show if the work has been done. You will be graded mostly on the visual look of the site, and your code will also be reviewed.