Forem: Hamza Nouali

How to build a landing page quickly by copy-paste as a developer

Hamza Nouali — Sat, 02 Jan 2021 17:35:56 +0000

In this article, I’ll show you how you can build a landing page for your product or startup quickly by copy-paste in 1 or 2 hours and without using page builders or having to hire someone.

Important
Before we start, you need to know that this method requires having a basic knowledge of HTML & CSS (just basic knowledge, not an expert).

First, open your code editor like Sublime, Dreamweaver, VSCode, etc, and create two files: index.html and app.css.

Next, go to frontendor.com/preview where you can preview more than 100+ reusable HTML blocks.

From there, go to the developer guide, copy the starter HTML code, and paste it to your index file. Then, copy the starter CSS and paste it to the app.css file.

🤘 Now, we are ready to start using these blocks.

Just click on copy HTML and paste it in the body of your HTML code, then copy CSS the same way and paste it to your app.css file.

Now if you open the index.html file with Chrome, you’ll see your web page.

Keep copying and pasting blocks the same way until you finish all the necessary sections.

Finally, we’ll start customizing colors and backgrounds.
Go to the beginning of your app.css file, and you’ll find CSS variables to change your colors according to your needs. If you need to learn more about CSS variables, just type on Youtube CSS variables and you’ll find free tutorials there.

Editing your text is easy, just search for what you want and edit freely. The same thing applies to links and buttons.
Once you are finished with your needs, you can drag and drop it to Netlify.

😎 That’s all, you have successfully built and deployed a landing page.

If you notice any issues in Frontendor, you can check out our developer guide, watch our tutorials, or contact us through the live chat. You can also find us on Twitter.

Don’t forget to visit frontendor.com for more info.

CSS - Making child element responsive for its parent.

Hamza Nouali — Sat, 14 Mar 2020 21:21:17 +0000

Hello everyone, I want to know if there is a way without JavaScript to make the children elements responsive corresponding to the parent element and not the window.

Dark Mode vs Light Mode with Tailwind CSS only.

Hamza Nouali — Sat, 28 Dec 2019 10:00:05 +0000

Hi everyone, I built these components using Tailwind CSS framework only, I put the source code here for anyone interested.

Live Demo: click here
Source Code on Github: click here
Follow Me: click here

I am thinking about writing articles here or making videos on YouTube about building Front-End using Tailwind CSS only, what do you think? does it worth?

Master Unit Testing Vue.js (Very Simple).

Hamza Nouali — Thu, 31 Oct 2019 14:28:02 +0000

How much time have you spent trying to understand what to test in Vue.js? what is testing? How to unit test Vue.js application!

There are a lot of articles and videos out there talking about Vue.js testing with jest, mocha, etc. But many of them assume that people are already familiar with unit testing and know exactly what to test.

Table of Content

What is Unit Testing in Vue.js? Why do I need it?
What to Test in Vue.js application?
Tips
Resources to dig deeper

What is Unit Testing in Vue.js? Why do I need it?

Let's make it simple. Always when you create a new component, you are going to test it manually:

import that component to your code.
you open your browser and start asserting that all features are working.

Quick Example:

You've created a ProductViewer component, this component receives the product details to show it in an HTML card.

Your Component Receives:

product name.
product link on Amazon.
product image.

Your Component Outputs:

HTML card that shows the product name, image and when you click on it, it redirects you to the product's page on Amazon.

Your manual test is like this:

you import this component to your Vue app.
you open your browser to assert that the HTML card is working, the name and image are rendered correctly and when you click on this card it redirects you to the correct link.

This test is essential, but fragile!

Imagine that your component is working 100% well. one day, you want to add more product details or any kind of feature, you write, update or remove existing code. you go to your browser to check that everything is working but you forgot to click on the card.
After a while, some users tells you that clicking on the product is not working! you are not redirecting any users! you are wasting money!

Actually, you are able to avoid this mistake by unit testing your code, let me show you.

Unit Testing in Practice

Before we start testing, you have to know:

What to test?

In Vue.js particularly, don't test logic, don't test methods, functions, watchers ,etc (even filters, don't test it).
Just look at your component from the sky and treat it as a factory that receives inputs to return outputs.

Big NOTE:

Don't test code that you didn't write!, don't test something other people have already tested it.
Example: don't test v-model, don't try to assert that clicking on <a href="google.com"></a> will redirect you to google.com, etc.
Now, let's get back to our subject.

Take a look at ProductViewer component.

Take a look at its code:

What inputs do we have?

name and link
slot

What output should be tested?

We must assert that the name of the product exists and equals to our props name.
We must assert that the image exists and contains the same src of the given slot.
we must assert that the a tag exists and contains our link in the href attribute (by using css selector like this a[href=${link}]).

Tips

Go to open-source projects and start testing, there are people will review your tests and gives you feedback.
Download open-source projects and take a look at their tests.
Read the next section down below.

Resources:

CSS - Spent 3 Days with white space !!

Hamza Nouali — Wed, 28 Aug 2019 20:17:33 +0000

Hey guys,
I am tired, I have spent 3 days just trying to fix my HTML & CSS design in order to make just one dropdown !! to work the same way in both Chrome and Firefox.
this is my first time in 4 years of web development to encounter that. I had problems before on adjusting inline elements but I was able to fix it, meanwhile I didn't know that it's related to white space.

I didn't know that the white space is a big issue and has a buggy history in CSS, I recommend you to google about it because if you don't encounter this, then you are not going to know that exist.

This is the Design I have been working on:
(The issue is about the dropdowns which are floated to right)
https://drive.google.com/file/d/1c01pTVUWW_yFA_-L4mC2BYGYFZdqFhJR/view?usp=sharing

Read this, it's helpful:
1- https://css-tricks.com/fighting-the-space-between-inline-block-elements/
2- https://patrickbrosset.com/articles/2016-10-21-when-does-white-space-matter-in-HTML.html

Edit:

I forget to say that I didn't fix it yet, I am about to try some solutions and post it here. if you think you have a solution rather than

white-space: nowrap;

post it here, I will be thankful ^_^.