Build A Real World Beautiful Web APP with Angular — A to Z Ultimate Guide — PART I

Hamed Baatour
May 19, 2018 · 13 min read
Image for post
Image for post

No more ugly tutorials projects! No more fictional brands examples!

Step 1: Design

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Step 2: Development

Image for post
Image for post
npm i -g typescript 
npm i -g @angular/cli
Image for post
Image for post
ng new Minimus --routing
Image for post
Image for post
ng serve -o 
Image for post
Image for post
display: grid;  
grid-template-columns: auto;
grid-template-rows: 0.5fr auto;
Image for post
Image for post
.side-menu__conatiner {
position: fixed;
left: 0;
top: 0 }
.side-menu__container::before {...}
will-change: opacity;
.slide-menu { transform: translateX(-103%); }
.slide-menu-active {  transform: none; }
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
ng g c home
ng g s weather

📱 Looking To Make This APP Responsive?

Image for post
Image for post
using intab.io to test Minimus in iPhone 11 + pixel devices with realtime sync

Conclusion


Continue reading Part II of this tutorial!

Want to Become an Angular Master?

Image for post
Image for post

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store