Skip to content

Instantly share code, notes, and snippets.

@JoshuaPoddoku

JoshuaPoddoku/aTheUnpretentiousWebHome.md

Last active April 27, 2022 11:44
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JoshuaPoddoku/e22e39d9b389d8f6dbc2fae4b4565f9d to your computer and use it in GitHub Desktop.
Save JoshuaPoddoku/e22e39d9b389d8f6dbc2fae4b4565f9d to your computer and use it in GitHub Desktop.
Download ZIP
Welcome to The Unpretentious Web
Raw
aTheUnpretentiousWebHome.md

Introduction

The Unpretentious Web is an initiative to focus on productive skills for web development. Due to amid outbreak of COVID-19, most of us are sitting at home pausing all the outdoor activities. It's the right time to learn, collaborate and contribute. The key aspect of this community is to learn web developement in an effective way, right from the basics. We will provide resources, links, PDFs and chance to make your own projects and collaborate with others.

Getting Started

🚴 The Action Plan would help all the novice webdevelopers to tackle real life problems in a productive way. Join us Today!!

Slack channel is now live!

Deliverables

⏳

  • Resources (links, PDFs, etc.) 📣
  • Daily Challenges 💪
  • Tips 🔧
  • Motivation 📰
  • Exclusive Content 💯

Prerequisites

Introduction to OpenSource: Git and Github

👀

Creating your first github repository

Learn GIT from japanese leading learning platform for FREE valid upto april 30
  • after registering through above link click here to go for [git course]

Learning Tracks

HTML (choose any one)

CSS and styling (choose any one)

Javascript (choose any one)

Project Ideas

  • Create a static website using HTML, CSS, and Bootstrap
  • Try developing on real-world problems. (examples below)
    • Covid-19 awareness.
    • Economic Depression.
    • Bullying.
    • Website for an NGO.
    • Social abuse/ reduce crime rate
    • Time management.
    • Motivation.
    • Education.

Resources

Quick Start (Practice)

  • freecodecamp.org: If you are a complete beginner, you can have a quick command on HTML and CSS here.
  • Suggested framework to beautify your website : Material Design Bootstrap
  • Tip 💡 : It is better to start implementing and get hands-on practice with code rather than just reading PDFs or resources. You can refer the same 👇 whenever you are stuck as you will have clear picture of your mistake.

PDFs

Blogs

Video Tutorials

Readings

Creating and deploying static pages

Tools for deploying

Deploy a static website om heroku

Mentions

  • Billie Thompson - Provided README Template - PurpleBooth
  • Michael Sprague -repository for udacity free courses - mikesprague

Acknowledgements

Created by The Unpretentious Web

Raw
blog.md
Raw
faqs.md

FAQs

Find List of Questions here.

Skills to become full stack developer

Could you please list the skills one should acquire in an ordered manner to become a Full stack Web developer! As one gets confused what next he must learn? (asked by adit)

  • There is no one long list that covers the skill to become a full stack developer and fit in the industry. My advice is to choose a particular track. To get started about HTML, is a structure and foundation for any website consists of UI semantics, mark-up tags. Secondly, styling, the presentation, The CSS, adds style to the structure. And Javascript for functionality and then we learn backend and database. To start learning php is prefered to learn traditionally to understand the working. Then you can go for Node.js, which uses javascript scope and enviroment to render a website using routing, navigation etc and 10x faster than php. Learn a structure markup language like HTML, know to style with CSS, and scripting langugage like JS would be a great start. Don't get overwhelmed by looking at list before a good start. People use stacks in the industry

  • MEAN ( MongoDB, Express.js, Angular, Node.js ) - currently running

  • MERN ( MongoDB, Express.js, React, Node.js ) - most demanding

  • PEAN (Postgres, Express.js, Angular, Node.js ) - Postgres uses sql but replaces mysql )

  • LAMP ( Linux, Apache, MySQL, Php ) - traditional (suggested for a complete beginner to learn, but later adapt other stacks) ( by Precious Adeyinka )

  • Adit, thanks for asking. First of all to become an experienced full stack developer it takes years. As frameworks get updated so fast, you need to have complete grip on JavaScript first, because it rules web.

    • The basics: html/ css/ javascript
    • Tools: npm
    • Backend: node, express, php
    • Database: MongoDB/ SQL
    • Frameworks: Bootstrap, jQuery, SASS/SCSS, React, Redux.

Most of the emerging student developer rush to learn frameworks to sustain in developer market. But if u want long-term productivity and sustainability you have to be a traditional developer first. In coming days, typescript gonna emerge in the market as it is acquired by Google. Note that I have mentioned this just to start and explore as full stack developer. Rest of the things you will understand when you go through. ( by Joshua Poddoku )

Project ideas

Project ideas for js developers? (asked by keshav)

  • Web development project ideas ( answered by Praveen Kumar)
  • List of ideas: ( answered by preeti)
    • Quiz web app, sticky notes/ to-do list, url shortener, audio/ video player, blogging site, calculator, data scraper, simple games like sudoku/ tic-tac-toe, simple chat bot. (beginner to expert)
  • As a beginner, you will focus on learning skills. So to be productive enough, focus on real world problems and try to solve. Even a small try is valuable. ( by Joshua Poddoku )
    • Eg: To combat spam message and to stop spread of irrelevant messages through various social media, you can just begin with an awareness front end website, then you can build reporting system, and then a bot which can detect and notify the user and so on... You have to keep thinking continuously and find new ways! But don't think too much if you get confused. Start simple and new and explore.

Improve in Javascript

What would you suggest to have a better logic dev in js and also to have a advanced js dev feeling? (asked by Shivam)

  • More and more practice. platforms like freecodecamp.org javascript.info codecademy.com would help. Take good courses to become and advances javascript developer refer Resources

Why only javascript

When one goes to learn javascript, he goes the same way as he has gone through c, c++, java etc, that is learning the syntax and implementing it in small problems. However javascript is a complety different world because i have heard and read from many javascript developers that when you think you have learnt javascript, you are wrong and vice versa. So how should one initiate /approch for that level of javascript understanding that is required in this competitive world?

Raw
resources.md

Grab resources here!

UPDATED BEST COURSES FROM GITHUB STUDENT DEV PACK! 🚀

THE UNPRETENTIOUS WEB OFFICIAL DRIVE LINK!!

Special credits to our friend Praveen Kumar for sponsoring the Modern javascript eBooks and helping our community!

Best courses from Github Student developer pack

  • Havent claimed your pack yet? get it here

  • Flatiron School

    • Course Content: Ruby, HTML, CSS, Object oreintation, Object Relational Mapping and SQL, Rack (server for ruby apps), Sinatara (build dynamic web apps), Rails, Javascript, React, Node.
    • Time: 1 month
    • Type: Bootcamp
    • Community Support

  • Thinkful

    • Content: Unit 1 - HTML, CSS, and version control (git) Unit 2 - Programming in JavaScript Unit 3 - Creating web apps with jQuery
    • Time: 1 month
    • Type: Course
    • Mentor, QnA sessions.

  • Educative.io

    • Available Tracks : React for developers, Front-end Developer, Python for Programmers, Java for Programmers, C++/python coding interview, Vue/TypeScript for Front-end, DevOps, System Design, ML.
    • Courses/Skills : Flutter, WebDev, Typescript (TS), Javascript, React, TS with React, Modern Apps with Java, Serverless apps with AWS lambda, C++, Python Data Analysis and Visualization, Kotlin, Blockchain, Python for scientists, Flask, Database design, Scala, MongoDB, Kubernetes, Pearl, R, Firebase, PHP, Datastructures, and more!
    • Duration: 6 months (own-pace)
    • Type: E-learning, courses

  • One Month

    • One Month's online coding courses teach you exactly what you need to learn to code quickly. Learn Python, HTML, JavaScript and more in just 30 days.
    • Duration: One month
    • Type: Bootcamp
    • Certification, Mentor support.

Books

Course videos

Links

COLT STEELE COURSE FOR FREE FROM MARCH 23!

(shared by Keren Kalifa)

(also refer main gist page )

Raw
tips.md

Tips 🔧

Tip 1: Simple start

  • Sometimes we search simple to complex things on stackoverflow/ stackexchange/ CSStricks and more. If we simply save as bookmark and help your friends. It also benefits you by gaining confidence and It will be there right in your head. ✌️

Tip 2: How to remember syntax in an easy way

  • Example:
    • To render an element to the DOM, we use the following syntax 
      ReactDOM.render(<item to be rendered>, <where to be rendered>);
      Here <item to be rendered> and <where to be rendered> are actions that would help you instead of something else there.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment