https://www.npmjs.com/package/http-server
Learn more Here is a list of resources that may be helpful as you continue your learning journey.
| Topic | URL |
|---|---|
| HTTP Overview (Mozilla) | https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview |
| Introduction to Networking by Dr.Charles R Severance | https://www.amazon.com/Introduction-Networking-How-Internet-Works/dp/1511654945/ |
| Chrome Developer Tools Overview (Google) | https://developer.chrome.com/docs/devtools/overview/ |
| Firefox Developer Tools User Docs (Mozilla) | https://firefox-source-docs.mozilla.org/devtools-user/index.html |
| Getting Started with Visual Studio Code (Microsoft) | https://code.visualstudio.com/docs |
Learn more Here is a list of resources that may be helpful as you continue your learning journey.
| Topic | URL |
|---|---|
| HTML Elements Reference (Mozilla) | https://developer.mozilla.org/en-US/docs/Web/HTML/Element |
| The Form Element (Mozilla) | https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form |
| What is the Document Object Model? (W3C) | https://www.w3.org/TR/WD-DOM/introduction.html |
| ARIA in HTML (W3C via Github) | https://w3c.github.io/html-aria/ |
| ARIA Authoring Practices (W3C) | https://www.w3.org/TR/wai-aria-practices-1.2/ |
Learn more Here is a list of resources that may be helpful as you continue your learning journey.
| Topic | URL |
|---|---|
| CSS Reference (Mozilla) | https://developer.mozilla.org/en-US/docs/Web/CSS/Reference |
| Bootstrap Themes | https://themes.getbootstrap.com/ |
| Book/Author | Buy & Read |
| HTML and CSS: Design and build websites by Jon Duckett | https://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/ |
| CSS Definitive Guide by Eric Meyer | https://www.amazon.com/CSS-Definitive-Guide-Visual-Presentation/dp/1449393195/ |
| Bootstrap 5 Foundations by Daniel Foreman | https://www.amazon.com/Bootstrap-Foundations-Mr-Daniel-Foreman/dp/B0948GRS8W/ |
| Responsive Web Design with HTML5 and CSS by Ben Frain | https://www.amazon.com/Responsive-Web-Design-HTML5-CSS-dp-180324271X/dp/180324271X |
| Selector | Example |
|---|---|
| Element Selectors | p { |
| ID Selectors | #latest { |
| Class Selectors | .navigation { |
| Element with Class Selector | p.introduction { |
| Descendant Selectors | #blog h1, #blog div h1 { |
| Child Selectors | #blog > h1 { |
| :hover Pseudo-Class | a:hover { |
| Other Selectors | There are many other CSS selectors available |
| Form Element | CSS class |
|---|---|
| input | form-control |
| input type="checkbox" | form-check-input |
| input type="radio" | form-check-input |
| input type="range" | form-range |
| select | form-select |
| more | https://getbootstrap.com/docs/5.0/forms/overview/ |
| switch | https://getbootstrap.com/docs/5.0/forms/checks-radios/#switches |
| input groups | https://getbootstrap.com/docs/5.0/forms/input-group/ |
| CSS Framework/Library | Site | Feature |
|---|---|---|
| Foundation | https://get.foundation/ | Minimal loading time |
| Pure.css | https://purecss.io/ | Similar to Bootstrap |
| Tailwind CSS | https://tailwindcss.com/ | Uses a utility-based approach |
| UIKit | https://getuikit.com/ | Easily customize the style rules and visuals |
| MVP.css | https://andybrewer.github.io/mvp/ | Sufficient features to demo to customers |
JavaScript libraries commonly used with React
| Library | Site | Feature |
|---|---|---|
| Lodash | https://lodash.com/ | Logic commonly used to write across applications |
| Luxon | https://moment.github.io/luxon/#/ | Manipulate Date/Time and display them |
| Moment.js | https://momentjs.com/ | Parse, validate, manipulate, and display dates and times |
| Redux | https://redux.js.org/ | State management |
| Axios | https://axios-http.com/ | Communicating with APIs over HTTP |
| Jest | https://jestjs.io/ | Write automated tests |
| JSX Ref | https://reactjs.org/docs/jsx-in-depth.html | Build React components |
| Docs | Site |
|---|---|
| Choosing between Traditional Web Apps and Single Page Apps (Microsoft) | https://docs.microsoft.com/en-us/dotnet/architecture/modern-web-apps-azure/choose-between-traditional-web-and-single-page-apps |
| React Source Code (Github) | https://github.com/facebook/react |
| Introduction to React.js (2013) | https://youtu.be/XxVg_s8xAms |
Here is a list of resources that may be helpful as you continue your learning journey. These resources provide some more in-depth information on the topics covered in this module.
Here is a list of resources that may be helpful as you continue your learning journey. These resources provide some more in-depth information on the topics covered in this module.
| Resource | Site |
|---|---|
| MDN functions | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function |
| MDN try...catch | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch |
| Iteration protocols | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch |
| The Math object on MDN | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math |
| The String object on MDN | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String |
| MDN JavaScript error reference | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors |
| The null value on MDN | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null |
| The undefined property on MDN | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined |
They are “first-class citizens”. What does that mean?
- pass to other functions
- save in a variable
- return from other functions
- It accepts other functions as arguments
- It returns functions when invoked
- A pure function returns the exact same result as long as it's given the same values
- It should not have side-effects. A side-effect is any instance where a function makes a change outside of itself
Here is a list of resources that may be helpful as you continue your learning journey. These resources provide some more in-depth information on the topics covered in this module.
| Resource | Site |
|---|---|
| MDN Functions Guide | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions |
| MDN Glossary: Recursion | https://developer.mozilla.org/en-US/docs/Glossary/Recursion |
| MDN Glossary: Scope | https://developer.mozilla.org/en-US/docs/Glossary/Scope |
| Functional Programming in JavaScript | https://www.toptal.com/javascript/functional-programming-javascript |
| MDN: First-class functions | https://developer.mozilla.org/en-US/docs/Glossary/First-class_Function |
| Resource | Site |
|---|---|
| Constructor | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor |
| Classes | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes |
| Object-oriented programming | https://css-tricks.com/the-flavors-of-object-oriented-programming-in-javascript/ |
| Regular Expressions in JavaScript | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions |
| RegExp object in JavaScript | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp |
| OOP | Principles |
| Encapsulation | Making a code implementation "hidden" from other users |
| Abstraction | Code what matters |
| Polymorphism | Something that can take on many shapes |
bun test
bun test --coverage| Input | Description |
|---|---|
| <input type="text"> | text |
| <input type="hidden"> | hidden text |
| <input type="email"> | electronic mail |
| <input type="tel"> | telephone |
| <input type="url"> | url |
| <input type="date"> | date |
| <input type="time"> | time |
| <input type="week"> | week |
| <input type="month"> | week |
| <input type="number"> | number |
| <input type="range"> | range |
| <input type="color"> | color |
| <input type="file"> | choose file |
| <input type="submit"> | submit form |
| <input type="image"> | image |
| <input type="reset"> | reset form to default values |
| <input type="search"> | search |
| Attribute | Description |
|---|---|
| required | Denotes a mandatory input that the user can’t leave empty. It can be used with any input type |
| minlength | Specifies the minimum length of a text input |
| maxlength | Specifies the maximum length of a text input |
| min and max | Determine the minimum and maximum values allowed for an input field. They are usually applied to numerical text inputs |
| multiple | Indicates that the user can enter more than one value in a single input field. This attribute can only be used for email and file input types |
| pattern | Defines a particular pattern that an input field value has to fulfill to be considered valid, a regular expression to specify the pattern |
<iframe src="https://example.com/…" name="My Frame" width="400" height="300" allow="camera; microphone; fullscreen; geolocation" sandbox="allow-forms allow-scripts" title="An embedded document about my fb feed"> </iframe>
| sandbox value | Description |
|---|---|
| allow-downloads | Allows the user to download an item |
| allow-forms | Allows the user to submit forms |
| allow-modals | The resource can open modal windows |
| allow-orientation-lock | Lets the resource lock the screen orientation |
| allow-popups | Allows popups to open |
| allow-presentation | Allows a presentation session to start |
| allow-scripts | Lets the resource run scripts without creating popup windows |
When the value of this attribute is empty, all restrictions are applied
| referrerpolicy value | Description |
|---|---|
| no-referrer | The referrer header will not be sent |
| origin | The referrer will be limited to the origin of the referring page |
| strict-origin | The origin of the document is sent as the referrer only when using the same protocol security level (HTTPS to HTTPS) |
<iframe src="my_iframe_src.html" srcdoc="<p>My inline html</p>"> </iframe>
| loading value | Description |
|---|---|
| eager | iframe should be loaded immediately when the web page loads |
| lazy | Loaded when iframe is displayed in the browser |
| Property | Description |
|---|---|
| justify-content | For item alignment on main axis |
| align-items | For item alignment on cross axis |
| align-self | For unique flex items on cross axis - alignment |
| align-content | Used for packing flex lines and control over space |
| flex-wrap | Span the entire width of the axis |
| flex-direction | Change the ‘main’ axis from horizontal rows to vertical columns |
| flex-grow, flex-shrink, flex-basis | Together these determine how the flex takes up space, grows or shrinks according to the space available |
| flex: 0 1 auto; | flex-grow set to 0, flex-shrink to 1 and flex-basis to auto |
| flexbox | https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-basics-and-terminology |
| Property | Description |
|---|---|
| display: grid | Allow you organize the various elements on your page |
| grid-template-rows: none | Configure your elements but with this setting the elements are organized like columns on a table |
| grid-template-areas: none | Configure the names of a grid and how they sit in relation to one another |
| grid-auto-rows: auto | Default setting for all row sizes that have not been explicitly configured |
| grid-auto-columns: auto | Default setting for all column sizes that have not been explicitly configured |
| grid-auto-flow: row | Default location for rows that are not explicitly allocated |
| column-gap: normal | This sets the gap between the columns |
| row-gap: normal | This sets the gap between the rows |
Absolute units are used when the size of the web page is known and will remain constant
| Unit | Name | Comparison |
|---|---|---|
| Q | Quarter-millimeters | 1Q = 1/40th of 1cm |
| mm | Millimeters | 1mm = 1/10th of 1cm |
| cm | Centimeters | 1cm = 37.8px = 25.2/64in |
| in | Inches | 1in = 2.54cm = 96px |
| pc | Picas | 1pc = 1/6th of 1in |
| pt | Points | 1pt = 1/72nd of 1in |
| px | Pixels | 1px = 1/96th of 1in |
Given the dynamic nature of web pages today and the variable size of devices in use, relative units are the go-to option in many cases
| Unit | Description and relativity |
|---|---|
| em | Font size of the parent where present |
| ex | x-co-ordinate or height of the font element |
| ch | Width of the font character |
| rem | Font size of the root element |
| lh | Value computed for line height of parent element |
| rlh | Value computed for line height of root element which is <html> |
| vw | 1% of the viewport width |
| vh | 1% of the viewport height |
| vmin | 1% of the smaller dimension of viewport |
| vmax | 1% of the larger dimension of viewport |
| % | Denotes a percentage value in relation to its parent element |
| Type | Description | Example |
|---|---|---|
| Inline styles | Attached with the ‘style’ attribute, they have the highest specificity | <p style=“color: white;”> |
| IDs | They are represented by ‘#’ | #div |
| Classes, attributes, and pseudo-classes | Classes, and the attributes inside the selectors | .my-class, p[“attribute”], div:hover |
| Elements and pseudo-elements | They have the lowest position in the specificity hierarchy | div, p |
CSS specificity
| Selector | Syntax | Example |
|---|---|---|
| Element | element | div { } |
| Class | .class | .alpha { } |
| ID | #id | #alpha { } |
| Universal | * | * { } |
| Elements | Syntax | Example | Description |
|---|---|---|---|
| Two classes | .first-class.second-class | .alpha.beta { } | All elements with classes alpha and beta |
| Element and class | element.class | p.alpha { } | All alpha class elements inside <p> |
| Two elements | element, element | p, div { } | All <p> and <div> elements |
| Two elements | element element | p div { } | All <div> elements inside <p> |
| Selector | Syntax | Example | Description |
|---|---|---|---|
| Descendant | element element | div p { } | All <p> descendants of <div> |
| Child | element > element | div > p { } | All <p> direct descendants of <div> |
| Adjacent Sibling | element + element | div + p { } | <p> element directly after <div> |
| General Sibling | element ~ element | div ~ p { } | All <p> element iterations after <div> |
| Selector | Syntax | Description of selection |
|---|---|---|
| [attribute] | [href] { } | Selects all elements with a href attribute |
| [attribute=value] | [lang="fr"] { } | Selects all elements with lang attribute that has a value of "fr" |
| [attribute~=value] | [input~=hello] { } | Elements with input attribute containing the whitespace separated substring "hello" |
| [attribute|=value] | [lang|=en] { } | Elements with lang attribute value equal to "en" or "en-"(en hyphen) |
| [attribute^=value] | a[href^="https"] { } | Every <a> element with href attribute value begins with "https" |
| [attribute$=value] | a[href$=".docx"] { } | Every <a> element with href attribute value ends with ".docx" |
| [attribute*=value] | a[href*="meta"] { } | Every <a> element with href attribute value has substring "meta" |
| Pseudo-class | Example | Description of selection |
|---|---|---|
| :active | a:active { } | All active links |
| :checked | input:checked { } | All the checked <input> elements |
| :default | input:default { } | All default <input> elements |
| :disabled | input:disabled { } | All disabled <input> elements |
| :empty | div:empty { } | All the <div> elements with no children |
| :enabled | input:enabled { } | All the enabled <input> elements |
| :first-child | p:first-child { } | All the <p> elements who are the first child of a parent element |
| :first-of-type | p:first-of-type { } | All the <p> element who are the first <p> element of a parent element |
| :focus | input:focus { } | Input element under focus |
| :fullscreen | :fullscreen { } | The element in full-screen mode |
| :hover | p:hover { } | Action effect on mouse hover |
| :invalid | input:invalid { } | Input elements with an invalid value |
| :last-child | p:last-child { } | All the <p> elements who are the last child of a parent element |
| :last-of-type | p:last-of-type { } | All the <p> elements who are the last <p> element of a parent element |
| :link | a:link { } | All unvisited links |
| :not(selector) | :not(div) { } | All the elements that are not a <div> element |
| :nth-child(n) | div:nth-child(3) { } | All the <p> elements that are the third child of a parent element |
| :nth-last-child(n) | div:nth-last-child(3) { } | All the <div> elements which are the third child of a parent element, counting from last child element |
| :nth-last-of-type(n) | p:nth-last-of-type(2) { } | The second sibling from the last child of a parent element |
| :nth-of-type(n) | p:nth-of-type(2) { } | The second sibling of a parent element |
| :only-of-type | p:only-of-type { } | All the <p> elements which are only <p> elements inside its parent |
| :only-child | p:only-child { } | All the <p> elements which are only child of a parent element |
| :optional | input:optional { } | The input elements with no "required" attribute |
| :required | input:required { } | Selects input elements with the "required" attribute specified |
| :root | :root { } | The Root element of document |
| :selection | ::selection { } | The portion of an element that is selected by a user |
| :valid | input:valid { } | All the input elements with a valid value |
| :visited | a:visited { } | Selects all visited links |
| Syntax | Example | Description of selection |
|---|---|---|
| ::after | p::after { } | Inserts content after content of <p> element |
| ::before | p::before { } | Inserts content before content of <p> element |
| ::first-letter | p::first-letter { } | Selects first letter of every <p> element |
| ::first-line | p::first-line { } | Selects first line of every <p> element |
| ::placeholder | input::placeholder { } | Selects input elements with "placeholder" attribute specified |
| ::marker | ::marker { } | Selects markers in a list |
@keyframes animationname { keyframes-selector { css-styles; } }
@keyframes animationname {
from { color: blue; }
to { color: red; }
}
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
div {
animation: myanimation 3s infinite;
}The shorthand for the animation property consists of the following properties with their default values:
- animation-name: none
- animation-duration: 0s
- animation-timing-function: ease
- animation-delay: 0s
- animation-iteration-count: 1
- animation-direction: normal
- animation-fill-mode: none
- animation-play-state: running
- animation-timeline: auto