CodeCraftDevs | Learn Web Development

BEGINNER WEB DEVELOPMENT

Welcome to CodeCraftDevs

A simple guide to learning how websites work. Explore HTML, CSS, web design, and some of the projects I created while learning web development.

Start Learning

index.html 

<h1>Hello World!</h1>

<p>
  My first website.
</p>

ABOUT

What is CodeCraftDevs?

CodeCraftDevs is a website I created to explain some of the basic ideas behind web development.

When I started learning HTML and CSS, I found that the easiest way to understand them was by actually creating websites. This site shares some of those concepts in a simple way.

Who is this site for?

  • Beginners interested in coding
  • Students learning HTML and CSS
  • Anyone interested in how websites work
Laptop displaying web development code
Web development combines coding, design, and problem solving.

LEARN

The basics of web development

Most websites start with HTML and CSS. They work together, but they have different jobs.

HTML

HTML

HTML stands for HyperText Markup Language. It creates the structure and content of a webpage.

HTML can create:

  • Headings
  • Paragraphs
  • Links
  • Images
  • Lists
  • Tables
  • Forms
CSS

CSS

CSS stands for Cascading Style Sheets. It controls how the HTML content looks.

CSS can control:

  • Colors
  • Fonts
  • Spacing
  • Borders
  • Page layouts
  • Responsive design
UX

Web Design

A website also needs to be easy for visitors to understand and use.

Good websites should be:

  • Easy to navigate
  • Readable
  • Accessible
  • Mobile friendly
  • Visually consistent

HTML vs. CSS

A quick comparison of HTML and CSS
Feature HTML CSS
Main Purpose Page structure Page appearance
Example <h1> color: blue;
Controls Content Design
File Type .html .css

HTML5 MEDIA

Websites can include media

HTML5 allows developers to place video and audio directly inside webpages.

The video element below uses the controls attribute, which allows users to play, pause, adjust volume, and move through the video.

PROJECTS

Things I practiced

These examples represent some of the web-development skills I practiced.

Computer monitor displaying programming code

Basic HTML Page

A webpage using headings, paragraphs, links, images, and lists.

Computer dashboard containing charts and information

Tables & Information

A project practicing tables, rows, columns, captions, and CSS formatting.

Web designer working on an interface

Forms & Design

A project practicing forms, input fields, buttons, and responsive layouts.

MY PROCESS

How I create a website

  1. Plan

    Decide what the website is about.

  2. Write HTML

    Create the structure and content.

  3. Add CSS

    Style the colors, layout and text.

  4. Test

    Check links, forms and different browsers.

CONTACT

Send some feedback

Have a suggestion for CodeCraftDevs? Use this example form to share your thoughts.

This form is for demonstration purposes and does not send information to a server.

Was this website helpful?
What did you like?