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

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!

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

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.

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.

As a web developer - and honestly, in pretty much any career or area of life - I feel it's important to constantly improve and sharpen one's skills. I enjoy learning new things and practicing what I've learned before, so this will be a great opportunity for me to do just that.

The Challenge

This challenge will be short and simple: complete 2 Exercism JavaScript programming exercises every weekday until the end of the month (30 exercises in total).

What's Exercism?

Exercism is a wonderful platform that provides coding exercises for various programming languages! Founded in 2013, it offers a free and open-source solution to help people hone their programming skills. The platform is designed to help people learn various coding languages through practical exercises and mentor feedback.

The platform currently supports over 50 languages, including my favorite ones, such as PHP, C++, and (of course) JavaScript. Exercism is continuously expanding its offerings and plans to add more languages in the future, so be sure to keep an eye out. :)

Goal

At the end of this challenge, I hope to become more proficient in JavaScript and be better equipped to tackle more complex coding problems.

See you at the end of April,

Catherine Chen

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

1. Tom Sawyer (PD Books)

2. UI Revamp: Embassy University

3. Spy School Website (one of my favorites!)

4. Personal: Favorite Quotes

5. Magic Candy Shop

6. UI Revamp: OJ Simpson Trial Hub

7. Personal: Catherine's World (THE favorite!)

8. Fake Profile Generator

9. UI Revamp: TACO

10. Happy Fridge

11. Personal: Bucket List

12. House (no idea what this was supposed to be)

13. Painful Website

14. Template: Severe News

15. Template: Samira (LoL)

16. Catherine's Logs

17. Space Job Board

18. Browser Start Page

19. Template: Lux (LoL)

20. Template: Animal-Themed Website

21. Personal: Portfolio

22. Sleep (I was sleepy)

23. Template: Ipsum Blog

24. Template: Morgana (LoL)

25. Personal: Favorite Songs

26. Cat Advent Calendar

27. Template: Lulu (LoL)

28. Card Examples

About the Challenge

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.

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 :)

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. :D

If you haven't set up Laravel yet, follow the steps below. Otherwise, skip these two steps.

1. Run composer global require laravel/installer

2. From command line, cd into the directory you want to install Laravel in and run laravel new myProjectName. A folder titled myProjectName will be created with Laravel installed in it.

Install Laravel dependencies

Navigate to your project's root folder (cd myProjectName) and run:

npm install 
npm install tailwindcss

Then run:

cd resources
mkdir css

The above commands will create a folder named css in resources.

In resources/css, create a file named tw.css (or whatever name you prefer - just be sure to substitute your file's name for tw.css in this tutorial). This file will contain your uncompiled Tailwind CSS. Here, you can add @tailwind base;, @tailwind components;, @tailwind utilities;, etc.

Next, navigate to webpack.config.js in your project's root folder. Add the following code snippet:

mix.postCss('resources/css/tw.css', 'public/css', [
        require('tailwindcss'),
    ])
    .js('resources/js/app.js', 'public/js')

Run npm run dev. After Laravel Mix has finished building successfully, you should have a file in public/css containing built Tailwind CSS. To link to this asset in your project, add the following code:

<link href = {{ asset('css/tw.css') }} rel = "stylesheet" />

Now you should be all set to go. Happy coding!