Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jhwa426/bootcamp-web_development

Become a Full-Stack Web Developer with HTML, CSS, Javascript, Node, React, MongoDB, Web3 and DApps.
https://github.com/jhwa426/bootcamp-web_development

api-rest bootstrap css3 databases express-js git html5 javascipt jquery mongodb mongoose node-js react-js shell-script sql

Last synced: 17 days ago
JSON representation

Become a Full-Stack Web Developer with HTML, CSS, Javascript, Node, React, MongoDB, Web3 and DApps.

Awesome Lists containing this project

README

        

## The Complete 2023 Web Development Bootcamp


Completed an intensive Full-stack Web Development course, gaining proficiency in HTML/CSS/JavaScript/jQuery, NodeJS/ExpressJS, MongoDB, and ReactJS, and successfully built 16 web development projects

## Technical Skills 💻

[![HTML5](https://img.shields.io/badge/-HTML5-F05032?style=for-the-badge&logo=html5&logoColor=ffffff)](https://html.com/)
[![CSS3](https://img.shields.io/badge/-CSS3-007ACC?style=for-the-badge&logo=css3)](https://www.free-css.com/)
[![Bootstrap](https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white)](https://getbootstrap.com/)
[![JavaScript](https://img.shields.io/badge/-JavaScript-%23F7DF1C?style=for-the-badge&logo=javascript&logoColor=000000&labelColor=%23F7DF1C&color=%23FFCE5A)](https://www.javascript.com/)
[![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white)](https://jquery.com/)
[![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://reactjs.org/)

[![Node.js](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)](https://nodejs.org/)
[![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB)](http://expressjs.com/)
[![MongoDB](https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white)](https://www.mongodb.com/)
[![Shell Script](https://img.shields.io/badge/Shell_Script-121011?style=for-the-badge&logo=gnu-bash&logoColor=white)](https://www.shellscript.sh/)


## [Course resourses](https://www.appbrewery.co/p/web-development-course-resources/)

- Course details

What you'll learn :

- Build 16 web development projects for your portfolio, ready to apply for junior developer jobs.
- After the course you will be able to build ANY website you want.
- Work as a freelance web developer.
- Master backend development with Node
- Learn the latest technologies, including Javascript, React, Node and even Web3 development.
- Build fully-fledged websites and web apps for your startup or business.
- Master frontend development with React
- Learn professional developer best practices.
- 65 hours on-demand video
- 49 downloadable resources
- 86 articles
- 14 coding exercise projects


Course includes :

- Front-End Web Development
- HTML 5
- CSS 3
- Bootstrap 4
- Javascript ES6
- DOM Manipulation
- jQuery
- Bash Command Line
- Git, GitHub and Version Control
- Backend Web Development
- Node.js
- NPM
- Express.js
- EJS
- REST
- APIs
- Databases
- SQL
- MongoDB
- Mongoose
- Authentication
- Firebase
- React.js
- React Hooks
- Web Design
- Deployment with GitHub Pages, Heroku and MongoDB Atlas
- Web3 Development on the Internet Computer
- Blockchain technology
- Token contract development
- NFT minting, buying and selling logic


## [Section 01:](https://github.com/jhwa426/Bootcamp-Web_Development/tree/main/Section%2001%20-%20Front-End%20Web%20Development)

Front-End Web Development

### 1.1. How Does the Internet Actually Work?
- **Internet** is a long piece of wire, And that wire connects different computers to each other. It allows computers to transfer data through this giant wire
- A server is a computer that provides files and data to other computers, it allows access 24/7.
- A client is a computer that any user is used to access the internet.
- When the browser request a website, the request is sent to **ISP** (Internet server provider: The company we pay for internet service) then it searches at DNS that contains the web site's IP addresses. Once the DNS finds the IP address it sends it back to the browser vis ISP. Then the browser sends a direct request through ISP and this message will be delivered via Internet Backbone to the server that is located at that IP address. On that server, all files are needed to view the website home page. The server sends these files back to the client through the internet backbone and the client gets to see the website in the browser. All of that happens in milliseconds.

### 1.2. How Do Websites Actually Work?

- To access the web page we need a browser (allows to look up at IP address and receives data from the server).
- Data from the server contains HTML, CSS, and js files.

### 1.3. To get started

- Need Browser (chrome recommended)
- Text Edittor(Atom, vs code)

## [Section 02:](https://github.com/jhwa426/Bootcamp-Web_Development/tree/main/Section%2002%20-%20Introduction%20to%20HTML)

Introduction to HTML

### 2.1. Introduction HTML

- HTML : Hyper Text Markup Language.
- A markup language is a computer language that uses tags to define elements within a document.
- html is the foundation of all websites.
- Tag consist of: open tag ` and closing tag `.
- Ex: Heading tag h1, h2, ….,h6 . It gets smaller when the number goes up.
- called self-closing tag.
- Ex: Spacing breack tag br.

### 2.2. The Anatomy of an HTML Tag

- < startTag > Content EndTag >
- Horizontal line tag hr accepts attribute size, noshade,..
- Attributes specify modification to the default element.
- Center content using tag `content`.
- Comments are not interpreted by the compiler `


Hello, world!


Hello, world!