DEV Community: Catherine Chen

How to start learning web development for free

Catherine Chen — Tue, 30 Apr 2024 18:53:03 +0000

There are so many free resources available online to help you start (and continue) your journey in web development. In this post, I've gathered a list of my favorite, and most high-quality, materials. If you have additional suggestions on resources to include in this post, feel free to drop a comment below!

Dash.GeneralAssemb.ly: A Taste of Coding

If you aren't sure whether or not web development is for you, or haven't done any coding before, dash.generalassemb.ly is one of the best places to start.

It's a free and fun online course that teaches you the basics of HTML, CSS, and JavaScript while building projects. A lot of other programs and bootcamps divide HTML / CSS / JavaScript into three separate in-depth courses, but Dash gives you all of it together at once. The benefit is that you learn how all these components of a website work together from the very beginning, instead of only being able to see one piece at a time.

Dash's projects 1-3 give you a great starting point in the world of web development. After those you can continue to finish the rest of the projects, or move on to another resource after that.

Becoming a Web Developer

There are a myriad of introductory web development courses and bootcamps online, where you can learn the basics of development. (Doing a quick search on Udemy reveals so many options; it's hard to sift through all of them.)

Below are some high-quality, free courses I recommend and have used myself. They're comprehensive, provide practice and knowledge, and prepare you for a fulfilling career.

The Odin Project: Foundations Course

The Odin Project's Foundations Course is a solid introduction into the bread and butter of web development.

It's less interactive than most of the other courses I'll mention here, but the content is a solid foundation. The course equips you with the fundamental knowledge and practical skills you need to build websites.

If you enjoy the Foundations Course, look into Odin Project's Full Stack JavaScript or Full Stack Ruby on Rails learning paths.

Freecodecamp

Freecodecamp provides 10+ free web development courses in JavaScript, Python, front-end, and back-end that are more than enough to kickstart any developer's career. You learn through interactive coding exercises and articles, and can participate in forum discussions when you get stuck or need help.

If you aren't sure which course to begin with, work on their Responsive Web Design Certification first, followed by JavaScript Algorithms and Data Structures. After that, you can split off to do either Front End Development Libraries or Back End Development and APIs, or both if you're interested in pursuing a full-stack career.

App Academy Open

If you enjoy watching videos, or prefer videos as a method of learning, App Academy Open is perfect for you. It's a free, self-paced version of App Academy's complete full-stack development bootcamp, so it's chock-full of rigorous material.

The learning path gives you access to over 500 hours of videos and resources, covering everything from fundamental HTML and CSS to algorithms and data structures in JavaScript.

Codecademy

Codecademy is a freemium platform with high-quality content. Their courses range from web development to data science, and are interactive and text-based.

There is a lot of free material to work through, though there are many perks only accessible through a subscription. However, Codecademy offers a lot more material than Freecodecamp, which is why I've still decided to include it on this list.

Choosing a Career as a Developer

If you like frontend development, work on your advanced CSS and JavaScript skills. Pick up a framework such as React, Angular, or VueJS, and focus on learning additional skills like web accessibility and SEO.

If you're interested in backend development, you'll want to focus on one of these specializations: Node.js, Java, PHP, Python, C#, or Ruby. Do some research on your own before making a choice. Learn about databases, SQL, and/or MongoDB, as well as popular frameworks in your language: Spring for Java, Laravel for PHP, django for Python, ASP.NET for C#, or Ruby on Rails for Ruby. Note that there are a lot more frameworks available for Node.js and PHP developers (though Laravel is the most popular for PHP).

If you enjoy doing both (like me!), learn both for full-stack development. 😉

Roadmap.sh

Learning the basics of web development opens doors to many other careers in the tech field. Roadmap.sh provides guides, learning paths, and roadmaps to point developers in a direction of their choosing.

It's the perfect place to start if you want to dive deeper into a field. Once you have the basics under your belt, you have the right foundation to transition into learning mobile app development, game development, AI & machine learning, and more. The world of technology is at your fingertips.

Conclusion

Are there any other free educational resources you enjoy using as a developer? Let me know in the comments below!

Happy coding,

Catherine

Best Free Website Hosting Options for Developers

Catherine Chen — Mon, 22 Apr 2024 12:23:05 +0000

If you're exploring the world of web development, chances are you've created your own sites that you want to put out there for the world to see.

Hosting your own website for free has gotten easier than ever before. As a developer, you have several options depending on the customization needs and other requirements of your site. Static sites are the simplest to host for free, but a few hosting providers work with dynamic sites as well.

Most hosting services provide free SSL certificates to secure your site and allow you to connect a custom domain. They'll usually provide a free subdomain for you to use, but you'll still have to pay for a domain name if you don't want your site on a subdomain.

Static Website Hosting Services

If you're looking to host a static site, there are many options available to you. Static sites are websites that are built using only HTML, CSS, and JavaScript, delivering the same fixed content to all visitors.

Surge.sh — a simple cloud platform for deploying static websites
Github Pages — host static websites directly from your GitHub repository for free
GitLab Pages — host static websites for free directly from your GitLab repository

Server-Side (SSR) Hosting for JavaScript

Dynamic websites adjust their content based on user interaction, time, or other factors. Web applications, e-commerce stores, or news websites with frequently updated content tend to be dynamic sites. If you're serving dynamic content on your website, the following places offer free cloud hosting for server-side rendering:

Vercel — a cloud platform for developers to build, deploy, and scale modern web applications with a focus on performance and ease of use
Cloudflare Pages — a developer-friendly platform to build, deploy, and collaborate on lightning-fast websites
Firebase Hosting — a secure and scalable platform for deploying web content, including static sites, dynamic content served through Cloud Functions, and microservices
Netlify — seamless deployment, serverless functions, and global hosting for static sites and web applications
Glitch.me — a free, browser-based development environment for building and collaborating on web projects, often used for quick prototypes or learning to code

Other Free Website Hosting Options

The following options provide even more flexibility over the tools you want to use to host code, and aren't limited to just JavaScript. Not all of their free plans are suitable for production hosting, but they're a great place to start experimenting.

Render.com — a pay-as-you-go cloud platform for deploying web applications of all kinds
Repl.it — a cloud-based platform for coding in various languages, allowing for experimentation and collaboration

Free PHP & MySQL Hosting

One of the first websites I ever hosted used InfinityFree. It's a free hosting service for traditional PHP & MySQL sites, whether you're using a framework like Laravel or a website builder like Wordpress. It comes with a control panel and other hosting features.

Conclusion

With so many great options available, the perfect free hosting platform depends on your specific needs and skillset. Are there any free or cheap hosting plans you use that I haven't included here? Let me know in the comments below!

Coding Training: How to Improve Your Coding Skills

Catherine Chen — Sun, 14 Apr 2024 11:37:22 +0000

There's a lot that goes into becoming a better programmer, so let's just tackle one way that helps improve your programming skills today: practice, practice, practice solving problems. 😤

Practice Makes Perfect

Mastering any skill takes time, and coding is no different. To help you get started, I've listed some of my favorite websites below that offer fun and engaging ways to practice your coding skills.

Remember that the more you code, the better you'll become! 🚀🚀

Note: One way that can help is to try setting aside specific times in your day to write code. Morning and evening are my personal favorites, but it's different for everyone. Whatever you choose, though, consistency is key!

CodinGame

CodinGame is probably my top recommended site for someone looking for a place to improve their programming skills. This platform delivers coding practice through a variety of games, challenges, and contests. It's a fun way to learn and easy to get started with, but also contains more demanding challenges for advanced coders further along in their careers.

Codewars

Codewars is another online site geared towards programming practice. This platform centers around the concept of "kata," which are small, focused coding exercises. These kata target specific techniques and problem-solving approaches in various programming languages.

Codewars doesn't have games like CodinGame, but they do incorporate gamification techniques to make learning more engaging. As you solve different exercises, you can progress through ranks and earn points (honor) for completing katas and contributing to the community. You can even create your own challenges!

Leetcode

Leetcode, infamous among computer science students, is a popular online platform designed to help programmers prepare for technical coding interviews. (It's also, unofficially, known for causing many tears during junior and senior CS years. 🥲)

Leetcode includes guides on different areas of programming, as well as targeted practice. Their problems challenge users on specific algorithms, data structures, and efficient problem-solving techniques.

Exercism

Exercism is an awesome online platform for beginner to intermediate-level coders to practice their skills, focusing on a specific programming language. Experienced programmers can also volunteer to mentor beginners and provide feedback on their code. This platform is completely free and open source, so anyone can contribute to the exercises and create new ones for different languages!

Conclusion

I hope this list helps you find tools that can help you improve your skills! There are a lot of other great websites out there - are there any you enjoy using that I haven't mentioned in this short list? Drop a message in the comments below!

Happy coding!

Catherine

Setting up TailwindCSS + SASS with EmberJS

Catherine Chen — Tue, 02 May 2023 22:09:11 +0000

Let's get started!

Creating an EmberJS project

See https://guides.emberjs.com/release/getting-started/quick-start/ for more information.

If you haven't already, you can install the Ember CLI using the following command:

npm install -g ember-cli

Then, create a fresh new Ember application:

ember new my-ember-app --lang en

Navigate into the directory of your new Ember app (cd my-ember-app) before running any of the commands in the next section.

Adding TailwindCSS + SASS

First, let's begin by installing the necessary dependencies:

npm i -D ember-cli-postcss postcss-scss autoprefixer tailwindcss

Next, create your tailwind.config.js file in the root directory:

npx tailwind init

Update module.exports to reflect something like this:

// tailwind.config.js

module.exports = {
    content: ["./app/**/*.{gjs,gts,hbs,html,js,ts}"],
    // ...
}

Add the following options to ember-cli-build.js:

// ember-cli-build.js

// ...

module.exports = function (defaults) {
    const app = new EmberApp(defaults, {
+       postcssOptions: {
+           compile: {
+               extension: "scss",
+               enabled: true,
+               parser: require("postcss-scss"),
+               plugins: [
+                   {
+                       module: require("autoprefixer"),
+                       options: {},
+                   },
+                   {
+                       module: require("tailwindcss"),
+                       options: {
+                           config: "./tailwind.config.js",
+                       },
+                   },
+               ],
+           },
+       },
    });

    return app.toTree();
};

Note that you will need to restart the server (run npm start again) to see changes after making edits to ember-cli-build.js.

Rename app/styles/app.css to app/styles/app.scss.

Conclusion

And that's it! If you have any questions or comments, feel free to let me know.

If you would like to see the full code for this tutorial, check out klickers/embertwscss.

Building a Weekly Planner App with ReactJS + FullCalendar: Project Setup (Part 1)

Catherine Chen — Mon, 10 Apr 2023 21:51:00 +0000

GOAL: Create a weekly calendar app where one can plan and schedule tasks. Integrations with Google Calendar and task apps.

Note: I will be using Astro.build, but the basic concepts of this tutorial should work with any other setup (Vite, CRA, etc.).

Part 1 covers project setup and creating a basic calendar component.

Setting up Astro + React + FullCalendar

First, let's set up Astro with the following command:

npm create astro@latest

Follow the steps in the command prompt. Choose "Empty" when asked, "How would you like to start your new project?", "Yes" for installing dependencies, and "No" for TypeScript.

Next, we need to add ReactJS. Move into the folder that was created when you initiated the project, then run the astro add react command.

cd your-project-folder
npx astro add react

Choose "yes" if prompted with a y/n question.

Finally, we need to install the FullCalendar packages we need. Run the following command:

npm install \
  @fullcalendar/core \
  @fullcalendar/react \
  @fullcalendar/timegrid \
  @fullcalendar/interaction

@fullcalendar/core and @fullcalendar/react are quite self-explanatory as to what they contain. @fullcalendar/timegrid is a specific plugin we'll be using to create our calendar app.

Initial Calendar Component

Currently, your src folder should only contain one other folder - pages. Create a src/components folder with an empty Calendar.jsx file. Inside this Calendar.jsx file, we will create a Calendar component.

First, we want to import React and FullCalendar, along with the initial plugin we'll be using.

// src/components/Calendar.jsx

import React from "react";
import FullCalendar from "@fullcalendar/react";
import timeGridPlugin from "@fullcalendar/timegrid";

Next, let's create the basic component:

// src/components/Calendar.jsx

// ...

class Calendar extends React.Component {
    render() {
        return (
            <FullCalendar
                plugins={[timeGridPlugin]}
                initialView="timeGridWeek"
            />
        );
    }
}

export default Calendar;

Let's use this component. Make the following changes to your index.astro page:

  ---
+ import Calendar from "../components/Calendar";
  ---

  <html lang="en">
      <head>
          <meta charset="utf-8" />
          <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
          <meta name="viewport" content="width=device-width" />
          <meta name="generator" content={Astro.generator} />
          <title>Astro</title>
      </head>
      <body>
-         <h1>Astro</h1>
+         <Calendar client:load />
      </body>
  </html>

Now if you start your app using the npm run dev command, you should see something like this:

You can find all the code at klickers/ct-calendar. Part 2 coming soon!

February Code Challenge COMPLETE!

Catherine Chen — Mon, 03 Apr 2023 19:13:00 +0000

It's already April, but better late than never in updating y'all on the results of my February code challenge!

On February 28th, I had 25 of the 28 websites completed, then finished the last three over the next few days.

This challenge has been one of the best and worst ideas I've ever had. It forced me to quickly generate new websites (some I want to evolve into larger projects, others I can't stand to look at). Near the end, it became very energy-draining, to the point where I had a hard time focusing on other tasks I needed to finish during the day.

After the challenge concluded, I ended up with mild coding PTSD and took a break from programming for a few weeks.

Note to self for future code challenges:

don't include weekends
don't set challenges that take 2-4 hours every day

The 28 Websites

Tom Sawyer (PD Books)
UI Revamp: Embassy University
Spy School Website (one of my favorites!)
Personal: Favorite Quotes
Magic Candy Shop
UI Revamp: OJ Simpson Trial Hub
Personal: Catherine's World (THE favorite!)
Fake Profile Generator
UI Revamp: TACO
Happy Fridge
Personal: Bucket List
House (no idea what this was supposed to be)
Painful Website
Template: Severe News
Template: Samira (LoL)
Catherine's Logs
Space Job Board
Browser Start Page
Template: Lux (LoL)
Template: Animal-Themed Website
Personal: Portfolio
Sleep (I was sleepy)
Template: Ipsum Blog
Template: Morgana (LoL)
Personal: Favorite Songs
Cat Advent Calendar
Template: Lulu (LoL)
Card Examples

February Code Challenge: 28 Websites in 28 Days

Catherine Chen — Fri, 27 Jan 2023 19:01:55 +0000

(Scroll below for updates!)

Hey everyone!

Recently I've decided to give myself a Code Challenge every month (for the remainder of 2023) to stretch my skills and have a bit of fun. This February, I'll be making 28 websites for my first challenge! 🤯

I'm a little apprehensive (okay, actually more than a little) since I don't usually code seven days a week, which means I may have to double up on some days to fully complete this challenge.

Here are a few ideas I have of simple websites I could make for this challenge:

websites for people
revamping UI for "ugly" websites
landing pages selling nonexistent products
fanpages?
...

(Due to time constraints, these websites will be relatively simple, with perhaps only 1-3 pages.)

I'll be updating my progress on this post periodically as I work through the challenge. Wish me luck!

Cheers,

Catherine

Updates

Day 4: Favorite Quotes Website

Tools: Astro, TailwindCSS, Pocketbase

For Day 4 of this challenge, I built a quick website of my favorite quotes (with a theme inspired by Tumblr). I self-hosted Pocketbase for my backend and deployed my frontend with Vercel.

Day 3: Spy School Website

Tools: Astro, TailwindCSS

I've always wanted to become a secret agent, so I created a simple landing page for an imaginary spy school. =)

This is one project I'd love to continue in the future though, especially since I see so much potential for teaching important lessons through this kind of theme.

Day 2: Embassy University (UI Revamps)

Tools: Astro, TailwindCSS

Today I finally got to revamp an old website I’ve been eyeing for sometime: Embassy University! I know I could’ve done a better job with the UI, but at least it looks better than the original. 😅

(Disclaimer: I am not in any way affiliated with this site, nor does me making a different version of their homepage indicate my endorsement of their beliefs and values. 🙃)

Day 1: The Adventures of Tom Sawyer (PD Books)

Tools: Astro, ReactJS, Pocketbase, TailwindCSS

This first site is a website with custom annotations to bring public domain books to life! I was only able to get the preface of The Adventures of Tom Sawyer complete, but you can bet I’ll return to this project later to add more chapters.

Deciding how I wanted to display annotations was the most difficult part, but after I completed that, I finished the project quickly.

Setting up TailwindCSS with SASS in RedwoodJS

Catherine Chen — Sat, 26 Mar 2022 00:51:04 +0000

Here's a quick and easy guide on how to setup TailwindCSS, using the SASS preprocessor, in a new RedwoodJS project.

Requirements

Make sure you have the correct npm / yarn versions installed, the details of which can be found at https://redwoodjs.com/docs/quick-start.

Setting up tailwind and scss

yarn create redwood-app my-app-name
cd my-app-name
yarn rw setup ui tailwind
yarn rw setup webpack
yarn workspace web add -D sass sass-loader

The code above will create a new RedwoodJS project, then set up Tailwind, webpack, and Sass in your project.

Make sure to change index.css to index.scss and update the import in your web/src/App.js file.

Conclusion

That should be it! You're now all set to go :)

Setting up TailwindCSS with SASS in Laravel

Catherine Chen — Sun, 27 Sep 2020 21:26:38 +0000

Start

Before beginning, make sure you have Composer and npm installed.

First, create a Laravel project.

Install dependencies

Next, install Laravel's npm dependencies by running the following commands:

npm install
npm install tailwindcss

Sass comes with Laravel, so you don't need to install it manually.

tailwind.config.js

You may want to create a tailwind.config.js file by running:

npx tailwindcss init

in your root folder.

webpack.mix.js

Inside webpack.mix.js, require tailwindcss:

const tailwindcss = require('tailwindcss');

Update your code to read as such:

mix.sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.config.js') ],
    })

where app.scss is the name of your main SCSS file.

For each extra SCSS file you have, add another snippet of code. Example:

mix.sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.config.js') ],
    })
    .sass('resources/sass/app2.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.config.js') ],
    })

Previewing Changes

To preview changes to your SCSS files as soon as you make them, run npm run watch as you edit. Every time a SCSS file listed in webpack.config.js is updated, your files will be built again. Make sure to disable caching in your browser first, or the newly built files will not be loaded, and the browser will continue to use your old files.

That's it! Now you're all set. 😄

Free customized learning pathways for your journey as a web developer (idea)

Catherine Chen — Wed, 13 May 2020 18:07:40 +0000

Yesterday evening I came up with this idea: to collect free online web development learning resources and organize them into learning pathways.

There’s so much content out there, but it’s difficult to find good materials that match your skill level, or tools that enable you to create what you want. (Of course, documentation is always there, but we don’t always feel like reading it - right??)

I’m thinking of building a website containing these organized learning pathways. All that would need to be done is content organization/curation. No new material would need to be written.

On the site, users could choose to start with either:

A pathway. Say someone wants to learn frontend, or discover more about Kubernetes, or maybe even just dip their toes into headless CMS solutions.
- Examples: “Frontend Web Development”, “Laravel”, “ReactJS”, “Exploring Cloud Services”, “Exploring Headless CMS Options”, etc.
- For Frontend Web Development, for example, users could first learn the basics of HTML & CSS, then responsive web design, followed by JavaScript. Resources could be from sites such as FreeCodeCamp, Udacity (their short courses are free), and Codecademy. Afterwards, users could explore responsive design libraries (Bootstrap, TailwindCSS, Tachyons), JavaScript animation, jQuery, and AJAX.
A project goal. I learned web development by trying to create projects. I’d explore a bunch of tools and libraries I felt could help me create the result I wanted, then pick and choose the ones I liked. I learned literally all of my current web dev skills through this process.
- Example: “Create a Personal Portfolio”, “Create an eCommerce Site”, etc.

What do you guys think? Are there any similar projects going on? Is this something useful you would use (or would’ve used if it existed when you needed it)? What paths/project goal choices would you like to see? I’d love to hear your thoughts on this.

What I learned from finishing Udacity's four-month Blockchain nanodegree in one month

Catherine Chen — Tue, 05 May 2020 19:53:49 +0000

Udacity was offering a one month free promotion due to the coronavirus, and I wanted to take advantage of it. I signed up on the website, entered my credit card info, and took note that I would have $400 dollars charged to my account if I didn't graduate (finish the program) or cancel my subscription before my month was up. (To put things into perspective, the program is designed to take four months to complete.)

Perhaps Udacity was looking to build their customer base, but renewing my subscription was not a viable option for me. I couldn't spare four hundred dollars when the same amount would pay for eight units of college tuition.

It wasn't really a choice. I could either go partway through the program and possibly never finish it, or I could try to complete it in a month.

Since I can't live without challenges, I chose the latter. And here's what I learned from it.

The beginning may be easy, but it's the end that counts.

At first, putting in three to six hours a day, six days a week in this one thing was fun. But after the first or second week, I began to feel drained.

The content became more difficult. The projects took a lot of time. I had midterms for school coming up, and a magazine design deadline to meet. I had so much on my hands - but then I learned my second lesson.

You have to push yourself. No one else is going to do it for you.

I wanted to do this. So I had to force myself to sit back, watch hours of videos on blockchain, and work through debugging a bunch of errors (many due to old code). My brain literally felt dead in the middle of the afternoon.

What got me through was the knowledge that I wanted this and could do it, and the fact that I wasn't going to get anywhere if I didn't tell myself to start working. I had to push myself.

Sometimes you should take a break...or not

On the third week, I became so exhausted I unintentionally took two days off. Sure, it was great to have a day when Blockchain wasn't on my mind. But on the other hand, I lost valuable time. I ended up having to stay up late to finish the last two projects, which made me pretty sleepy during class those days. Not ideal, but bearable.

Cramming isn't fun

I wished I'd had more time to absorb and explore the material on Solidity, Ehtereum, Truffle, and more I was presented with. But since I was on a time crunch, I missed out big time.

Community matters

My family totally supported me during the whole thing. They gave me alone time to finish up the projects I needed to submit, encouraged me along the way, and celebrated with me...

...at the end...

I felt absolutely WONDERFUL when I received the completion certificate. I'd done it! Maybe I wouldn't start a career in blockchain, but I'd always remember the moment and what it took for me to get there.

Introducing "Anabel": A personal website/resume template

Catherine Chen — Wed, 15 Apr 2020 22:31:40 +0000

Yesterday, I came up with the idea to build a personal website for my sister's birthday. Because her birthday is today, I, being the nice sister I am, woke up early to cram in a few hours of work into the project I named after her:

Anabel Personal Website Template

It's built on purple because she loves purple.

The website is built on TailwindCSS. The template colors and fonts can easily be changed from the variables in the src/before.css file:

:root {

    /* Display & Body */
    --font-display: "Baloo Paaji 2";
    --font-body: "Lato";
    --color-display: theme(colors.gray.700);  /* color of display fonts */
    --color-body: theme(colors.purple.100);  /* body background color */

    ...etc.
}

Usage

It's very easy to work with. After downloading the repository, cd to the root folder and run:

npm install
npm start

Hot module replacement begins. Edit any of the files within src/, then navigate to http://localhost:1234 to view the result.s

(The repository also contains a build within the dist/ folder. Just load the compiled dist/before.css file into any webpage you'd like.)

Card Components

The template contains two basic types of card components:

The first is a card-within-the-card style component, best used for the Employment History and Education sections of a resume.

The second is a list style component, best used for card categories like Skills, Hobbies, Languages, etc.

Conclusion

This project was fun to build, and I enjoyed it (almost!) every step of the way. Next, I plan to create a Routify (Svelte) template based on Anabel to make creating a multi-page Anabel website easier.

That's it for today! I hope you enjoyed reading this post as much as I enjoyed creating Anabel. Leave comments below to let me know what you think, or alert me to any errors in the code. ;)