HTML and CSS on Duomly blog

15 CSS tips and tricks which help you to create an amazing websites

Mon, 26 Apr 2021 00:00:29 +0000

CSS is Cascading Style Sheets and is used to describe how HTML elements should display. It’s one of the first technology learned by soon to be front-end and web developers, and it’s an absolute have to know basic.

Although it seems CSS can’t do a lot besides giving our HTML colors, positions, etc., but it can also let us create animations and bring some life to our apps and websites. Probably now many of us take care of mastering CSS and learning it so deeply, but it’s totally worth to know some useful tips and tricks which may help you to create stunning websites!

How to build company website with Bulma CSS

Mon, 24 Aug 2020 06:42:26 +0000

Intro to how to build company website with Bulma CSS

Today you will learn how to build company website with Bulma CSS.

In the previous episodes, you’ve learned how to build a website with Bootstrap 5: https://www.blog.duomly.com/how-to-crate-simple-web-page-using-bootstrap-5/

And, you’ve learned how to build admin template with Bootstrap 5: https://www.blog.duomly.com/how-to-build-bootstrap-admin-template-tutorial/

Now, it is the time for something the same fantastic, and maybe even sweeter for the UI.

Bulma CSS framework is a very popular, great to use, and a beautiful CSS framework that you can use to build great UI.

How to build Bootstrap admin template tutorial

Mon, 10 Aug 2020 06:42:26 +0000

Into to building a Bootstrap admin template

Last week I published an article about Bootstrap 5, where we showed you how to build a simple portfolio web page, and it seems like a lot of you really like it.

That’s why today I decided to prepare you a new Bootstrap tutorial, where we are going to build a Bootstrap 5 admin template for the blog management application, step by step.

Also, if you’d like to build a dashboard with Bootstrap 4, remember to check out our previous tutorial here.

6 most popular front-end interview questions and answers for beginners [PART 3]

Tue, 04 Aug 2020 06:42:26 +0000

Intro to Front-end interview questions for beginners PART 3

Today we’ll talk about the CSS interview questions for beginners.

Welcome to the next part of the front-end questions series.

All of the episodes in our series are related to the most popular things that developers ask about the technology, which are often used in job tech interviews.

In the previous episodes, we talked about javascript and React.js more general, and you can find the URLs to those episodes here:

How to create a simple web page using Bootstrap 5

Mon, 03 Aug 2020 06:42:26 +0000

Create a simple web page using Bootstrap

A few weeks ago, Bootstrap 5 alpha version appeared on the market, and that’s why today I’d like to go through what’s new and create a simple web page using Bootstrap 5.

In April, we’ve published the article and video about Bootstrap 4 where we are showing you step by step how to build a simple dashboard, so if you missed that episode and article, go ahead and check it here:

8 amazing HTML button hover effects, that you should try in your website

Mon, 27 Jul 2020 06:42:26 +0000

Intro to HTML button hover effects

Buttons are essential HTML elements often used on every page, web application, or mobile application.

HTML button is quite an essential element in the layout because, in a lot of cases, it’s the element that has to be noticed by the user as a call to action and convince to click on it.

Front-end developers and designers often try to highlight buttons in any nice way, especially when users interact with them, for example, on hover or focus.

Angular Course with building a banking application with Tailwind CSS – Lesson 4: User registration

Wed, 10 Jun 2020 15:18:11 +0000

For almost three weeks, we are creating an Angular 9 fintech application together, step by step.

We’ve already gone through the setting the project and creating a login form template, then we’ve created the logic for our login form, and last week we displayed user data in the template.

Today, it’s time for lesson 4, where we will handle user registration.

If you didn’t start with me, feel free to go through all the lessons until now. Or you can get the code from the previous lesson and jump straight to this lesson. Here’s a link to our Github repository for this Angular Course.

Angular Course with building a banking application with Tailwind CSS – Lesson 3: User account balance

Mon, 01 Jun 2020 19:18:15 +0000

The previous week we’ve published the second lesson of our Angular Course with Tailwind CSS, where we are building a banking app step by step.

In the first lesson, we’ve created a project using Angular CLI, installed Tailwind CSS, and started building the first component UI, the login form. If you didn’t start with us in lesson one, feel free to go back and start from scratch or just get the code from our Github.

HTML project ideas for beginners

Thu, 28 May 2020 13:15:50 +0000

This article contains affiliate links. By purchasing using these links you support our blog and YouTube channel.

In this article, I’m going to give you 11 HTML project ideas for beginners.

Creating your coding, front-end portfolio can be challenging, especially if you are a newbie and don’t have a lot of ideas.

You probably wonder what kind of smaller or bigger projects you can create to impress your future employer and quickly get a job.

React Hooks Tutorial with Examples

Thu, 14 May 2020 15:54:26 +0000

Usually, most of the front-end frameworks updates don’t bring huge changes, but it was different in February 2019, when Facebook released 16.8 version of React.js.

They introduced Hooks API, a functionality which, in my opinion, makes things easier because it allows using of functional components a similar way as we used class components until that time.

As in the beginning, Hooks API was just used by some curious developers to check what’s inside, today it’s officially recommended to use it.

How to use Fluent UI – building a fintech dashboard tutorial

Tue, 12 May 2020 18:34:51 +0000

A few days ago while checking tech news I found a UI framework I’ve never heard about, Fluent UI by Microsoft. Driven by curiosity I decided to take a quick look at the new discovery and check out how it looks like and how it works.

On the Microsoft website, I found out that with Fluent UI I can create React.js web apps, apps for Windows, iOS, and Android. As a front-end developer, I decided to turn my full interest in web apps and that led me to the point where I saw how many beautiful, clean, components does it offer.

CSS background image tutorial with examples

Fri, 08 May 2020 15:36:43 +0000

The background image is probably one of the CSS properties which all of us, front-end developers, used at least a few times in our careers. Most people think that there can’t be anything unusual about background-image, but after a quick research, I have a different conclusion.

There are lots of questions askes about CSS background image every day in Facebook groups and lots of unknown tricks which can help us to achieve amazing effects and make stunning apps and websites.

How to use animate css tutorial with examples

Thu, 07 May 2020 08:48:36 +0000

In this article, I’d like to show you how to use animate.css library.

A few years ago, I was working on a mobile app project where the user interface was pretty advanced, loaded with lots of movement and gradients. It was just like each of those modern mobile apps, which would like to provide the best visual experience to users.

It took me lots of time to create all the animations in CSS and make them smooth and good looking according to designer instructions. Then, I started to look for some solution that will make this task more comfortable and will give me the required result without any surprises.

CSS border with examples tutorial

Wed, 06 May 2020 15:09:31 +0000

Introduction to CSS border

Hi guys, today we will talk about… BORDERS!

The CSS border is something that you will most probably use almost every day, if you’re front-end developer, of course.

I’ve found a few useful (some more, some less, some just funny) tips and tricks that you can use in your project.

Let’s start!

If you prefer video here is the youtube version.

1. Animated CSS border

What to do when we would like to make our item more visible?

How to build an HTML table tutorial

Tue, 05 May 2020 08:04:21 +0000

When you are building a project which has some data to present, you need a good way to show the information easily and understandably. Depending on the type of data, you can select between different HTML elements.

In many cases, the table is the most convenient method to display large amounts of structured data nicely. That’s why in this article, I’d like to explain to you the structure of the table, show you how to create one, and give you a little advice when it’s a good idea to present your data as a table.

How to build dashboard with Bootstrap tutorial

Sat, 22 Feb 2020 08:00:19 +0000

Would you like to create websites from a ready element? Bootstrap is one of the most popular CSS frameworks. It allows us to build a beautiful UI from ready components, like navbars or forms. Bootstrap also provides a responsive design so, while using the grid properly, you don’t have to do additional styling for mobile views.

For advanced developers, CSS frameworks seem to be simple because it’s mostly about reading the documentation, but beginners sometimes may have issues building projects from Bootstrap components. That’s why I decided to create this tutorial and build a simple dashboard, with step by step explanation.

CSS Animations Cheatsheet

Thu, 23 Jan 2020 08:00:01 +0000

Since we can create animations in CSS, building a stunning website with smooth transitions and nicely moving elements should not be difficult. It’s a great chance to add some amazing effects to the design of your website and make it remembered by the clients or recruiters. It’s always a great option to stand out from the crowd of other developers’ portfolios.

You don’t have to rebuild half of your website; sometimes, it’s enough to add one or two effects to make the design more vivid and exciting. But remember to find a sweet spot to avoid creating a little, slow monster from your website.

React vs Angular vs Vue

Thu, 16 Jan 2020 08:00:24 +0000

Since a few years, the popularity of different front-end frameworks grew significantly. That’s why those days probably lots of us can’t image front-end development without using one. While starting a new project, we have to decide which framework to choose to make development fast and easy and to have a great final result.

Since Google developers released Angular, and Facebook programmers created React.js, developers started to discuss which one is better. When the front-end community divided into Angular and React supporters, the new serious player appeared on the market. In 2018 Vue.js became a significant competition to its older brothers.

CSS frameworks

Fri, 13 Dec 2019 17:12:57 +0000

As a front-end programmer, I talk a lot about front-end frameworks, but I very often forget about how important are CSS frameworks and how much time they can save.

When building the UI, we need a consistent and effective CSS, which can be a hard challenge to achieve. And that’s the reason why many front-end developers are looking for a solution in one of the popular CSS frameworks, like Bootstrap.

Vue.js tutorial: How to create Vue.js app in 5 minutes?

Tue, 12 Nov 2019 13:15:48 +0000

Vue.js is getting more and more popular, becoming a meaning competitor to frameworks like Angular or React.js. As a beginner-friendly front-end framework, it successfully conquers the hearts of junior front-end developers and people who just started to learn front-end programming.

So, as a person who started to learn front-end, you probably would like to practice your knowledge and write a simple app using your new skills. That’s why in this article, I want to show you how to build a simple Vue.js app with Bootstrap and REST API in 5 minutes, similar to how I did with the React.js app in one of the previous articles.

8 CSS image filters with code examples

Thu, 07 Nov 2019 11:04:49 +0000

Using images, we can create an atmosphere, arouse happiness, smile, sadness, or any different emotion. With images, we can show a lot, and tell a lot as well; that’s why pictures are so widely used in the websites and applications.

Designers take care of how users will feel the website and what kind of emotions it will bring. Graphic designers can use advanced software to edit photos and add them filters, masks, or other effects that decide about the final look.

CSS Grid tutorial

Tue, 05 Nov 2019 10:58:26 +0000

When we build front-end, always we need to create a structure of our page, and very often, we need to create any grid. We can position elements in a few ways. For example, in the previous article, I showed you how we could do it via flexbox.

So, today, I would like to show you one more tool which I want to use, named CSS Grid. Let’s see the most popular (and most often used by me) methods which can save a lot of our time.

Flexbox cheatsheet – 12 tips and tricks every web developer should know

Fri, 01 Nov 2019 14:17:43 +0000

Probably almost everybody in the front-end industry heard something about the flexbox and benefits which it can give to us when we need to design a grid. In this article, I would like to explain what flexbox is and how we can use it to save a lot of our time.

Flexbox is a CSS layout module that allows us to setup nice-behaving and responsive grid in a speedy and friendly way. Let’s see a few most critical elements of flexbox which we can use in our daily work.