Project Series: Plan, design and develop your personal website

plan-design-website.txt

This will be the first project of our series. For the next five to six weeks we will learn how to plan, design and develop a website from start to finish. In the end you will have your own personalized and fully functioning website. Each week you will be required to go through the supplementary learning material.

Module 1 - Building Blocks

Learning CSS & HTML fundamentals will be crucial to your role as a developer. With these skills in hand you’ll be able to translate your ideas from paper and into code. These are really important skills to solidify in your first week.

Learning material
Free code camp

https://www.freecodecamp.org
Click on Map in the navigation of the website
And do the following sections

- HTML & CSS
- Responsive Design with Bootstrap
- jQuery


Build a Responsive Website from Scratch

https://youtu.be/1ZyDCt8QLxE

Google Chrome Developer Tools Crash Course

https://youtu.be/x4q86IjJFag

CSS Floats and Clears

https://youtu.be/xFGBNv2KeVU

CSS Box Model

https://youtu.be/GvIP6QtCVSg

CSS Positioning

https://youtu.be/kejG8G0dr5U


Module 2 - Design it!

As a front-end developer you will become the bridge between design and code. Considering how many design tools there are we will focus on Figma for designing UI’s and pixlr for photo editing.

Learning material
Wireframing tutorial

https://youtu.be/PmmQjLqJQlY

Figma tutorial series

https://youtu.be/e-z_k7QlgKQ?t=39s

Optimize images for the web

http://www.dryfive.com/how-to-optimize-images-for-the-web-using-pixlr
http://optimizilla.com/

Tools
- Photo Editing Tools
  - Photoshop --PAID
  - https://pixlr.com/editor/ --FREE
- Wireframing & UI Tools
  - Sketch --PAID
  - https://www.figma.com --FREEMIUM
  - https://pencil.evolus.vn/ --FREE
  - https://alternativeto.net/software/sketch/ --FREE


Module 3 - Tools of the trade

New tools are being added every day to speed up a developer’s workflow. In this module we will take a look at how to setup NPM and grunt for your local environment, and spicing up your CSS with SASS, flexbox and bootstrap.

Learning material
Free code camp

https://www.freecodecamp.org

- Basic JavaScript
- Object Oriented and Functional Programming
Flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Bootstrap Crash Course

https://youtu.be/5GcQtLDGXy8


Sass Tutorial Series

https://youtu.be/8EwRGJlUP7w


BEM CSS Naming Conventions

http://getbem.com/


Learn command line basics
For windows users

https://youtu.be/MBBWVgE0ewk

For Mac/Unix users

https://youtu.be/oxuRxtrO2Ag


Install Nodejs on your machine

https://nodejs.org/en/download/


Git and Github

https://youtu.be/SWYqp7iY_Tc


NPM Crash Course

https://youtu.be/jHDhaSSKmB0


Install and Configure Grunt

https://youtu.be/TMKj0BxzVgw


Module 4 - Putting it all together
Learning material
Design + Code my Personal Website Series

https://youtu.be/sJhhLvW-Xvg?t=16s

Structure your source code for SEO

https://blog.kissmetrics.com/website-source-code-seo/

Start putting your website together

By now you have a solid skill set to put your site together. It will be important to implement a build tool such as Grunt, and a CSS preprocessor like SASS into your project. Using the BEM methodology for your CSS will make your code clean and organized. You can work off of an html template or build it from scratch using bootstrap or no framework at all. Last of all don’t forget to create a git repository and commit your work.

Resources
- Finding images for your site
  - pexels.com
  - unsplash.com
- Resources for inspiration
  - dribbble.com
  - https://michaelpumo.com/
  - https://medium.freecodecamp.org/15-web-developer-portfolios-to-inspire-you-137fb1743cae
  - http://onnoschwanen.com/
  - https://www.awwwards.com/inspiration/search?text=portfolio&type=all#
- Html templates
  - http://www.free-css.com/free-css-templates
  - https://templated.co/
Module 5 - Deploy and Conquer
- CSS Pseudo Elements
- Contact form with Ajax
- Form Validation
- Setting up hosting / domain name
- Deploy your website online
- Continue personalizing our sites


Learning material
Free code camp

If it takes too long to go through all the algorithms you can skip every 2nd or 3rd one
It’s better to write ten algorithms really well than too many sloppily
https://www.freecodecamp.org

- Basic Algorithm Scripting
- JSON APIs and Ajax


Object Oriented Javascript

https://www.udacity.com/course/object-oriented-javascript--ud015

Modular Javascript Series

https://youtu.be/HkFlM73G-hk

Debugging Javascript

https://youtu.be/-q1z8BPFItw?t=3266s