Another Web Development Blog – the Why
An introduction to a new series of blog posts about web development basics.
Introduction
A couple of years ago, I started teaching web design and programming basics at "Fachhochschule Hagenberg" (University of Applied Sciences in Hagenberg). In parallel, I started to create blog posts based on the content of my lessons. It took me longer than initially expected, but I did it. 🎉
Here is a tutorial about creating a small website, starting from an empty file with no prior knowledge required. I cover HTML and CSS basics and some advanced features, I show you how to use your browser’s developer tools for implementation and debugging, I give you insights about accessibility, design basics and user experience in general and add a lot of links to other, more detailed resources in case you want to dig deeper.
Articles
Tutorial: Let’s Get Started With Web Development
In the first part of my web development basics article series I’ll focus on HTML and how to create your first small webpage.
Tutorial: Building a Small Website – First Steps
Like my previous post, this one is again about HTML. Together we will build a setup for a small website containing a homepage, an about me page, and a contact page.
Tutorial: Creating an Accessible Contact Form in HTML
Almost every website contains at least one form. Today we learn how to build forms with HTML that are accessible and easy to understand and use.
Tutorial: An Introduction to the Awesome World of CSS
This is part four of my web development tutorial series and this one is an introduction to CSS and how to integrate some basic styles to our tiny website.
Tutorial: CSS Selectors and Their Specificity
Understanding different CSS selectors and possible combinations is a foundation of writing good CSS code. Basic knowledge about the specificity of CSS selectors will help you to create maintainable CSS code right from the beginning.
Tutorial: The CSS Box Model & Layout Basics
What is the CSS box model and how to transform a hand-drawn wireframe into a webpage layout? These are only two questions I am going to answer in this article.
Tutorial: Building Responsive Websites
Websites are responsive by default. They adapt perfectly to every screen size—without any help from CSS. The goal of this article is to learn the basics about modern CSS features you need to build advanced responsive layouts.
Tutorial: A Responsive Form Layout with CSS Grid
CSS grid is a powerful layout algorithm that enables us to build great designs. In this part of the tutorial series we use it to create a responsive layout for a small contact form.
Tutorial: Responsive Images With HTML
HTML offers a bunch of great features to include images on your website that perfectly fit your responsive design and to improve their performance. Let’s explore them together in this article.
Tutorial: Creating a Dark Theme using CSS Custom Properties
Custom properties are a great addition to CSS. In this article I give you a short introduction how they can be used to build a dark theme for our small tutorial website.
Tutorial: Four CSS Layout Modes and Their Use Cases
In times when it feels that everything is built using powerful CSS layout algorithms like flexbox or grid, I’d like to have a look at some other layout modes still required to build great designs.
Tutorial: Why Users (Don’t) Like Your Website
Everything is about user experience (UX). Whether your users like the websites and web apps you build or not, depends on the experience they have while using it. In this article we will cover some UX fundamentals.
Tutorial: Web Development Basics—Wrapping Up
This is the very last post of the web development basics tutorial covering code refactoring and little design improvements. In the end, I am going to share a list of great resources and must-reads about HTML and CSS.
I’d love to hear your feedback!
Did you like the tutorial? Contact me via the contact form on our website or reach out to me on Mastodon (@lara_amalia)!