webdesign

The rise of the Gutenberg editor is in full swing, for better or worse. Gutenberg was introduced by Matt Mullenweg at WordCamp Europe in 2017. The editor was created to simplify website layouts, while attempting to make the task more user-friendly. While Gutenberg was originally a plugin, in December 2018, the editor was merged into WordPress Core with version 5.0. There is no doubt that Gutenberg is most likely being pushed to compete with page builder services such as Wix and Squarespace....

Hello! This guide is meant to be a tiny introduction to the markup language, HTML. HTML stands for Hypertext Markup Language. This is the language the defines the structure of the websites you visit. Before we begin writing our own HTML page, create a folder wherever you wish to store the web page. Feel free to name it anything you like. Next, create a file inside that folder and name it index....

Hello everyone! Let’s dive right into creating our own very simple dropdown menu (or any container.) We won’t be doing anything fancy with this, other than what is shown in the following preview: There should have been a video here but your browser does not seem to support it. To create this dropdown menu, create an HTML file somewhere and name it however you like. Inside this HTML file, let’s add some basic code:...

In this tutorial, you will learn how to create buttons via styling them with CSS. If you don’t have a solid foundation with HTML and CSS, I would highly recommended checking out our free Beginners Blocks courses in our store. The buttons below are what I will help you learn how to create: Let’s dive right into the code. Create a folder somewhere on your computer and name it whatever you want....

In this tutorial we will show you how to create feature boxes with HTML and CSS. Feature boxes are common on many websites and help summarize services or products a business offers, etc. The final result will look like the following: Before jumping into the code, it will be useful for you to download the images folder containing the icons shown above for our feature boxes. You can download the ZIP file with the images folder and associated icons here....

In this tutorial we will be creating a simple, modern navigation bar. It’s nothing fancy, it just works, and it looks modern. I’m deriving the basis of this tutorial from my full screen landing page tutorial. It’s not required, but feel free to clone the repository for that tutorial and that can be the basis for our purposes here. It would be helpful to know HTML and CSS, but it’s not necessarily required, though highly recommended....

Hello everyone! This will be the start of my web design tutorials. In this little tutorial, we will be creating a full screen landing page. Here’s a preview of what we’ll be making: There should have been a video here but your browser does not seem to support it. To start, let’s head over to Unsplash so we can pick out a picture we want. I really like the sunset picture you see in the preview by Samuel Zeller (available here)....