Need FrontEnd Advice
I need some advice, i am working on a frontend of a project, i am using html, css and js for it. The thing is its my first project which involves layouts, responsiveness and js functionality.
I am able to design and layout things as required. But the thing is , my css is not the best, in terms of extensibility. I have used flexbox for layouting stuff.
I am able to complete a design, but then if i make some changes, multiple things break, so i need to be very careful while changing things.
So my question is, now that i have written and completed some part of the design, how can i refactor or improve the css so that my responsiveness and the part where changes need to be made is done smoothly. Any tips or guides would help a lot.
118 Replies
Like how do i refactor my current css and how should i write better css for upcoming designs??
Like sometimes i change the font size, my whole card layout breaks. This is just an example
I would rewrite it. I rarely take a first draft to a finished product. First draft is just learning how you should have done it and then afterwards do it the way you should have. Then later on after doing some work go back to before that work and do it again.
With web development it's super easy to get yourself stuck in a corner.
As for your layout breaking, are you using
em that changes based on your font-size while rem remains constantAlso i am a beginner at this, with no real world experience
The most important thing is getting something finished, it may not be pretty but first projects are better finished than perfect but unfinished. Doing things wrong is a good learning experience of things to avoid in the future
So u mean, first time, i simply code the design, and then once its done, i would do it again in an optimized way
How much experience do you have generally? Have you gone straight into making a website or do you have experience making small things?
Pretty much yeah. A lot of my stuff I get it working and then I go back and see if I could have done it better, often it might require rebuilding it from scratch. It's hard to see all of the challenges you'll face from the start
I have made some stuff with bootstrap
To be specific. I have cloned a websites desktop design,
I also cloned youtube design and made it reponsive as much as i could. This is where i learned most of the stuff
I have no job experience i just graduated and i got this project to work on because i had nothing to do as of now
I make the page "done" first, then go through each component step by step looking at all the viewport breakpoints for it and adjust the css with media queries at those steps, and if its really broken, then consider changing the implementation entirely (something like maybe I should've used flexbox here instead of grid etc).
Regarding the size u ask, for font i use pixels
Tbh i use what makes my design complete
This way I always wonder why my height property does not work sometimes
Please note that this channel is for asking about code-specific things. This question is better suited for #discussions
in this case, i believe it's best to cut your losses and start over, but, it's even better if we can see the code
this way, we can fix your stuff, if it isnt a total loss
Yes I understand. So suppose i am designing a whole page, so what would you suggest, recheck once whole page is done or recheck after each element or part of the page is done?
Firstly only use
rem for font-size because it plays well to user settings.
Secondly I meant if you used em for sizes on the cards as that would be affectedAlso, mods , sorry if this is not the place to discuss this. Didnt knew
Iteration is an important part of web development. There's no such thing as wasted time, starting over is just restarting with hindsight, and be prepared to restart more than once
For my divs, I usually use width as 100% if i know my div is gonna tak entire parent width. As for height, i used fixed pixel heights
I wasn’t expecting u guys to fix things as i would have asked it seperately. I actually needed advice. Because so far the design is achieved but the code is not the best but not the worst too
divs take 100% of their parent width by default because they're block elements, and I would use percentage for heights, or even better let their sizes be controlled by a bigger container that's flexbox or grid
all advice is guessing without something tangible we can see and smell and comment on and maybe fix
maybe it isn't so bad and a few tweaks make your design more robust
or make it stop breaking
maybe it actually suffers from brittle bones and needs to be discarded
maybe it has too many divs
I would recommend doing neither of those things. If you're using block elements they already use max width. If using grid or flexbox they can deal with widths. As for heights you may use
min-height but avoid setting a height or max-height as it can't adapt (unless you are making it adapt such as cutting off text with...)
The height may have been causing issuesThis is the problem. But later I learned about grids
How can we control heights using flexbox?
idk read the docs or something 🤣
Yes i think fixed heights is causing the issue
yes, but everything is just guestimating
generally speaking grid is for layouts with 2 dimensions, flexbox is for layouts with a single dimension (either a row or a column)
Also, i will actually share something which i fixed but i bet there is a better way to design it for different screen sizes. I will share it in few hours as its midnight here. I will share the codepen for it
alright
Alright guys. Thanks a lot. And i will surely use discussion section next time
Thanks for this as well
in this case, since you're sharing code, it's probably better here, but listen to what the mods say
im not a mod
Yes i will share it here
Do i need to close this post or keep it as it is?
keep it, you will need it tomorrow
Alright
do you use git?
Yes. Not a pro but i use it
I use github desktop for pushing and pulling from the repos
you might want to check at git pages as well
I used to do that like 3 weeks ago, as easy to use it is, I dont see how it can makes recovering back to old versions easy I never got to that point
Git pages, where u host ur website if i am not wrong? Like mostly the frontend part
my point is learn the commands either via Bash or via the vscode terminal
For older version, i go to the original repo and go to commit history.
And in my vscode, i use timelines if anything goes wrong
Yeah ik. I should start learning them
yes, which may remove the need for the codepen, and you also host your cool stuff
Well, for hosting my stuff which i have already, i use netlify. I found it easy to use. I will give the github pages a try as well
setting up live github pages is as easy as go to repo > repo settings > pages > select main branch, boom its live in 2 mins
yup, and you can host simple html pages with images
Okay. I will give it a try
https://codepen.io/Zeshan-Merchant/pen/xxmedJb
Here is the code pen. So what basically is happening is that i take data from backend(i have created dummy data) and display it inside my cards. The whole page is layouted using flexbox. Now where the problem occurs is inside the cards. If i dont use media queries, that cards are fine and they take up the whole remaining width inside the div(which is set to display flex, justify-content:space-between). But then on larger screens, the cards look to small, so when i tried to increase the height of the cards, or the fontsize of any of the span inside the cards, the whole card layout breaks. How i fixed it was i used media queries and then gave new values to the div and the span elements as well. Which involves giving weird values like for example
Here, this i had to do to achieve the design on different screen sizes but then i have to mostly change all the values inside the cards.
right column has a background color, which has the description in it.
Whenever i change the card size or something, the right column kind of breaks, due to which i usually need to give it more padding so that the backrgound color fits as per the design.
right and left column are wrapper divs for applying flexbox.
If you change anything, the font size or cards size, the card breaks.
I have achieved the design but the code is not properly refactorable if thats the word for it. I hope i was able to explain the issue
Since i was able to achieve the design on my screen and on bigger screens(using media queries), i just want to know how could i do it better in a way that when i make changes, things dont break much. Also , inside the codepen, it would be better if you see the css from
i will check in a bit
Yeah sure
im sorry, but im struggling to visualize the problem
can you take screenshots of it?
Yes i will send it
thank you
here i increased the cards height(for bigger screens), and then the design kind of broke. This could be fixed by adding media queries and changing the styles again but i think its not the best way to do it
you do have a huge problem...
this one
exactly
i fixed it by adding media queries and applying new sets of styles inside the media queries.
if i were you, i would just start over, and try to do JUST the basic
just format it
don't add colors, fonts and all that bullshit
what would you suggest? what am i missing?
NOTHING, except the base formatting
alignments and that's it
oh, so you mean try to optimize only the layout?
no
im saying, gut everything
start fresh
this is a lost cause
So i will use grids maybe and should i use percentage for the inside spans?
like their width or padding?
so if i use percentage, the will resize on bigger screens if i increase the cards size?
you should just gut it all out
you are using a paragraph as a span, and a span as a div, and then you have divs inside of divs inside of divs inside of divs
and the side menu div is completely unresponsive and you won't be able to make it responsive
side menu, i removed the html as my focus was cards. So i did not add in the code pen.
thank god
i had no issues with them being not responsive.
it's on the side
outside the header
you can probably make it have a position absolute and some js fuckery
but seriously, it's a brittle design
yeah mate ik, thats why I asked u guys about how should i rewrite it.
that's why im saying to gut it all out
I did complete the design but not in the best way possible
you will have pain after pain after pain to make this work
you mean, you designed it somewhere else before?
one last thing i would ask you, since I was able to make the design, what things i should consider in rewriting the code?
basic alignment first
like no, i was more worried about displaying the json, i learned it on this project and I had no idea how to do it. Once it was done, i simply focused on getting the design done.
use outlines with different colors to see how things behave
make sure those basic building blocks work properly
use appropriate tags appropriatedly
u mean class and id names?
for example
<div id="nav"> should be a <nav> tagohh.
okay.
<span><p> [...] </p></span> <-- this type of stuff shouldn't exist at all
just do the basics first
put this as version 0.1 alpha
now start on 0.2 alphaokay.
i remember doing this because i wanted to style the key and values differently.
the paragraph isn't allowed inside the span
so the title key would have different style and title value different style.
span is for inline text, a paragraph is ... a paragraph
oh, okayyy.
your code isn't bad, but it's just an accumulation of bad decisions
i already thought of this as you said me now, i will use grids which will cut off my wrappers divs, then inside my cards, i will simply have 5 divs aligned with the help of grid.
Now inside of the divs, i need to think, how can I optimize them
yes i agree.
i just need to figure out a better way to style my key value pairs.
you shouldn't use a div, as it is a meaningless element
it literally has absolutely no meaning at all what-so-ever
so what should I use inside the cards?
for me as a beginner, its like a general element which works mostly everywhere. thats the only reason i use it.
your cards would be better served as an
<article> with an <header> tag that has the <h1> title, and the stars and stuff can be just a list you bash into place
the content can then be a paragraph with the textokayy, maybe i need to look more into these tags and when to use what.
im just giving an example that's a little more semantic
it's better than div div div span p div
Yes.
Alright then, i will work on it and try to optimize it and try to be more semantic.
just ping me here when you have something basic
don't make it flashy, just align stuff
Since you read my css, were the classes and id names fine? for someone reading the code? despite using too many divs
all i need to know is that was it understandable? the names?
i will focus on the alignment and layout and then beautify it. Got it
well, i think there's improvement
you would benefit from sass
you have absolutely useless classes
like any example if u remember?
i just gave you one
all those classes have no value
yes, as I told earlier, i wanted to give different styles to each of the key value.
they all should be a single class
which also lead to using p inside spans
but they don't have different colors, they all have the same colors
it's just 2 different classes
in fact, 1 class and you style the children
yeah, now that u pointed it out, it makes no sense as they almost have same styles.
almost?
3 of them are exactly the same
1 of them is a bit different, but fits the same
the descKey had the width set differently, that was the ony different property.
so improvement in classes and id names
use more semantic elements
and cut out as much elements as I could to layout my stuff.
and keep it simple.
you can get access to it with :first-child instead
im sure all of this can be greatly reduced to just styling all the thingies, then pick the :first-child and style it a bit separatedly
and the :last-style as well
if you decide to add a "contributors" or "donations" thingy, your design requires a massive re-write
with what i said, it requires that you add the html
and touch no css at all what-so-ever
yes so this way i will have only 1 class for all the similar elements
i could also do this with my buttons.
you might not even need a class for the cards
if you use
.card and then style everything inside, then you're setthe more you say, the more i can visualize it. I hope I am able to pull it off though, whatever you have said so far.
you can
if you start by doing it simple
just do the cards for now
yes, my first goal should be to make the layout simple, with minimum elements and classes.
i think this will actually solve most of the problem.
yeah sure.
Thanks for your time . Tbh i was not expecting such a detailed review and help. Thank u so much.
you're welcome
this is why i needed the code
I actually enjoy learning from other people
and disagree with pushing it to a discussion
your thingy was just, in short "how to fix this design?"
yes, well what other said also was correct but they told in a general way.
it was more like how to maintain responsiveness for bigger screens. Since i was also using fixed px values at most of the places.
that's not even the biggest issue, by far
and i dont consider it an issue entirely
alright then. If i close this post, I cannot access it again?
because it has a lot of info tbh.
yup, you cant
just work on it, when post here again
Okay
good luck