Web Development

Web development can be intimidating, but it's not as difficult as you think.
As a self-taught web developer, I share my journey of learning this new skill.The goal of this documentation is to simplify learning web development so that anyone can get started. Hope you enjoy it!

Skills

Front-end vs. back-end

Every application has both a front-end and a back-end.

The front-end is what you see on the browser, and the back-end is what handles the work behind the scenes: a database that stores everything you need, and rules, which connect the information in your database to the way you want it seen on someone's browser.

Front-end languages:
- HTML
- CSS
- Javascript
Back-end languages:
- Python
- Ruby
- PHP
Databases:
- SQL
- MySQL
- Postgres
- SQLite

Introduction

To create web pages with great design, interactivity, and maintainability, the trinity of HTML, CSS, and JavaScript provides you with a powerful toolset. Each contributor adds a precious piece to the result.

HTML

HTML describes the content of your web pages. Using the Hypertext Markup Language, you can build up the structure of the page without defining its exact visual properties, typography, and layout.

Although you can utilize the style attributes of HTML elements to express appearance, it is a good idea to avoid this technique as mixing content and style in HTML markup would definitely jeopardize the maintainability of your page’s source code.

CSS

Style is where CSS comes into the picture. With Cascading Style Sheets, you can describe the visual attributes of your page, clearly separated from its content. It not only provides you more readable and maintainable code, but also enables you to deal with the design of your web pages as a different role that can be totally disconnected from managing the content.

JavaScript

JavaScript is the secret sauce that empowers your pages with interactivity.

This dynamic programming language provides:

full control over your page, allows changing its content, responding to events, communicating with the server, and much more. In real webpages, you can use JavaScript libraries like jQuery to solve common tasks.

Roadmap

The Internet
- How does the internet work?
- What is HTTP?
- Browsers and how they work?
  - URL
  - HTML
  - HTTP
  - IP Address
  - DNS
  - Cookies
  - Domain Name
  - Hosting
HTML
- Brief History of HTML
- HTML Tag syntax
- Heading
- Paragraph
- Formating Elements
- Quotation & Citation
  - Abbreviation
  - Address
  - Cite
  - Bdo
- HTML Block & Inline Elements
  - Block elements
    - Div element
  - Inline elements
    - Span element
- HTML Form
  - The input Element
  - Text Fields
  - The label Element
  - Radio Buttons
  - Checkboxes
  - The Submit Button
  - The Name Attribute for input
- HTML Attribute
  - The href Attribute
  - The src Attribute
  - The width and height Attributes
  - The alt Attribute
  - The style Attribute
  - The Lang Attribute
  - The title Attribute
- HTML Images
  - HTML Images Syntax
- HTML Links
- HTML Tables
  - HTML Table Tags
- HTML Lists
  - Unordered HTML List
  - Ordered HTML List
  - HTML List Tags
- HTML Layout Elements and Techniques
  - HTML Layout Elements
  - HTML Layout Techniques
CSS
- CSS Syntax
- CSS Selectors
  - The CSS id Selector
  - The CSS class Selector
  - The CSS Universal Selector
  - The CSS Grouping Selector
  - All CSS Simple Selectors
- CSS Comments
- CSS Colors
  - CSS Color Names
  - CSS Background Color
  - CSS Text Color
  - CSS Border Color
  - CSS Color Values
- CSS Backgrounds
  - CSS background-color
    - Opacity / Transparency
    - Transparency using RGBA
  - CSS background-image
  - CSS background-repeat
  - CSS background-repeat: no-repeat
  - CSS background-position
  - CSS background-attachment
- CSS Borders
  - CSS Border Style
  - CSS Border Width
  - CSS Border Color
  - CSS Border - Individual Sides
  - CSS Rounded Borders
- CSS Margins
  - Margin - Individual Sides
  - The auto Value
  - The inherit Value
- CSS Padding
  - Padding - Individual Sides
- CSS Height, Width and Max-width
  - CSS height and width Values
- The CSS Box Model
- CSS positioning
  - The position Property
    - position : static
    - position : relative
    - position : fixed
    - position : fixed
    - position : sticky
    - All CSS Positioning Properties

Here are some related projects

Web Development Projects Idea

Sources

About Me

I'm s-shemmee and I'm a self-taught web developer who shares with you my journey of learning web development and web design from the ground up. I share with you tutorials, case studies, tips, and tricks to help you learn this new skill!

By @s-shemmee

s-shemmee / Web-Development