DEV Community: Kwadwo Nyarko

HOW TO FIX NPM ERROR IN REACT

Kwadwo Nyarko — Tue, 15 Aug 2023 21:42:54 +0000

In this article, we will learn how to fix the “npm error” in React. This error normally occurs because of the following:

Different folder paths
Some files might be missing
Importing files from outdated packages

Fixing the Error

Fixing this errors can be tedious at times, the following are some ways we can use to solve these errors.

Removing node modules:
Installing React -script
Creating a .env file
Changing folder paths

1. Removing node modules: Node modules might not have been installed properly, you can delete the node module application file and re-install it.

Once deleted, re-install it by running “npm install” in the terminal. This will install the latest packages

2.React-script: React-script might be missing in the package, run “npm install react-script”.After installation, run “npm-start“ in the terminal.

3. Creating .env file: Another solution to this is creating an environment variable, create “.env “ file, set SKIP_PREFLIGHT_CHECK = true.

Run “npm start” in the terminal.

4.Changing folder paths: The path might also be another reason why you might be experiencing errors. Change the path of the folders and run “npm start” in the terminal.

Conclusion
The above solutions should solve the issues with the “npm error in react”. Hope this helped. Thank you for reading.

CSS FRAMEWORKS

Kwadwo Nyarko — Wed, 26 Jul 2023 18:25:26 +0000

In this article, we will learn about CSS Frameworks. What they are, the need to learn them and why to use them, and some frameworks available on the market.

Table of content:

What are CSS Frameworks?
Why Use CSS Frameworks?
Examples of CSS Frameworks

What are CSS Frameworks?
CSS Frameworks are libraries that allow programmers to write and break down complex codes into simpler units. Software developers can write simple and easy codes which makes developers work more easier.CSS Frameworks make web design more responsive since most come with in-built libraries.

Why use CSS Frameworks?
Starting projects from beginning to end can become tiresome. Frameworks come in to make one's work easier. The following are some reasons to use CSS Frameworks.

Saves Time
One advantage why developers need to use CSS Frameworks is because of its simplicity and ability to save time while working on multiple projects at a time with just pure CSS. This can become hectic at times and that’s when CSS Frameworks comes in to help offload the time used in building projects.

Reduces the number of codes
With ready-to-use CSS libaries.CSS Frameworks help developers to reduce the number of written lines of code. Rather than writing thousands of lines of code, CSS frameworks are written in the HTML with fewer code lines without leaving the HTML.

Responsive Design
Responsive design is about creating web pages that fully fits and looks good on all devices thus on desktop, laptops, tablets, or mobile phones.CSS frameworks does a great job when it comes to building user-friendly apps and websites. It comes with in-built properties such as flexboxes and grid which helps in building apps and sites

Examples of CSS Frameworks

There are tons of CSS Frameworks to choose from. The following are some CSS Frameworks.

TALWINDCSS

Tailwindcss is a utility-first-class framework for rapidly building modern websites without ever leaving your HTML. Its free, open-source utilities first CSS Framework. It was initially created by Adam Wathan and had its first version released on 1st November 2017.

BOOTSTRAP

Bootstrap is one of the oldest and most popular CSS Frameworks. Built by Mark Otto(Designer) and Jacob Thornton(Developer) at Twitter in mid-2010. It has become widely used by most developers. It is an open-source framework and was known as Twitter Blueprint.

BULMA

Bulma is an open-source framework that is based on Flexbox. First released in 2016, this framework is one of the most popular frameworks. This is also an open-source code that helps you save time in building responsive sites and apps.

FOUNDATION

This is a free open-source and responsive front-end framework created by ZURB in September 2011, this CSS framework is one of the best in creating responsive apps, and it is good for beginners and user-friendly to learn. In 2008 it was as an internal style guide. It emerged as a ZURB project to develop front-end code more efficiently.

SEMANTIC UI

Semantic UI is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Created by Jack Lukic, it was first released in November 2014. It integrates CSS and jQuery to build an interface just like Bootstrap. It's easy to learn and unpacks a variety of themes and CSS and JavaScript files.

CONCLUSION
And that’s it for CSS Frameworks. Take your time to look through and learn the one that favors you.CSS Frameworks can be of great help in building faster and user-friendly interfaces for your apps and websites.

A Guide On How To Become A Front-End Developer

Kwadwo Nyarko — Sun, 09 Jul 2023 23:25:29 +0000

In this guide we will learn what front-end development is, the skills needed, and how to get into front-end development.

What is frontend development?
Frontend development is an aspect of software engineering that mostly deals with the user interface. Most frontend developers learn HTML, CSS, and Javascript, the three most important tools used in making websites, others might also learn frameworks such as tailwindcss, react js, angular bootstrap, and so on. Frontend developers also use tools such as Git and GitHub. Git is a version control system that works hand in hand with Github which is a hosting server site for managing and storing codes.
In this how-to guide, we will learn what these tools are and where to learn them.
What skills do front-end developers need?
Front-end developers are much needed in our world today. The basic skills needed are as follows:
HTML(Hypertext Markup Language): This can be said as the basics of all websites. It is the building block of all websites which can perfectly be known as the skeleton of the sites. It deals with written words, their positions, etc.
CSS(Cascading Stylesheet):
This is used to style up the website, it can be the background color of the site, the color of texts, images, font style, sizes, etc. It's used in making websites more beautiful. It's more like putting a skin/body on a skeleton.
JavaScript: Javascript simply makes websites more interactive, it adds more functionality to sites. Deals with how sites behave such as the user clicking on a like button etc.

Steps of becoming a frontend developer

Step 1: Planning
Make a plan on how you want to get into front-end development, it can be by taking a course online, joining a boot camp, or going to a university to get a diploma or degree certificate. Online courses have become popular over the years and the following are some online courses to learn from are as follows:

FreeCodeCamp
Codecademy
Web3
Microverse

You can also self-learn this from youtube channels. Recommended ones are:
Simplilearn

Super simple
FreeCodeCamp
CodewithMosh

Step 2: Build Projects
Practice makes perfect. You can build projects to gain experience. These sites are my favorite for gaining experience in web development.

Codewars
Hackerank

Step 3: Build Your Portfolio
Begin to build your portfolio by working on your favorite. Work on what you love the most, it could be working on your favorite project such as a restaurant site, movie site, to-do list, weather app, etc.

Step 4: Apply for jobs/internships
You can apply for jobs or internships to gain much more experience on the job. Make sure you go through some coding challenges. I will recommend Leetcode interview challenges.

Hope this guide helped you to become the front-end developer you've dreamt of.