Web Designer and Developer Academy
The most important thing to understand about web design is that it is NOT about making things look "pretty" or "expressing yourself".
Design is not "art", design is about communication.
You (The Designer) are communicating to the user:
- WHAT the website does
- WHAT the buttons do
- HOW should the user interact with the website
- HOW can the user understand what is going on?
- HOW can you prevent the user from doing stupid stuff?
- HOW can you trick the user into doing what it is you really want them to do lol.
Web Design
Vector vs. Raster graphics
https://www.youtube.com/watch?v=p2thSkOa_Xg
Image File Formats
https://youtu.be/ww12lImOJ38?feature=shared
For more details:
https://www.youtube.com/watch?v=WblPwVq9KnU
Vector Graphics Editor: Figma or Sketch
I recommend learning Sketch first.
https://www.sketch.com/guides/#courses
It has a dedicated desktop app and works fully offline.
Figma is very similar so you can also learn Figma later on.
You can download the free trial for Sketch:
https://www.sketch.com/signup/
Once you are familiar with it, I will give you my license key.
Wireframes
https://www.youtube.com/watch?v=2hQA1ZsGAH8
https://www.youtube.com/watch?v=pN92rnO_n5U
I think Ninjamock is the best wireframing tool, much better than sketching on iPad or using Sketch or Figma.
Ninjamock
Ninjamock is crazy fast if you use the templates. It looks hand drawn and sorta crappy, which is exactly what you want in a wireframe.
Ninjamock
https://www.youtube.com/playlist?list=PLHOoBqQmJ0gwld_wvwE0SYrS-q96aL5d2
Logo Design
You already designed the Parakeet Logo, so you understand the basics of this part
Favicons
After you create a logo, you need to create a favicon version of it for the website.
https://www.youtube.com/watch?v=1ovWLjV16WI
https://favicon.io/favicon-converter/
Web Development
HTML
https://www.codecademy.com/learn/learn-html
VSCode
If you are going to write code, then you need a CODE editor.
https://www.youtube.com/watch?v=WPqXP_kLzpo
Download VS Code (or even better, VS Codium) and follow along.
And if you want a more in-depth guide, try this one:
https://www.youtube.com/watch?v=heXQnM99oAI
React
Writing HTML code directly is BULLSHIT and everyone hates doing it. Nowdays, people use new tools (like React, for example) to write code that is then turned into HTML automatically later on :)
Using Templates
People rarely make a website from scratch, so find a cool nice template, download the sketch/ figma files, make a mockup of what you want the website to look like, then edit the React template to make it look like how you want.
Example template: https://cruip.com/demos/cube/?nc=1
Website I made based on that template: https://www.starstreamlabs.com/
Other Concepts
Kerning Typeface