What happens with the styling in this project when the CSS file is blank?

As a first-year CS student in university, I have been diving into the world of React.js. Currently, I am exploring a resume project and noticed that both app.js and index.js files are empty. I am curious to know how the styling is achieved in this project. While I see className attributes within JSX elements of the components, I can't seem to find a related CSS file in the src folder. Could it possibly be located inside the public folder instead? In addition to answering my questions, feel free to suggest any React topics or techniques I should study to gain a better understanding of how the styling is implemented here.

You can find the project repository by nordicgiant2 here: https://github.com/nordicgiant2/react-nice-resume

I have researched topics like how styling works for components in React.js, but haven't found a definitive answer yet.

javascriptcssreactjsstyling

Answer №1

Upon further inspection, I discovered that the styling is actually located within the public folder, contrary to my initial assumption based on the tutorial instructions which stated it should be placed in the src folder. The index.html file inside the public folder contains link tags pointing to the css files also located within the public folder.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link rel="stylesheet" href="%PUBLIC_URL%/css/default.css">
    <link rel="stylesheet" href="%PUBLIC_URL%/css/layout.css">
    <link rel="stylesheet" href="%PUBLIC_URL%/css/media-queries.css">
    <link rel="stylesheet" href="%PUBLIC_URL%/css/magnific-popup.css">
    <title>Nordic Giant Development</title>
  </head>

  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
    <script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>

    <script src="js/jquery.flexslider.js"></script>
    <script src="js/waypoints.js"></script>
    <script src="js/jquery.fittext.js"></script>
    <script src="js/magnific-popup.js"></script>
    <script src="js/init.js"></script>

  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creative ways to position and underline text using CSS

I'm having difficulty with positioning the text and extending the underline to the edge of the screen in order to create a specific visual effect. .header { height: 550px; width: 100%; background-color: #1F2041; position: relative; } . ...

htmlcsstextunderline

Assign the value/text of a div element by using JavaScript/jQuery within a PHP loop

I'm struggling to figure out how to set the value/text of a div using javascript/jquery inside a loop. Can anyone offer some guidance on this issue? Goals: Extract data from a database. Use javascript/jquery to assign the extracted data to an eleme ...

javascriptphpjqueryhtml

Restrict the height of a division based on the adjacent division

Within the parent div, I have two child div elements that are meant to be positioned side by side. The first element contains an image which loads dynamically, meaning its height is unknown in advance. I want the parent div's total height to match the ...

htmlcssimageheightauto

Tips for creating a POST request using mongoose in NextJS version 13.4

Currently, I am faced with the challenge of executing a POST request using mongoose in NextJS. In my project structure, I have three key files: lib/dbConnect.js, models/User.js, and app/new/route.ts. As defined, app/new/route.ts is responsible for handling ...

javascriptmongodbmongoosenext.jsnext.js13

The MaterialUI FormControl API TextField is experiencing an issue where the onClick event does not trigger on the initial click

I am currently working on a React application where I have integrated a MaterialUI Form Control API TextField. However, I am facing an issue with the Select tag as the onClick method is only firing after the first click. There are no hidden CSS properties ...

javascriptreactjsmaterial-ui

I encountered an SyntaxError while working with Ionic. The error message reads: "Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>)."

Here's the code that is causing me trouble: this.http.get('http://localhost/....) .map((res) => res.json()) .subscribe(( this.navCtrl.push(OtpPage,{mobileno:this.mobile}); }, (err) => { console.log(err ...

javascriptphpangularjsionic-framework

Sending a parameter to a different function (on a separate webpage)

At the start of my webpage, there are two radio buttons on the first page, each with its own value. Upon clicking a link to move to the second page, a for loop is activated to grab the value of the selected button. The script has been tested and works as e ...

javascripthtmlfunctionvariables

When a previous form field is filled, validate the next 3 form fields on keyup using jQuery

Upon form submission, if the formfield propBacklink has a value, the validation of fields X, Y, and Z must occur. These fields are always validated, regardless of their values, as they are readonly. An Ajax call will determine whether the validation is tru ...

javascriptjqueryajaxjquery-validate

Raphael JS Path Animation: Wiping Away

I have successfully created a line animation using RaphaelJS, which can be viewed on this jsfiddle link - http://jsfiddle.net/7n040zdu/. My next challenge is to create an erasing animation that follows the initial one. This erasing animation should mimic t ...

javascriptjquerycssanimationraphael

What is the best method for creating uniform cards with different amounts of text that won't cause overflow issues?

At the moment, I have a container that acts as a boundary for a group of cards: .cards-container { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; margin-top: 20px; border: 5px solid violet; } .card { ...

htmlcssreactjs

invoking a PHP function within a JavaScript script

In my collection of essential functions, there is one that I am particularly interested in: //the functions file //........ function user_exists($username){ $username = sanitize($username); $query = mysql_query("SELECT COUNT('user_id') F ...

javascriptphpajax

Effect of Active or Focus on the HTML <ul> element

Check out this example of a UL tag: <ul style="list-style-type:none; padding:5px ; border:solid 1px #666666;"> <li>I am waiting </li> <li>I am waiting </li> <li>I am waiting </li> <li>I am wa ...

javascripthtmlcss

How can I implement the useState hook in server side rendering with Next.js?

Seeking a way to pass a value from the client side to the server side has been challenging. While useState is not available for use on the server side, there must be an alternative solution. The goal is to fetch a value from the client and incorporate it ...

reactjsnext.js

Error message in JavaScript saying "The response string is undefined

I am working on a program built in angularjs. Currently, I receive JSON data from the server when online, but I am now developing an offline mode for the application. Despite trying to tackle the issue, I am unable to identify why I cannot resolve it. In ...

javascriptangularjsjson

Node.js encountered an error: TypeError - req.end does not have a function

Encountering an error stating that req.end is not a function, even though it works elsewhere in the code. Upon researching, some sources suggest that the global req variable might have been misplaced or lost. However, I haven't used any other variabl ...

javascriptnode.jsexpresspost

Interaction between the Vue parent and any child component

I am working with a series of components that are structured in multiple levels. Each component has its own data that is fetched over AJAX and used to render child components. For instance, the days parent template looks like this: <template> &l ...

javascriptvue.jsvuejs2

Encountered an error while attempting to log in: TypeError: the property 'id' of null cannot be read

I am facing an issue with the login process, specifically getting a TypeError: Cannot read property 'id' of null error message. How can I debug and resolve this error? var cas = require('cas-client'); get_forward_url(function(forwardur ...

javascriptnode.js

Guide on transferring information from .ejs file to .js file?

When sending data to a .ejs file using the res.render() method, how can we pass the same data to a .js file if that .ejs file includes a .js file in a script tag? // Server file snippet app.get('/student/data_structures/mock_test_1', (req, res) = ...

javascriptnode.jsexpressejs

Enhance an existing webpage by integrating ajax with jquery-ui

I'm seeking assistance with integrating an advanced search feature into an existing webpage system. It appears that there is a complication with the current jQuery UI being used on the page: <script src="js/jquery-ui-1.10.4.custom.js"> ...

javascriptjqueryajaxjquery-ui

A mysterious JavaScript snippet that automatically scrolls down when the webpage is loaded

Recently, I encountered an issue with a mysterious JavaScript script that automatically scrolls down when entering the page (I suspect it's JavaScript). I've tried to investigate using Firebug, examining the code, deleting scripts, and even remov ...

javascripthtmlgoogle-chrome