Grid-area, why is my header not spanning across both areas?

https://github.com/callum-laing/react-first-app I think I've written the code where it needs to be, however could someone please take a look and see if you can find out where I'm missing? the header is inside Heading.jsx, which has imported inside a <header> tag in app.jsx. I've got display:grid in index.css (I think this is the right location for it?) and I've created 3 rows, 2 columns..
body {
display: grid;
grid-template-areas:
"header header"
"section1 section2"
"section3 section4";
grid-template-rows: 100px 1fr 1fr;
grid-template-columns: 1fr 1fr;
body {
display: grid;
grid-template-areas:
"header header"
"section1 section2"
"section3 section4";
grid-template-rows: 100px 1fr 1fr;
grid-template-columns: 1fr 1fr;
GitHub
GitHub - callum-laing/react-first-app
Contribute to callum-laing/react-first-app development by creating an account on GitHub.
163 Replies
vince
vince13mo ago
Can you put it in a codepen?
CDL
CDL13mo ago
I can try, Ive never put react code in a codepen 😄 Hm. nope, can't do it well, i can, but i can't add multiple components
vince
vince13mo ago
You can put it in a codesandbox, but it might just be easier to make a minimal reproduceable example
CDL
CDL13mo ago
I mean effectively it's just
function App() {
const [count, setCount] = useState(0);

return (
<div>
<Heading />
<main>
<Counter count={count} setCount={setCount} />
</main>
<footer></footer>
</div>
);
}

export default App;
function App() {
const [count, setCount] = useState(0);

return (
<div>
<Heading />
<main>
<Counter count={count} setCount={setCount} />
</main>
<footer></footer>
</div>
);
}

export default App;
and
body {
display: grid;
grid-template-areas:
"heading heading"
"section1 section2"
"section3 section4";
grid-template-rows: 100px 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
min-height: 100vh;
background-color: grey;
}
body {
display: grid;
grid-template-areas:
"heading heading"
"section1 section2"
"section3 section4";
grid-template-rows: 100px 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
min-height: 100vh;
background-color: grey;
}
<Heading /> is
export default function Heading() {
return (
<div className="heading">
<header>
<h1>Welcome to the playground!</h1>
</header>
</div>
);
}
export default function Heading() {
return (
<div className="heading">
<header>
<h1>Welcome to the playground!</h1>
</header>
</div>
);
}
missymae
missymae13mo ago
looks like you need to give .heading a grid-area maybe yeah, you have all components in 1 div, and heading and main have some content, so they display in the first div, which is the first part of your "heading heading" area
CDL
CDL13mo ago
it's done I just didn't paste it 😛
missymae
missymae13mo ago
fixed? nice
CDL
CDL13mo ago
nah not fixedhaha I just didn't paste the extra code
missymae
missymae13mo ago
lol
CDL
CDL13mo ago
body {
display: grid;
grid-template-areas:
"heading heading"
"section1 section2"
"section3 section4";
grid-template-rows: 100px 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
min-height: 100vh;
background-color: grey;
}

section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white;
/* Set the background color you prefer */
padding: 1rem;
text-align: center;
}

.heading {
grid-area: heading;
}

.section1 {
grid-area: section1;
}

.section2 {
grid-area: section2;
}

.section3 {
grid-area: section3;
}

.section4 {
grid-area: section4;
}

h1 {
font-size: 3.2em;
line-height: 1.1;
}
body {
display: grid;
grid-template-areas:
"heading heading"
"section1 section2"
"section3 section4";
grid-template-rows: 100px 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
min-height: 100vh;
background-color: grey;
}

section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white;
/* Set the background color you prefer */
padding: 1rem;
text-align: center;
}

.heading {
grid-area: heading;
}

.section1 {
grid-area: section1;
}

.section2 {
grid-area: section2;
}

.section3 {
grid-area: section3;
}

.section4 {
grid-area: section4;
}

h1 {
font-size: 3.2em;
line-height: 1.1;
}
CDL
CDL13mo ago
this is the result if i stick a border on
.heading {
grid-area: heading;
border: 1px solid red;
}
.heading {
grid-area: heading;
border: 1px solid red;
}
No description
CDL
CDL13mo ago
so it's not picking up the 2nd heading in
body {
display: grid;
grid-template-areas:
"heading heading"
"section1 section2"
"section3 section4";
body {
display: grid;
grid-template-areas:
"heading heading"
"section1 section2"
"section3 section4";
@ἔρως
ἔρως
ἔρως13mo ago
can you put this in a jsfiddle or codepoen?
missymae
missymae13mo ago
grid-area: heading heading but still, you have all the content in 1 div, so I think there will still be a problem grid-area: heading only spans the first heading area (grid gives me nightmares, so I could be wrong 100%)
VinceAggrippino
VinceAggrippino13mo ago
.heading has the grid-area: heading property, but that grid area name is only used on the body element. Since .heading isn't a child of body, it doesn't see that grid at all. If I'm reading everything correctly, the resulting HTML is like this:
<body>
<div id="root">
<div>
<div class="heading">
<header>
<body>
<div id="root">
<div>
<div class="heading">
<header>
ἔρως
ἔρως13mo ago
we need to see this in execution to property determine the exact cause
CDL
CDL13mo ago
yeah i cant seem to post it anywhere as theres multiple js files
ἔρως
ἔρως13mo ago
we're checking html and css, not javascript you can grab the generated html, strip all scripts and you have the stuff you need maybe some style trimming as well
CDL
CDL13mo ago
ah 1 moment then
VinceAggrippino
VinceAggrippino13mo ago
Run it, let it render, then copy the HTML and CSS out of the browser's dev tools.
ἔρως
ἔρως13mo ago
yup, just yoink the html of the body tag
CDL
CDL13mo ago
<div>
<div class="heading">
<h1>Welcome to the playground!</h1>
</div>
<main>
<div class="section1">
<div class="card">
<h2>Counter</h2>
<button>+</button>
<span><h2>Let's start!</h2></span>
</div>
</div>
</main>
<footer>
</footer>
</div>
</div>
<div>
<div class="heading">
<h1>Welcome to the playground!</h1>
</div>
<main>
<div class="section1">
<div class="card">
<h2>Counter</h2>
<button>+</button>
<span><h2>Let's start!</h2></span>
</div>
</div>
</main>
<footer>
</footer>
</div>
</div>
this? lol sorry this is new to me
ἔρως
ἔρως13mo ago
yes, without the script and the <body> you could format it a little, but it's small enough now, the css
MarkBoots
MarkBoots13mo ago
your css class .heading needs grid-area: heading
ἔρως
ἔρως13mo ago
then, throw it into codepen
CDL
CDL13mo ago
learned something new there
MarkBoots
MarkBoots13mo ago
ah, there is an empty div
CDL
CDL13mo ago
it has it already @MarkBoots :/
ἔρως
ἔρως13mo ago
you have an html salad the body has the grid nothing will work why so many divs remove the div around the div around the h1
VinceAggrippino
VinceAggrippino13mo ago
Welcome to React 😅
ἔρως
ἔρως13mo ago
put the h1 in the body
MarkBoots
MarkBoots13mo ago
think it is the <app> div you can do body > div { display: contents }
ἔρως
ἔρως13mo ago
No description
ἔρως
ἔρως13mo ago
all i did was remove all the useless divs and the main
CDL
CDL13mo ago
lmao
ἔρως
ἔρως13mo ago
and then added grid-area: heading to h1
CDL
CDL13mo ago
I dont see all of those divs in vsc, that's an issue
ἔρως
ἔρως13mo ago
that's it
CDL
CDL13mo ago
coz of react doing react things
ἔρως
ἔρως13mo ago
everything is rendering in the <main> which means, you need to move the grid to the <main>
MarkBoots
MarkBoots13mo ago
it is the <app> component that creates the div. so body > div { display: contents }
VinceAggrippino
VinceAggrippino13mo ago
I think you might be able to accomplish what you're trying to do without React breaking it if you use subgrid... I need to play with it for a minute.
ἔρως
ἔρως13mo ago
or just remove the div can you show the raw react code for that? look here: you have a <div> change it to <> then the closing change to </>
CDL
CDL13mo ago
changed that, but it did nothing
ἔρως
ἔρως13mo ago
it should can you do the same for the new html? talking about what you did here
CDL
CDL13mo ago
<div id="root">
<div class="heading">
<h1>Welcome to the playground!</h1>
</div>
<main>
<div class="section1">
<div class="card">
<h2>Counter</h2>
<button>+</button>
<span><h2>Let's start!</h2></span>
</div>
</div>
</main>
</div>
<div id="root">
<div class="heading">
<h1>Welcome to the playground!</h1>
</div>
<main>
<div class="section1">
<div class="card">
<h2>Counter</h2>
<button>+</button>
<span><h2>Let's start!</h2></span>
</div>
</div>
</main>
</div>
codepen updated
ἔρως
ἔρως13mo ago
move the grid to #root instead of body
CDL
CDL13mo ago
😱 FINALLY.
ἔρως
ἔρως13mo ago
did it work?
CDL
CDL13mo ago
yeah it fixed it
ἔρως
ἔρως13mo ago
if it did, im only getting started
CDL
CDL13mo ago
No description
ἔρως
ἔρως13mo ago
your grid styles are below optimal
CDL
CDL13mo ago
yeah it was a mixture of me being shit, and chatgpt being unhelpful so its bad + bad
ἔρως
ἔρως13mo ago
if you want more than 4 divs, it will bork excuse my french, but ... wtf?
MarkBoots
MarkBoots13mo ago
let the semantic elements begin 😉
ἔρως
ἔρως13mo ago
why the hell did you ask chatgpt? that's like asking a blind to pick between red and pink
CDL
CDL13mo ago
😂 I sometimes post code in there to see what it spews out in fairness it did have the grid in #root
ἔρως
ἔρως13mo ago
garbage
CDL
CDL13mo ago
but i moved it
ἔρως
ἔρως13mo ago
🤦‍♂️ the grid has to be on the parent of what you want to style
CDL
CDL13mo ago
thats' when I reset the css and started again ah ok ahh.. ok root makes sense
ἔρως
ἔρως13mo ago
you though you could throw the grid somewhere and everything would magically work?
CDL
CDL13mo ago
I just completely forgot about #root tbh I had my parent/child positions all mixed up
ἔρως
ἔρως13mo ago
it's fine, it's a really weird thing anyways and you were overwritting it by using <div> there, instead of <>
CDL
CDL13mo ago
yeah I get that now I've made many notes 😄
ἔρως
ἔρως13mo ago
can you update the css then? because i still have a lot to talk about
CDL
CDL13mo ago
updated there is styling on the button it just wont work in codepen as it's.. react complications nvm it added lol
ἔρως
ἔρως13mo ago
it's fine your grid is still broken because you still have a big mistake, which is the same we spoke before you have the entire grid layout in #root but you have elements in main that expect a grid why it works? miracles, i guess
VinceAggrippino
VinceAggrippino13mo ago
I just added grid-column: span 2 to div#root and it looks like what you were going for. .header isn't actually using the heading grid area, though. It's just 100% of its parent's width;
No description
ἔρως
ἔρως13mo ago
#root {
display: grid;
grid-template-areas:
"heading heading"
"section1 section2"
"section3 section4";
grid-template-rows: 100px 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
min-height: 100vh;
background-color: grey;
}
#root {
display: grid;
grid-template-areas:
"heading heading"
"section1 section2"
"section3 section4";
grid-template-rows: 100px 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
min-height: 100vh;
background-color: grey;
}
this is what you have in the #root
CDL
CDL13mo ago
I think it's a react thing perhaps?
function App() {
const [count, setCount] = useState(0);

return (
<>
<Heading />
<main>
<Counter count={count} setCount={setCount} />
</main>
</>
);
}
function App() {
const [count, setCount] = useState(0);

return (
<>
<Heading />
<main>
<Counter count={count} setCount={setCount} />
</main>
</>
);
}
the main is containing a component
import "./Counter.css";

export default function Counter({ count, setCount }) {
return (
<div className="section1">
<div className="card">
<h2>Counter</h2>
<button onClick={() => setCount((count) => count + 1)}>+</button>
{count === 0 ? (
<span>
<h2>Let's start!</h2>
</span>
) : (
<span>
<h2>
You clicked {count} time{count === 1 ? "" : "s"}
</h2>
</span>
)}
{count !== 0 && (
<button onClick={() => setCount((count) => count - 1)}>-</button>
)}
</div>
</div>
);
}
import "./Counter.css";

export default function Counter({ count, setCount }) {
return (
<div className="section1">
<div className="card">
<h2>Counter</h2>
<button onClick={() => setCount((count) => count + 1)}>+</button>
{count === 0 ? (
<span>
<h2>Let's start!</h2>
</span>
) : (
<span>
<h2>
You clicked {count} time{count === 1 ? "" : "s"}
</h2>
</span>
)}
{count !== 0 && (
<button onClick={() => setCount((count) => count - 1)}>-</button>
)}
</div>
</div>
);
}
ἔρως
ἔρως13mo ago
what you have here is bad, really bad
CDL
CDL13mo ago
isnt that just a standard grid setup?
ἔρως
ἔρως13mo ago
you still should use grid, but i suggest this:
#root {
display: grid;
grid-template-rows: auto 1fr;
grid-gap: 10px;
min-height: 100vh;
background-color: grey;
}

main {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
#root {
display: grid;
grid-template-rows: auto 1fr;
grid-gap: 10px;
min-height: 100vh;
background-color: grey;
}

main {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
then remove all grid-area
vince
vince13mo ago
I wouldn't add any styling to #root, isn't that kind of unconventional?
CDL
CDL13mo ago
no idea tbh @vince I'm very new to react day 2 actually lmao
vince
vince13mo ago
I think #root is just an element that React targets to inject html into
ἔρως
ἔρως13mo ago
this works A LOT better
No description
ἔρως
ἔρως13mo ago
yes, it is
CDL
CDL13mo ago
yeah in my dumb terms, all of the jsx pushes into that div id="root"
ἔρως
ἔρως13mo ago
that's what react does, actually
CDL
CDL13mo ago
forgot I had collab mode on codepen for some reason lol https://codepen.io/Laing91/collab/LYqZyya you make a change, we all see the change 😁 Ok so here you're creating a grid, then creating a grid inside the grid.. gridception.
#root {
display: grid;
grid-template-rows: auto 1fr;
grid-gap: 10px;
min-height: 100vh;
background-color: grey;
}

main {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
#root {
display: grid;
grid-template-rows: auto 1fr;
grid-gap: 10px;
min-height: 100vh;
background-color: grey;
}

main {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
ἔρως
ἔρως13mo ago
yeah, there's nothing wrong with that also, you can just use gap instead of grid-gap and gap works for both grid and flex
CDL
CDL13mo ago
ah yes is it possible to add a border to the grid areas? its added them to the classes here, so the counter one is not the actual area size didnt know if that was possible or not
ἔρως
ἔρως13mo ago
it is the whole area
No description
ἔρως
ἔρως13mo ago
the "gap" isn't spacing: the gap is stuff that doesn't exist it's not space: it's nothing it's occupied by void you can use outline
CDL
CDL13mo ago
ah maybe im wrong then, i just meant because of this
No description
CDL
CDL13mo ago
I mean it doesn't matter, the plan is to build 4 little mini-apps and stick 1 in each corner lol just something fun
ἔρως
ἔρως13mo ago
if you use what i gave you, it will work if you keep trying to fiddle with what you had before, it wont work
CDL
CDL13mo ago
I did swap in your code above and it seemed to flip it upside down xD
ἔρως
ἔρως13mo ago
define "it" you skipped the last line
then remove all grid-area
you will see it works you forgot section2
CDL
CDL13mo ago
what html did you have on your one?
ἔρως
ἔρως13mo ago
the same i didn't change it but now, you did you put a div with class section2 inside the div with class section2 inside the main you don't need the section1 or the section2 one of them has to go
CDL
CDL13mo ago
aight it looks better (the playground didnt center again but it works on my live one so I dunno)
ἔρως
ἔρως13mo ago
you aren't centering the text add the text center to the h1
CDL
CDL13mo ago
ah there we go awesome it works aight now I can finally sleep 😂 I greatly appreciate your patience and help you've been awesome
ἔρως
ἔρως13mo ago
you're welcome by the way wtf is that .card? you're overcomplicating the html again <div class="section1"> <-- remove this
CDL
CDL13mo ago
ah so the card is the component in react
ἔρως
ἔρως13mo ago
and add the border to it the card has now the size of the area
CDL
CDL13mo ago
this bad boy
import "./Counter.css";

export default function Counter({ count, setCount }) {
return (
<div className="section1">
<div className="card">
<h2>Counter</h2>
<button onClick={() => setCount((count) => count + 1)}>+</button>
{count === 0 ? (
<span>
<h2>Let's start!</h2>
</span>
) : (
<span>
<h2>
You clicked {count} time{count === 1 ? "" : "s"}
</h2>
</span>
)}
{count !== 0 && (
<button onClick={() => setCount((count) => count - 1)}>-</button>
)}
</div>
</div>
);
}
import "./Counter.css";

export default function Counter({ count, setCount }) {
return (
<div className="section1">
<div className="card">
<h2>Counter</h2>
<button onClick={() => setCount((count) => count + 1)}>+</button>
{count === 0 ? (
<span>
<h2>Let's start!</h2>
</span>
) : (
<span>
<h2>
You clicked {count} time{count === 1 ? "" : "s"}
</h2>
</span>
)}
{count !== 0 && (
<button onClick={() => setCount((count) => count - 1)}>-</button>
)}
</div>
</div>
);
}
oh sweet how'd that happen
ἔρως
ἔρως13mo ago
it happened because you removed the useless div i told you to
CDL
CDL13mo ago
ahh ok
ἔρως
ἔρως13mo ago
by the way, instead of using a ghastly red border, you can use a better background
CDL
CDL13mo ago
the border is honestly just so I can see where the area goes, it's not to stay 😛 but yeah, I will add some cool backgrounds when I finish
ἔρως
ἔρως13mo ago
background-color: rgba(0, 0, 0, 0.1); this is less eye-hurting and looks A LOT better
CDL
CDL13mo ago
ok that is much better, true
ἔρως
ἔρως13mo ago
then you can throw a border-radius: 7px or something and BAM! it looks better you can also see the full area
CDL
CDL13mo ago
in this codepen, how would I add css for the other 3 areas? just to get the full picture
ἔρως
ἔρως13mo ago
you use the .card class and everything happens like magic seriously, add 3 of there: <div class="card"></div>
CDL
CDL13mo ago
oh wt so it just creates a natural order -> ->
ἔρως
ἔρως13mo ago
yes
CDL
CDL13mo ago
very interesting.. I didn't know that i guess if I want to place an item specifically I just move it's positioning in the html
ἔρως
ἔρως13mo ago
no but yes you can do that
CDL
CDL13mo ago
the challenge will be how to do that in react tbh
ἔρως
ἔρως13mo ago
well, shouldn't be too hard
CDL
CDL13mo ago
I'll make some more mini apps then look at it again, so ill keep this little chat open in case I do have to sleep though 😮
ἔρως
ἔρως13mo ago
sleep
CDL
CDL13mo ago
but thanks again! this was very very helpful
ἔρως
ἔρως13mo ago
you're welcome
vince
vince13mo ago
yw, all me
ἔρως
ἔρως13mo ago
lol but seriously, you tend to overcomplicate remember the "kiss": keep it simple, stupid
CDL
CDL13mo ago
that is the big issue for me, it's either overcomplicating it, or overthinking it
ἔρως
ἔρως13mo ago
yes, it's a very huge issue
vince
vince13mo ago
The way to stop overcomplicating html is to just use it more but idk how much time you wanna spend on it
ἔρως
ἔρως13mo ago
i think the best is to remember that divs are containers, and you can re-use them
CDL
CDL13mo ago
well, im learning react, and i want to build a lot to learn, as i cba reading all the time, so ill have to get better at it as I go for sure, lots of html/css/js ill just have to remember, simplicity is key.
ἔρως
ἔρως13mo ago
exactly you also don't have to use <div> as a parent for everything you can just have <>
CDL
CDL13mo ago
Will start using that more
ἔρως
ἔρως13mo ago
im not a react expert, but you should
VinceAggrippino
VinceAggrippino13mo ago
This allows your heading to use the body's grid without changing any of your JSX or other CSS:
/* Use the body's grid all the way down to the heading element */
#root, #root div:has(> .heading) {
/* Make this element take up the entirety of its parent's grid */
grid-column: 1 / -1;
grid-row: 1 / -1;

/* Use the parent's grid to layout this element's children */
display: grid;
grid-template: subgrid / subgrid;
}

#root div:has(> .heading) .heading {
grid-area: heading;
}
/* Use the body's grid all the way down to the heading element */
#root, #root div:has(> .heading) {
/* Make this element take up the entirety of its parent's grid */
grid-column: 1 / -1;
grid-row: 1 / -1;

/* Use the parent's grid to layout this element's children */
display: grid;
grid-template: subgrid / subgrid;
}

#root div:has(> .heading) .heading {
grid-area: heading;
}
No description
ἔρως
ἔρως13mo ago
that's exactly what i call "overengineered" it's so overcomplicated why try to make it work with the existing html if the existing html is not that good to begin with? im not saying he's bad: he just did the "mistakes" any beginner would do and yes, you present a very valid solution
VinceAggrippino
VinceAggrippino13mo ago
Challenges like this are fun for me. I wouldn't say it's the best way, but I got a chance to use subgrid and it does solve the original problem. I wouldn't be qualified to judge what code is good or bad in any language. Sidenote: I don't think the unidentified fragments (<>...</>) were always an option in React. I think every component required an enclosing element. So, there were a lot of unnecessary DIVs. It might still be like that in some tutorials. I'm not 100% certain, though.
ἔρως
ἔρως13mo ago
im not saying that it is good or bad just saying that it is a bit too complicated for what's needed still a very valid solutions but using 2 grids is easier to understand than subgrids and honestly, i just told him to use it because i've seen others to use it. and yeah, div spam is bad i always saw it as a "phantom" element it's there just to make the parser happy
b1mind
b1mind13mo ago
Could just ignore #app div with display: contents; fyfi (future)
VinceAggrippino
VinceAggrippino13mo ago
Very cool! I never heard of this one before. It looks like there are a couple of minor gotchas, but it would be very useful here. It would be useful here, but there are three levels of elements between the one with the grid-areas and the one that wants to use them. As @ἔρως pointed out, that HTML (JSX) could eliminate a couple of those extra elements and display: contents (which I had to look up) could be used to ignore the necessary div#root.
CDL
CDL13mo ago
you what now
ἔρως
ἔρως13mo ago
i love to keep stuff simple, and that can have the unintended effect of complicating stuff a little bit
b1mind
b1mind13mo ago
No 😂 You just don't like nice things
ἔρως
ἔρως13mo ago
i actually used display: contents before i just think it doesn't make sense to work around sub-optimal html when you can implement it in a much simplified way that works great - maybe even better
b1mind
b1mind13mo ago
You literally don't like nice things 😂 If any place is, the #app div is the place Side note, I'd never use my body for my grid wrapper either though. It's nice to just ignore the frameworks injected div though.
ἔρως
ἔρως13mo ago
meanwhile, i used that div for the grid wrapper instead of ignoring it and putting stuff in the body and then using the parent inside the div inside the framework injected div it's nothing to do with "nice" things
b1mind
b1mind13mo ago
You obviously don't use these frameworks cause that is even worse of a pattern #depends but styling the injected div is typically going to be outside. Yes you can just slap the .wrapper class on it but then it lives in a very specific place. Not in the components. Again you do you.. I'm just dropping my knowledge 😉 Its handy af imo you know about it and don't like it does not mean its bad ffs SvelteKit also does it by default cause they know ❤️
ἔρως
ἔρως13mo ago
i didn't say it's bad, just "sub-optimal" or "not that great to being with"
b1mind
b1mind13mo ago
Just saying.... Then whats your point Epic
ἔρως
ἔρως13mo ago
that it is sub-optimal and not that great to begin with
b1mind
b1mind13mo ago
I'm done mate... not worth my spoons
ἔρως
ἔρως13mo ago
adds complexity for very little gain
CDL
CDL13mo ago
just realized that all i have to do to add more apps to this is just add a new card eh.. so I could just build a page of apps lmao. I'm actually not sure how I'm going to do this with all these apps in 1 page, it could get very messy, but screw it, let's learn.
Amine
Amine13mo ago
Any luck with the react course @CDL ?
CDL
CDL13mo ago
eh.. not really. honestly I'm just looking at what concepts I need to learn, youtubing web dev simplified, checking out mdn, then trying to build stuff lol my brain will not let me focus on a tutorial/reading documentation for more than like 15mins right now, so im just trying to build and study when i need to learn new things If I can pull off this page I wnat to make though.. big brain.. big brain.
Amine
Amine13mo ago
cool cool
CDL
CDL13mo ago
christ i have to try and figure out how to implement this codepen into my react codebase now well I somewhat have it.
CDL
CDL13mo ago
No description
CDL
CDL13mo ago
nvm I have it. Just needed to give card a min-height: 100%
Amine
Amine13mo ago
Meanwhile
No description
Amine
Amine13mo ago
my brain hates me
CDL
CDL13mo ago
what in the hell
Amine
Amine13mo ago
Yeah am going to do a case study on this architectural building project for my graduation wait i just realised am in the wrong chat ! sorry 😅
CDL
CDL13mo ago
hahahaha, no worries
Amine
Amine13mo ago
.
Want results from more Discord servers?
Add your server