Heholord/withJanika

Let's hack frontend with my girlfriend

Explanation for you

I'm sure with time you could become a sophisticated web designer. To support you I made this project and I hope I can learn one or two things with and from you. Here I am going to put some links and references so you have something to look at if you don't know where to start.

🎮 ... means interactive

📋 ... is a cheatsheet. It is boring to remember everything ...

🔧 ... are tools

1) Both HTML & CSS

I think this is a good point to start: Code School 🎮 and w3schools

1.1) HTML

• HTML5 Cheatsheet 📋

1.2) CSS

• CSS-Tricks

• CSS in 4 Minutes

  1.2.1) Flexbox

• Froggy 🎮

• Cheatshet 📋

  1.2.2) Grid

• Grid Garden 🎮

2) JavaScript

In principle JS (JavaScript) is used to calculate stuff not on the server but at the client side inside the browser. Those calculation could be for example the fading effects of pictures or the dynamic loading of new content (AJAX).

• Code School 🎮

But plain JS can get messy so there are some tools that can boost the development:

2.1) Angular

• Code School sponsored by Google 🎮

• Cheatsheet 📋

  2.2) React

• React Enlightenment by @FrontendMasters

• Cheatsheet 📋

• Tutorial by React

  2.3) many more ...

• Vue (my personal choice)

• jQuery but it is almost outdated or at least overruled

• Redux

• ...

  ... and the JS backend solutions

• nodeJS

• meteor

3) Bootstrap

Bootstrapping is a technique and a technology to quick-start a project. The advantages are that you have a nice looking application from the beginning, but also a lot of unneeded extras. With bootstrap you can apply themes to your website or use a lot of premade components, and many more things.

• Bootstrap Guide & Examples

• w3schools

  3.1) Free Themes

• Startboot

• Bootswatch

4) General & Other

4.1) FrontendMasters

Here you can find state of the art frameworks and explanations FrontendMastersPage & Front-End Developer Handbook 2018

4.2) Awesome lists

Awesome-list for font-end-development is really awesome. And if you have any other interests check out the other lists.

4.3) Reddit

And here is some inspiration of what you can do.

• Frontend
• Web Design
• Web Dev

For example I found this: https://www.reddit.com/r/web_design/comments/7z7f8n/animated_login_avatar/

4.4) Other

• Emoji-Cheatsheet 📋

• Typekid Fonts explorer by Adobe 🔧

• Unsplashed photo explorer 🔧

• Rico's cheatsheets collection 🔧 📋

• Placeholder 🔧

• Try your code here jsFiddle 🔧

  4.4.1) Git

• Git Tutorial by github 🎮

• Git Tutorial

• gitignore templates 🔧

... and of course, you can always talk to me.