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

Guide to extracting additional data from a JSON array upon selection of a value within an option tag using jQuery

Seeking assistance to enhance the display of museum information when a museum name is selected from an option dropdown box. The data is extracted from a json array. Although I managed to populate the option box with the museum names, I am encountering di ...

javascriptjqueryhtmljson

The elements on the webpage are spilling over with content

I encountered an issue while creating a dashboard with a sidebar on the left side. When adding content to the page, some of it ended up hidden behind the sidebar. I tried using overflow-x:auto and this was the result: https://i.stack.imgur.com/5qHJY.jpg Be ...

htmlcssangularflexbox

I'm perplexed as to why my JavaScript code isn't successfully adding data to my database

Recently, I delved into the world of NodeJS and Express. My goal was to utilize Node and Express along with MongoDB to establish a server and APIs for adding data to the database. Specifically, I aimed to write the code in ESmodules syntax for JavaScript. ...

javascriptnode.jsmongodbexpress

The functionality of the Bootstrap navbar-fixed-top seems to be malfunctioning

I am currently working on creating a page layout with a fixed navigation bar positioned at the top. I am aiming for a design similar to the one showcased here. Upon examining the example linked above, it appears that the content of the page begins below t ...

csstwitter-bootstrap

Exploring the concept of 'mapping' in jQuery: A guide to traversing an array with varying variable values

I need assistance in linking two unrelated data points together. I have an array that stores images at specific positions, and a variable that can hold different values (1, 2, or 3). My goal is to connect the array position (1, 2, or 3) with the variable v ...

javascriptjqueryarrays

Is it possible to dynamically render css using Express.js?

I have a need to dynamically generate CSS with each request. For example, in my Express.js application, I've set up a route like this: /clients/:clientId/style.css When a matching request is received, I want to retrieve the Client from the reposito ...

csslessexpressstylus

Centering an icon in tandem with Typography text using Material UI

Is there a way to align an icon with the text so that they are on the same level? Currently, it seems like the icon is slightly above the text. I've tried using padding-top: 5px and margin-top: 5px, but those solutions didn't work as expected. ...

cssreactjsmaterial-uireact-icons

Creating a dynamic form field using JavaScript

I'm struggling with a JavaScript issue that requires some assistance. I have a form sending an exact number of inputs to be filled to a PHP file, and now I want to create a preview using jQuery or JavaScript. The challenge lies in dynamically capturin ...

javascriptphpjqueryhtml

Node.js equivalent of PHP's SimpleXMLParser

One of the most user-friendly XML reading and writing APIs I've come across is PHP's SimpleXMLElement. For instance, to generate a DOM for the following XML code: <root> <foo> <bar baz="goo"> moo ...

javascriptxmlapinode.js

Is it feasible for JSON.stringify to maintain functions in its serialization?

Consider this item: x = { "key1": "xxx", "key2": function(){return this.key1} } Suppose I execute the following code: y = JSON.parse( JSON.stringify(x) ); After running the above code, y will contain { "key1": "xxx" }. Is there a way to include funct ...

javascriptjsonobject

The Value of Kendo Data

Below is my current kendo code snippet: <script> $("#dropdowntest").kendoDropDownList({ optionLabel: "Select N#", dataTextField: "NNumber", dataValueField: "AircraftID", index: 0, ...

javascriptkendo-ui

Trouble selecting options in hierarchical data

I've been attempting to run this sample code for selecting an option from a select element with hierarchical data, but it seems to be having some issues. $scope.options = [ { id: 1, info: { label: "Item 1" } }, { id: 2, info: { label: ...

javascripthtmlangularjs

What could be causing the AngularUI bootstrap datepicker to not appear?

Exploring the popup datepicker demo from angularUI bootstrap, which is embedded in their page and works perfectly. However, when I tried to create a minimal plunker here, the button click does not open the calendar. Any thoughts on what might be causing th ...

javascripthtmlangularjsangular-ui-bootstrap

I am looking to retrieve the values entered in a textbox from an HTML document and then post them using a JSON file in Node.js when the submit button is

Here is the JavaScript code I have written: $(document).ready(function(){ $('form').on('submit', function(){ var email = $("form input[type=text][name=emails]").val(); var todo = {email: email.val(), ...

javascriptjqueryjsonnode.js

The organizational chart function was functioning properly on the local environment, however, it failed to work after deployment, resulting in the error message "jQuery(

Currently, I am in the process of creating an organizational chart using the Angular library called orgchart. The code I have developed works fine on my local machine, but when we deploy it onto our nginx server, we encounter an error related to jQuery. T ...

javascriptjqueryangular7orgchart

Redirecting to a new page in JavaScript as the clock nears the top of the hour after 5 minutes

I am looking to automatically redirect a user to another page when it is 5 minutes until the start of the next hour. In military time (24-hour clock), this means I want the redirect to occur at times like... 11:55 12:55 13:55 14:55 15:55 etc So far, I ...

javascriptjquery

The amazing feature known as "CSS3 background-clip"

Seeking a solution for restricting a background image to the text within an h2 element using -webkit-background-clip. Wondering if -moz-background-clip functions in the same way as -webkit-background-clip. As it currently only works in webkit browsers, it ...

css

Using a loop to execute Javascript Promise.all()

I am currently facing an issue where I need to make a web API call twice inside a loop, and then wait for the results before pushing them into a larger array as subarrays. The code snippet below illustrates my approach: var latlngPairs = []; function extra ...

javascriptnode.jspromisegoogle-places-apipromise.all

-=:Heading with a decorative vertical line=:-

Currently, I am working on a CSS project that requires page titles (headings) to be centered with horizontal lines positioned vertically on both sides. Additionally, there is a background image on the page which means the title's background must be tr ...

htmlcsspseudo-class

Having trouble retrieving data values from methods within my Vue.js component

I am having trouble accessing the lat and lng values from the data() method within the maps() method. Here is a link to my Vue.js component code: https://gist.github.com/melvin2016/c8082e27b9c50964dcc742ecff853080 Here is an image of the console showing ...

javascriptgoogle-maps-api-3vue.jsfrontend