Kickstart-with-HTML_CSS_JS

In this repo we will add all important rescores and extra thing, so everyone can access all important thing at one place

---

Introduction

Table of contents

• Websites
• HTML
• CSS
• JAVASCRIPT
• Responsive
• Design
• CodeEditor
• Youtube Channel
• Practice
• Some extra
• Wrap Up
• What's Next

Websites

Some free Websites to Get Started with HTML CSS and JAVASCRIPT

1. W3Schools
2. freeCodeCamp
3. THE ODIN PROJECT
4. CodeMentor
5. Eductive
6. javascript.info
7. SOLO LEARN
8. CODECADEMY
9. Scrimba

Documents and Articles

1. MDN web docs
2. devdocs
3. THE ODIN PROJECT
4. Learn JavaScript
5. 28 Free Ebooks and Courses
6. Emmet Cheat sheet
7. CSS-tricks
8. javascript30

HTML

• BEM

  • BEM (which stands for Block-Element-Modifier) is a naming convention standard for CSS class names. It has fairly wide adoption and is immensely useful in writing CSS that is easier to read, understand, and scale.
  • Card__example

• Semantic HTML

  • Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way. Elements such as , and are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.

• HTML Playlist of Kevin Pawell

• Semantic HTML Tags

• codecademy sematic htm

CSS

1. Box Model
2. CSS Selectors
3. Fonts
4. Colors and opacity
5. Padding, Margin
6. Css Units (rem, em, px,vh....)
7. Positions
8. height and Width
9. Flexbox
   • cheatsheet
10. Background
11. Borders
12. Media query
13. Translate
14. Transform
15. Animation
16. Grid
    • Article: Getting Started with CSS Grid
    • CSS GRID TUTORIAL WITH PRACTICE
    • cheatsheet
17. Carousel Slider

- extra

1. Multi-column layout

• exercise to practice

2. MODERN CSS

• a collection of modern css solutions of old css problem.

JAVASCRIPT

• Cheatsheet
• JavaScript Playlist of Hitesh Choudhary
• Reserved keywords as of ECMAScript 2015
• Iterators cheatsheet
• JavaScript Introduction to the Dom
• Domevents

Responsive

• Course: Conquering Responsive Layouts
• Article: The 100 correct way to do css breakpoints
• Youtube:
  • 5 simple tips to making responsive layouts the easy way
  • min(), max(), and clamp() are CSS magic!
  • Creating squishy padding and margin that adapt to the viewport

DESIGN

• wireframe

  • Wireframe, Mockup & Design in Figma
  • Landingfolio

• Tools to help choose Fonts for porjects

  • Fonts in the Wild
  • Fonts in Use
  • Typewolf - What's trending in type
  • Fontpair
  • Font management. Perfected.(Tool)
  • YOUWORKFORTHEM(paid)

• Help to choose Colors
  use 60/30/10 rule while applying color on website

  • mycolor
  • colorhunt
  • articles

• How to use color palettes

Code Editor

• codEsandbox
• Codepen

Youtube Channel

1. Programming with Mosh
2. Kevin Powell(CSS)
3. Web Dev Simplified
4. Fireship
5. The Net Ninja
6. Traversy Media
7. University of Michigan
8. CODER CODER
9. TRAVERSY MEDIA
10. Coding Shuttle by Anuj Bhaiya
11. Apna College
12. Code With Harry
13. freeCodeCamp
14. Bro Code
15. Code with Ania Kubow

Bootcamp

• Bootcamp

Practice

Challenges

1. 100 dayscss
2. Frontend Mentor
3. Devchallenges
4. Codewell
5. 100DAYSOFCODE
6. Sololearn - Challenges, Code Playground and quizzes with learning

cod#### HTML and CSS beginner friendly projects

1. A Tribute Page
2. Webpage Including Form
3. Parallax Website
4. Landing Page
5. Restaurant Website
6. An Event or Conference Webpage
7. Music Store Page
8. Photography Site
9. Personal Portfolio
10. Technical Documentation

For more practice visit

HTML5 Up!

website where you can practice and do challange to level up your learing

1. Build a simple website using HTML, CSS, and JavaScript

Some extra

Frontend Roadmap

Practity

• some resources mentioned on this website.

STACKSHARE.io

• You can know how popluar techonlogy are and which company using them

WayBackMachine

• shows the how website look like when first launch to now

Important Resources

quickref

• lot of quick guid about application which we using these days

Unsplash By Getty

• library for free images without any copyright.

unDraw

• library for SVG's and illustrations.

Google Fonts

• library of hundreds of fonts to use.

Fontawesome

• Thousands of icons to use directly.

Icons8

• library of different icons.

CssTricks

• Latest CSS trends and code snippets.

RemoveBG

• Best way to remove background from any image.

Articles

• 30 browser extensions every developer should have
• Hottest Frontend Tools
• 320 web developer resources
• 8 Cheat Sheets

All Time Saviours

• Chat-gtp
• Stack Overflow
• GitHub
• Codeproject
• GeeksForGeeks

What's Next

• 5 Crucial Things Every Landing Page Should Have

• Sharp your skills in either of the stack

  • MERN
  • MEAN
  • Resumes wiki

• 30 Web Developer Portfolios to inspire you

Optional

• 10 Projects you can look thorough.

  • Online Code Editor (JQuery)
  • Real Time Video Processing using ChromaKey (GreenScreen) Effect
  • Instagram Automation
  • Sorting Visualizer
  • Online Code Editor (React)
  • Stock Visualization-Forecasting dashboard using Dash
  • OurApp - a social media web app in NodeJS
  • Amazon Clone
  • Customer Relationship Manager
  • WhatsApp Web Clone