swapnilmore1298 / ui-practice

UI Practice notes

Introduction

Here Practice for following :

CSS -> Responsive / commonly used designs

JS -> Namaste Javascript concepts You don't know JS Eloquent JS Build Netflix landing page with HTML, CSS and JS

Angular -> basic concepts advanced concepts ngx, ngrx, observables, pipes testing

Responsive website development

15th Jan

Researching topics

• Viewport Meta Tag
• Media Queries
• Media Orientation (to adapt Landscape and Portrait as well)
• Flexbox
• Responsive Images and Videos
• use Foo. it takes report Lighthouse about performance.
• Responsive Font sizes

Note: While making site responsive, site loading time should not increase, or bounce rate will increase as well.

Optimize the site loading as well using following.

1. caching
2. minification
3. efficient css layout
4. avoid render blocking JS
5. optimize images
6. improve critical rendering path

Responsive Breakpoints (BP -> width of screen where css changes)

Decide which one -> responsive or screen size Common approach is Mobile first approach. Then put a bp for tablet and desktop only. Bootstrap helped to popularize this approach alot.

For mobile, set all width : 100%, then going further, specify the splits.

Checklist from Roadmap.sh

• JS

Visit Dedicated JavaScript Roadmap W3Schools – JavaScript Tutorial The Modern JavaScript Tutorial Learn JavaScript: Covered many topics Eloquent JavaScript textbook You Dont Know JS Yet (book series) JavaScript Crash Course for Beginners Build a Netflix Landing Page Clone with HTML, CSS & JS Build 30 Javascript projects in 30 days Learn the basics of JavaScript JavaScript for Beginners

• HTML

W3Schools: Learn HTML htmlreference.io: All HTML elements at a glance HTML For Beginners The Easy Way Web Development Basics Codecademy - Learn HTML Interactive HTML Course HTML Full Course for Beginners | Complete All-in-One Tutorial HTML Full Course - Build a Website Tutorial HTML Tutorial for Beginners: HTML Crash Course

• CSS

The Odin Project What The Flexbox! Learn CSS | Codecademy Learn Intermediate CSS | Codecademy CSS Complete Course CSS Crash Course For Absolute Beginners HTML and CSS Tutorial CSS Masterclass - Tutorial & Course for Beginners W3Schools — Learn CSS cssreference.io: All CSS properties at a glance Web.dev by Google — Learn CSS freeCodeCamp — Responsive Web Design Learn to Code HTML & CSS Joshw Comeaus CSS Hack Blog Posts 100 Days CSS Challenge CSS Tutorial | Scaler