Giter Club home page Giter Club logo

codespaces-learn-with-me's Introduction

Learn React with Codespaces 📝

Welcome to your first Codespace running a popular UI framework called React! We've got everything fired up and running for you to explore React and Codespaces for the first time.

A template for your project README.

License

This project is licensed under the terms of the MIT open source license. Please refer to MIT for the full terms.

Maintainers

Please see CODEOWNERS.

Support

Please see SUPPORT.

Room for Improvement

There's always room for improvement in any project.

  • If you have a suggestion feel free to open an issue.

  • If you have a solution, feel free to open a pull request.

Learn how in the Contributing Guidelines.

How to Use

Open in Codespace

Once our codespace is fully loaded, you will see a live preview of your web app on a tab titled "Simple Browser." (If you don’t see the “Simple Browser” tab yet, give it a few minutes to load.) It should look like the image below:

Screen Shot 2023-02-02 at 10 21 55 PM

Change some words

Currently, the web app states that "GitHub Codespaces ♥️ React." Let's replace the words “GitHub Codespaces” with our GitHub username by following these steps:

  1. Navigate to the App.js file in the src folder. This is where the content for the web app lives.
  2. On line 9 of the App.js file, you will see the words “GitHub Codespaces ♥️ React” wrapped in a paragraph tag represented by these characters <p></p>.
  3. Change the words “GitHub Codespaces” on line 9 to your GitHub username.
  4. Save the changes you made in your App.js file by pressing the keys “command and s” for Mac or “control and s” for Windows.
  5. Check for the reflected changes in your simple browser tab

My GitHub username is blackgirlbytes, so my web app says “blackgirlbytes ♥️ React.”

Screen Shot 2023-02-02 at 10 37 01 PM

Change the background color

The background color for the React app is currently gray. Gray might be someone’s favorite color, but it’s not mine. Let’s brighten it up by following the steps below:

  1. Navigate to the App.css file in the src folder. This is where the styles of the web app live.

  2. On line 11 of the App.css file, you will see the following code:

    background-color: #282c34; #282c34 is the hex code for the color gray.

  3. Try replacing the #282c34 with the word purple. (That’s my favorite color!)

  4. Save the changes you made in your App.css file by pressing the keys “command and s” for Mac or “control and s” for Windows.

  5. Check for the reflected changes in your simple browser tab.

The final version should resemble the image below:

Screen Shot 2023-02-02 at 10 44 26 PM

codespaces-learn-with-me's People

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.