Categories
web

Building your first web page with HTML and CSS

Getting the HTML elements in place Ok, let’s get writting some HTML. In the following video, I take you through writing your first HTML tags. I’ll also talk about using Codepen. Codepen is an online code editor, learning environment, and community for web development. We will be using it a lot, so sign up for an account right […]

Categories
web

The importance of including the Viewport meta tag in you HTML pages

The viewport is your user’s view of your web design. Your user’s viewport will be different depending on what kind of device they are using. It might be a small Android smartphone or an iPhone 12 pro. They might be using Firefox on a desktop computer. As responsive web designers, we design for all of […]

Categories
web

Implementing a shop with Ecwid

Ecwid is an extensive and powerful e-commerce service. Itis easy to implement and it’s free to start off.  Here is a short video from the Ecwid youtube channel on setting up a shop. How to Create an Online Store in 5 Minutes! Ecwid Tutorial » You can add custom CSS to your Ecwid shop to change fonts, […]

Categories
web

Implementing a Formspree contact form

Formspree is a form backend, API and email service for HTML forms. It is the simplest way to embed custom contact us forms, order forms, or email capture forms on your static site.  Note: Formspree offers paid plans. Make sure you don’t accidentally get charged.

Categories
web

Making buttons and navigational elements with :hover

The :hover selector is used to select elements when you mouse over them. The :hover selector can be used on all elements, not only on links. Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link. Make […]

Categories
web

Coding your website: first steps

Here is a video about getting started. I often find that I’ll have multiple attempts at getting started. I’ll often recode a project multiple times. I’ll discover a different approach, a more streamlined way to achieve something. I’ll begin again. We learn important stuff by getting started. So, there is no harm in getting started […]

Categories
web

Design and code a simple website – from go to whoa – Part 2

In part 1 of this article, we discussed the planning stages of a web design project. In this part, we will jump in and implement that planning with code. Let’s start writing some HTML. Open up a CodePen and follow along with the screencasts below. Good luck. Getting the main structure in place In this […]

Categories
web

Design and code a simple website – from go to whoa – Part 1

In this article, we are looking at the first steps to code a website with HTML and CSS. Hopefully, we can dispel some of the anxiety around getting started. As you will see, it isn’t that hard if you think through what you want to achieve.  Plan the layout The best advice I can give about […]

Categories
web

With Flexbox you can make complex HTML/CSS page layouts

Flexbox is a CSS layout module. Flexbox allows elements in a container to be responsively arranged depending on the size of the container. Flexbox gives a container the ability to alter its items dimensions in order to best fit in the available space. A container with flexbox applied can expand or shrink its child items […]

Categories
web

Downloading projects from CodePen and opening them in a code editor

Updated 25/3/2021 CodePen is fantastic for testing and experimenting with HTML and CSS. It is also great for documenting and sharing your work. At some stage though, you will want to move that work to a local environment to continue your development. By ‘local environment’, I mean your own computer. You will want to download […]