If you are new at development and don't know what to do to demonstrate your skills, this repo is to you :D
This repo gives ideas to small apps that can show different fields of basic programming to create your initial portolio. Also shows how to create those apps and where to find the knowledge enough to do it. ENJOY!
I assume that you already have basic knowledge in basic (html, css and js). Frontend development you will need to demonstrate your skills with:
- CSS technologies
- CSS3
- Bootstrap
- Layout Systems
- Pre-processors
- JavaScrip
- DOM
- AJAX
- CRUD
- API consuming
- Design Patterns/important JS features
- Frontend frameworks(optional)
PS: Each topic of this repo has several options, so you can choose wich one fits your goal with coding.
Needs data here.
To create some interesting css projects you can dig into some important aspects of css beyond basics, that they are:
- CSS3
- Where to learn: MDN.
- Small examples: Submarine, Loader and Star Wars.
- What you can do: You could do a simple draw with some animation or make some buttons with transitions effects.
- Bootstrap
- Where to learn: GetBootstrap.
- Small examples: simple examples.
- What you can do: You can do a responsive page using bootstrap col-system with 3 different components of bootstrap.
- Layout systems (flexbox and grid)
- Where to learn: Flexbox and GRID.
- Small examples:
- What you can do: You can create a page a little more complex layout with several columns and responsive to not just phones but also tablets.
- Pre-processors (sass or less)
- Where to learn: Sass and Less.
- Small examples:
- What you can do: You can translate some of your older projects to sass or less and compare the difference between them and css.
- DOM
- Where to learn: Mastering the DOM accessand W3Schools.
- Small examples: W3Schools examples.
- What you can do: You can create a form that sends data through the DOM and display the text inside a 'ul' list.
- AJAX requests
- Where to learn: MDN and W3Schools.
- Small examples:
- What you can do: You can create a folder with 2 others folders inside it. Than create a file that has a dropdown menu where the options are the folders name(using ajax) and when clicked shows the content of the folder.
- CRUD
- Where to learn: CRUD article, CRUD tutorial and TodoList from W3School.
- Small examples: Todolist on codepen and Vanilla JS CRUD.
- What you can do: Create a todolist and also a second list of the tasks setted to "done". Be creative, use css3 animations when the states changes!
- Sample:
TODO using DOM and es2015:
HTML
<body>
<h1>Simple Todo List</h1>
Name:
<input id="formAdd" type="text" name="name">
<button onclick="add()">Add</button>
</br>
<div id="todoList">
<ul id="list">
</ul>
</div>
<script src="todo.js"></script>
</body>JS:
createLiElement = (value) => {
const ul = document.getElementById("list");
const li = document.createElement("li");
const children = ul.children.length + 1;
const buttonDelete = document.createElement("button");
const buttonUpdate = document.createElement("button");
buttonDelete.innerHTML = "Delete";
buttonDelete.onclick = deleteBtn;
buttonUpdate.innerHTML = "Update";
document.getElementById("formAdd").value = '';
buttonUpdate.onclick = (e, addEventListener) => updateBtn(closure(), e);
li.setAttribute("id", children);
const closure = () => {
return {
ul: ul,
li: li,
buttonDelete: buttonDelete,
buttonUpdate: buttonUpdate
}
}
li.appendChild(document.createTextNode(value + ' '));
li.appendChild(buttonDelete);
li.appendChild(buttonUpdate);
ul.appendChild(li)
};
add = () => {
const addValue = document.getElementById("formAdd").value;
return (addValue === null || addValue === '') ? alert('Please fill this form') : createLiElement(addValue);
};
deleteBtn = (e) => {
const liId = e.path[1].id;
const elem = document.getElementById(liId);
elem.parentNode.removeChild(elem);
};
updateBtn = (closure, e) => {
const value = document.getElementById("formAdd").value;
return (value === null || value === '') ? alert('Write in the field!') : (() => {
const liId = e.path[1].id;
const elem = document.getElementById(liId);
closure.buttonDelete.innerHTML = "Delete";
closure.buttonDelete.onclick = deleteBtn;
closure.buttonUpdate.innerHTML = "Update";
const div = document.createElement("div");
const item = closure.li.appendChild(div);
item.setAttribute("id", liId);
div.appendChild(document.createTextNode(value + " "))
div.appendChild(closure.buttonDelete);
div.appendChild(closure.buttonUpdate);
elem.parentNode.replaceChild(item, elem);
document.getElementById("formAdd").value = '';
})();
};- API consuming
- Where to learn: Using ajax, using jquery or using axios(this one needs to know NPM and node modules manegement, it is optional to use this).
- Small examples:
- What you can do: You can make a search field that receives a string, and returns some information from some public API here.
- Sample:
//This shows in the console random jokes about Chuck Norris.
(function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var obj = JSON.parse(this.response); //Parser to extract just the information that i want.
console.log(obj.value.joke);
}
};
xhttp.open("GET", "http://api.icndb.com/jokes/random", false);
xhttp.send();
} )()- Patterns and important JS features
- Where to learn: MVC, closures and module pattern, types of for loops, this and singleton pattern.
- SmallExamples:
- What you can do:
- Frameworks frontend
PS: Site with todolists implemmented in several js frameworks: http://todomvc.com/