DEV Community: Sondre

Grow your portfolio with these free resources

Sondre — Wed, 17 Mar 2021 12:37:57 +0000

Photo by Lauren Mancke on Unsplash

1. DevProjects by codementor

I just recently stumbled upon DevProjects by Codementor. They have a great collection of challenges you can start on, and add to your portfolio.

Improve your programming skills by working on real-world projects. Join their free community to discuss projects, review code, and learn from peers and mentors.

2. Frontend Mentor

Frontend Mentor has some free coding challenges. But if you pay for their pro subscription, you get access to a lot more.

I currently have enough challenges to do with the free membership :)

I did my first HTML & CSS challenge on Frontend Mentor.

Gain real experience in building websites and providing code reviews. Build your portfolio and help others achieve their goals.

3. freeCodeCamp

I guess everyone knows about freeCodeCamp. It´s still a great resource for learning to code and get some projects for your portfolio.

4. DevChallenges

DevChallenges is a project by Thu Nghiem, with web development challenges and tutorials.

You can choose between three different paths:

Web Development Resources and Community that help you to become a Web Developer by working with Real-life projects and practices.

This is a website that I just discovered through Twitter.
I haven't done any challenges on DevChallenges yet, but I sure will!

Do you have anything to add to the list?

My developer goals for 2021

Sondre — Mon, 15 Mar 2021 17:48:59 +0000

My last post was supposed to be about my goals, but I more or less wrote about my journey up until this point.

I want to become a full-stack developer and to get there, I need to set some goals and reach them! And 3 months of 2021 have already gone by, so I'm a little late for setting my goals.

At this time, I feel pretty confident in writing HTML and CSS, and I have a basic understanding of Javascript but that's about it. So I thought I should write about my goals for 2021 as a developer, and my goals are:

Learn a CSS framework
JavaScript
Learn a JavaScript framework
Learn backend
Start writing
Start applying for jobs as a full-stack developer

Learn a CSS framework

Well, I first had to choose a CSS framework that works for me. And since I already was familiar with Bootstrap, I knew that's not what I wanted. I felt that Bootstrap would be overkill for my needs.

My criteria for choosing a CSS framework was:

Not a steep learning curve
No huge .css file, or unnecessary CSS
Easy to work with and customize

I had to do some research and it came down to Pure CSS, Tailwind CSS, and Milligram, I believe it was.

Out of those three, I went with Tailwind CSS. There were a lot of mixed feelings about Tailwind on Twitter, YouTube, and other communities. So naturally, I was very skeptical. It was so many classes and code in the HTML and it seemed like it wasn't worth it.

Tailwind Labs and Simon Vrachliotis released series on YouTube called "Tailwind: From zero to production", that teaches you everything you need to know to get up and running with Tailwind CSS v2.0 from scratch.

After watching that series, I was sold!

And when following along with the courses I'm taking, I use Tailwind CSS to get some practice with it. I feel that I've come along way with Tailwind in a short amount of time.

JavaScript

I have some basic knowledge of JavaScript. But JavaScript is like Math to me, if I don't use it I lose it. So I need to keep continuing learning and using JS regularly.

I will use Udemy, freeCodeCamp, Youtube, and Code Wars

Learn a JavaScript framework

This was an easy choice for me. It had to be React. But why? The main reason for choosing React was that both courses i am taking on Udemy have sections on React. And after watching the series by Tailwind I had seen how easy it was to use Tailwind and React together.

I have just started learning React, and I really enjoy it. And I can't wait until I start making projects with it!

Learning the backend

Since I've already decided to go with React, the MERN-stack seemed like a no-brainer.

And that's MongoDB, Express and Nodejs.

I haven't started learning the backend yet. I've just dipped my toes in it.

Start writing

I wasn't sure if I really wanted to do this. Because I feel like I don't have anything to share, and my knowledge is minimal. I made all these excuses in my head of why I shouldn't start writing. But I came to the conclusion that all my excuses were ridiculous, and I just have to start!

Well, I have started, now I just have to start writing frequently.

Summary

This year I will learn Tailwind CSS, Javascript, MongoDB, Express, React, Node and start applying for jobs as a full-stack developer.

What are your goals for 2021?

Resources:1. Photo by Glenn Carstens-Peters

My journey to becoming a web developer

Sondre — Mon, 15 Mar 2021 12:54:32 +0000

First, let me introduce myself. I am Sondre, a web developer from Norway. At least that’s what I want to become🙂

I posted my goals for 2021 on Twitter, so this was actually going to be a post about that, but it became more like a timeline from I was 12 years old until now.

https://twitter.com/SondreG2/status/1367549011343851523

My first experience with websites

The first time I created a website was back in 2000/2001. I was about 12 years old. Me and a couple of friends had just started playing Counter-Strike and we needed a website for our clan.

After some “research”, I found a CD with a copy of Microsoft FrontPage.

Microsoft FrontPage is a discontinued WYSIWYG HTML editor and website administration tool from Microsoft for the Microsoft Windows line of operating systems.

From Wikipedia

Microsoft FrontPage was my first introduction to making websites. It wasn’t easy to work with. Not for a twelve-year-old.

The websites looked hideous.

Image from Microsoft

So after learning how to create websites in FrontPage, I had to figure out how to get them to the World Wide Web.

I think I used every free web host that existed at the time. Geocities, Angelfire, and Homestead are some that I remember.

Ads and pop-ups dominated the free hosting services.

Leveling up my skills

2-3 years later, a friend of mine introduced me to an editor named Coffee Cup and W3Schools.

Image from Softonic

Now I was starting to learn how to write HTML and create more “advanced” websites.

I and my friend started working on a new website for our Counter-Strike clan. And he told me about this thing called PHP, and if we learned it, we could update the site online, in the browser!

How cool is that?

I remember our first little project. We wanted an easier way to update the world about our clan. So we made this news script or plugin if you will.

We didn’t use any kind of database. You didn’t need to login, so anyone with the correct URL could post on the site. And every time we wrote something, it was stored in a single .txt file on the server.

Personal website and sharing too much

I had now discovered paid hosting and got my own .net domain and made a personal website. It was way too personal when I think of it. I believe I used my full name, address, and phone number 😂

But who cares? I was this cool kid (That’s what I thought, anyway.) with his own website and I could share with everyone what kind of music I was listening to.

I also had this really cool page view counter that was updated whenever the page was refreshed.

And of course, I had to make a new design at least once every single month!

10-12 designs later I just stopped making websites. I don’t remember the exact reasons.

Starting over and getting overwhelmed

Ten years later, in 2016. My interest in computers and the web came back and I subscribed to Team Treehouse and started the web development path.

I discovered Bootstrap and other CSS frameworks. Responsive web design. And JavaScript is a thing now?!

What is all this?

I had used JavaScript a little before. But that was to make the scroll bar on the website black. Just because it was cool.

And I thought I knew how to do responsive web design. Heck! I did that 10 years ago with XHTML!

But no, that was not responsive web design. That was just simplifying websites for mobile devices and reduce load time.

The course on Treehouse was using Bootstrap and I was amazed by the power of Bootstrap and how easy it was to just throw up a design and start working.

But it was everything else that scared me. JavaScript, react, angular, vue, Mongoose, mongo, and all this new stuff.

It was just too much. It was overwhelming.

But I continued learning CSS, bootstrap, and some basic JavaScript.

I really wanted to become a web developer and start my own business. But as always, life got in the way. I continued working my boring nine-to-five job because it was a safe and stable income. And two years earlier I had become a father.

2021: A fresh start

I recently quit my job due to health issues.

I needed to find a job where I have the chance to work from home. But I’ve only done physical heavy labor, and I had already used 3-4 months figuring out what to do.

In January I decided to pursue my goal of becoming a web developer. Because making websites was something that I really enjoyed, and I still do!

When I'm learning to code, or making small side projects while learning, I just feel really relaxed. And I know that this is something that I want to work with!

I’ve taken some courses on Udemy and freeCodeCamp to refresh my HTML and CSS skills.

The courses have sections on JavaScript too, and that’s something that I’ve started to love.

My first thought, when I started this year was to just become a frontend developer. Since then I have realized that I want to learn more.

I want to become a full-stack developer!

Resources:

How to install React and Tailwind CSS for beginners

Sondre — Wed, 10 Mar 2021 12:23:28 +0000

I will show you how to install Tailwind CSS and React locally in this step-by-step guide!

Create a new project

Start by creating a new React project, by opening the terminal and run

npx create-react-app my-project

This usually takes a couple of minutes.

After the installation of your React project is complete, go ahead and cd over to your project folder in the terminal and run

cd my-project
npm start

You should now see this on http://localhost:3000

Delete items

We are now going to delete everything in the src and public folder except for index.html, App.js, index.css, and index.js

Your project folder should look like this:

Editing files

Go ahead and replace everything in your index.html with this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Tailwind Starter</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Replace your index.js with this

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
    <App />,
  document.getElementById("root")
);

Open your App.js and replace the code with

import React from "react";

function App() {
  return (
  <div>
    <h1 className="text-2xl text-red-900">Hello World!</h1>
  </div>
  )
}

export default App;

And the index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Installing Tailwind CSS

Now it is time to install Tailwind CSS and its dependencies. We do this with npm. Inside your terminal run npm i -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9This will install Tailwind, Post CSS 7 and Auto prefixer to your project.

CRACO

Create React App Configuration Override is an easy and comprehensible configuration layer for create-react-app.

We need to install CRACO, since Create React App won't let us override the PostCSS configuration.

So let's install CRACO withnpm i @craco/craco

Open your package.json and replace

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

with this

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

You now need to create a file named craco.config.js in the root of your project. Copy and paste this inside

module.exports = {
  style: {
    postcss: {
      plugins: [
        require("tailwindcss"),
        require("autoprefixer"),
      ],
    },
  },
}

Tailwind configuration

Create your Tailwind CSS configuration file:npx tailwindcss initAnd replace everything in tailwind.config.js with this:

  module.exports = {
   purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

This will purge the unused CSS in public/index.html and any .js, .jsx, .ts, .tsx files in any folders inside the src folder.

If you run npm start and your site looks like this, then everything is working as it should!

Resources:
Tailwind CSS
React
CRACO