Chloe

👧 😋 💗 😝

link: https://Chloeiii.github.io/

---

TUTORIALS

• Helpful HMTL+CSS tutorial: Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.
• HTML tutorial: Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.
• Jquery tutorial: jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML
• Angular JS Tutorial: AngularJS is a JavaScript-based open-source front-end web application framework in developing single-page applications.
• Node JS Tutorial: Node.js is an open-source, cross-platform JavaScript run-time environment for executing JavaScript code server-side.
• React JS Tutorial: React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

---

TOOLS

• ColorPad: html color pad
• Adobe Dreamweaver: web development tool - $9.9/mon
• Sublime Text 2: (text editor - for beginners, free)
• Clipping Magic: instantly remove image backgrounds online
• Online Markdown Editor
• Emoji cheat sheet
• JSFiddle: a website where you can test out some JavaScript code snippets you have, before you add them to your project.
• LunaPic: free online photo editor
• Chrome Window Resizer: help testing the site with different screen sizes

---

RESOURCES

• Ionicons: classic icons
• Icons8: innovative icons
• Iconfinder: sets of icons
• Pexels: photos
• Google fonts:online fonts

---

INSPIRATION

• Awwwards: web design trends
• One Page Love: one page website inspiration
• Awwwards:trendy web color palettes and material design color schemes tools

---

TO DO LIST

• main page basic & fixed navigation bar
  • design and replace main page background photo
• hello page
  • profile photo
  • wallpaper
• resume page
  • reset wallpaper
  • link resume pdf
  • add transition effect on resume image
• experience page
  • wallpaper
  • add expriences
  • company images
  • add company link and transition effect on experiences
  • redesign the layout
• projects page
  • add tags
  • add projects
  • redesign projects page(include more details)
• contact page
  • wallpaper
  • email, phone number
  • redesign contact card and hover effect
• other
  • reformat css file
  • adjust div to fit other screen sizes
  • Code Refactor (rebuild the site with React)

---

NOTES

Differences between jQuery vs. AngularJS vs. Node.js

• https://stackoverflow.com/a/41234299

Text Spacing

	1. space between lines 		-> 		line-height: 90%
	2. space between words 		-> 		word-spacing: 30px;
	3. space between letters 	-> 		letter-spacing: 2px;

	4. <span> tag:
		The <span> tag is used to group inline-elements in a document.
		<p>My mother has <span style="color:blue">blue</span> eyes.</p>

Browser Support for Transitions

meta element

	the <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata.
	Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.
		Define the character set used:
		<meta charset="UTF-8">
		
		Define a description of your web page:
		<meta name="description" content="Free Web tutorials">
		
		Define keywords for search engines:
		<meta name="keywords" content="HTML, CSS, XML, JavaScript">
		
		Define the author of a page:
		<meta name="author" content="John Doe">
		
		Refresh document every 30 seconds:
		<meta http-equiv="refresh" content="30">

Hover to show a div

	div {
	    display: none;
	}
	    
	a:hover + div {
	    display: block;
	}
	<a>Hover over me!</a>
	<div>Stuff shown on hover</div>

JQuery Syntax

	$(this).hide() 		- 	hides the current element.
	$("p").hide() 		- 	hides all <p> elements.
	$(".test").hide() 	- 	hides all elements with class="test".
	$("#test").hide() 	- 	hides the element with id="test".