I find that a lot of front end developers don't really understand the box model and everything they do is just learned patterns.
Once you understand how things are laid out then it becomes so much more fun and easy.
Now the hard part is the actual design but I wouldn't say that's your job as a developer unless you want to be a designer. Some of the funnest front end work I've done is taking someone's Sketch file and implementing it in CSS. Seeing things come together into an interactive web page.
If you don't want to write CSS or do any design then use a component library like bootstrap, tailwind, etc. Especially for an MVP.
But if you want something more bespoke then get someone to design a web page with documentation of all the sizing like font sizes, margins, padding etc. And learn to implement that, it's a lot easier than many people think. Especially now that you don't need to care about IE.
* The article starts by saying there are two types of boxes. OK. Boxes have an inner and an outer display type. Already confused. Is this in addition to the two previously mentioned types? Does a box have the following: (type, inner display type, outer display type)? "First, we will explain what we mean by block box and inline box". Err what, you haven't mentioned those yet. Are they a type, an inner display type, an outer display type, or all of the above? "If a box has an outer display type of block, it will behave in the following ways". So block/inline are types of inner/outer display types? What is going on?
* Why does there need to be two distinct types of element, which seem to be randomly applied to different elements (divs are block, spans are inline)?
* Why are they called "block" and "inline" when those words don't seem to relate to their behaviour at all?
* Why does inline silently ignore width and height?
* What is an "inline direction"
* What does breaking onto a newline mean, and why do I care? Why not show a diagram?
Then my ADHD brain loses interest and concedes I will never understand.
Don't let yourself create a mental barrier there. Just force yourself to spend a few minutes every day trying new things and you'll be fairly fluent in a couple weeks. It should be pretty painless and it's a skill that will be useful for the foreseeable future.
Train yourself where the best places to massage the code are and most solutions can be found within minutes.
“Work was hard so I quit.” isn’t going to generate much sympathy from the people who put in the effort to learn this stuff.
If you really want to understand CSS, read “CSS: The Definitive Guide” cover to cover. I’m not kidding. Take notes and write code using every single property. Read the Flexbox and Grid chapters TWICE.
Oh, and if you’re upset about the distinction between inline and block elements just wait until you hear about the inline-block display value.. Which, coincidentally, will answer your question about inline heights.
Every browser on the planet makes use of CSS. Every non-trivial website uses CSS. It works. It’s not a toy. Approach it as you would any other advanced technology.
Try to get the preconception that it's boring grunt work out of your head and just dedicate some time to learn it. You'll be much happier later.
Do start with a framework though.
On a serious note, yes, CSS can indeed be dreadful. I learnt CSS back in 2001 when geocities.com/username was the equivalent of today's username.github.io. The web was simpler and wacky. My approach back then was to design simple websites and then tweak it little by little by adding CSS. Much like learning shell scripting, I think it takes a lot of practice to become fluent in CSS. After encountering a lot of weird issues and learning to resolve them or work around them, one learns to be able to write good CSS quickly that does what is desired while avoiding all its surprises and pitfalls.
My biggest learning moments while learning CSS were also some of the most frustrating moments, e.g., very long words breaking float containment, floats breaking div containment, etc. and then searching blogs on the web (Stack Overflow did not exist yet) to find a fix! A typical fix would look like black magic, e.g., add 'overflow: hidden' for Firefox and IE7, add another 'display: block' for IE6, and hope for the best!
After writing HTML and CSS in this manner like a caveman for those 4 years initially, Firebug arrived in 2005. Firebug, the precursor to today's integrated developer tools, was a game changer! I no longer needed to set backgrounds and borders around every HTML element to figure out how they were rendered and what was breaking. Firebug allowed me to inspect the box model and reason about it with ease. Using the browser developer tools and becoming fluent with the CSS box model is critical to learning CSS these days, I think. In fact, these days, I just open the browser developer tools and edit the styles on the fly to see the results live without having to refresh or rebuild the page. Learning CSS has become easier than before, although not as easy as I would like.
After about two decades of making fancy layouts with CSS, I have now gone back to making really simple web pages that just show a header, the content, and a footer. It feels much calmer this way! Yes, I know that MVPs these days are not built like this anymore. Nevertheless, starting simple and doing simple tweaks, at least for a hobby project could be a good way to learn CSS in my opinion!
If your mvp takes off you'll hire a designer to convert your bootstrap design to a professional one. Also notice that because bootstrap is so popular it would be very easy for a designer to build upon the bootstrap css classes.
Understand the box model
Understand flex box basics
Understand padding and margin
Experiment with laying out simple elements on a single HTML file (where you can iterate more quickly), then when you have what you want, make those same changes in your React app
If you spend one hour on each of these, you may be surprised by how capable you’ve become. The rest, as others have said, you will pick up naturally as you work on your project.
[0]: https://nickjanetakis.com/blog/reviewing-tailkit-300-tailwin...
1. You're talking of MVP so I assume the UI doesn't have to be glamorous. Most of the elements you are going to leverage could be UI libs like Material-UI[0] or Ant Design[1].
2. Then, other than components, sometimes you do need some CSS handle layout and such. My choice would be CSS frameworks like Tailwind[2]. Honestly, to make good use of Tailwind sometimes require good CSS skill, but I believe people could still try Adhoc problem-driven approaches - you'll learn things along the way.
In case CSS makes you wonder after the MVP, you could try to expand styles you have been using in Tailwind, to see what's the corresponding CSS is and you'll learn.
(There's also a macro version of Tailwind named twin.macro[3] which fits React better IMO.)
(Tailwind has their official UIs (not free) [4] but I never tried them, it might work for you if you don't care about UI)
[0] https://material-ui.com/ [1] https://ant.design/ [2] https://tailwindcss.com/ [3] https://github.com/ben-rogerson/twin.macro [4] https://tailwindui.com/
If you need anything more custom then you have no choice besides diving into HTML and CSS (getting the HTML right makes the CSS much easier). Or pay someone.
You get infinite choices on the server (choosing Javascript might seem like a good idea, but its probably going to be the one decision holding you back the most. Ruby (Rails) PHP (Laravel) or Python (Django) would actually probably speed up your development even though you need to learn a new language to use them) but when it comes to the browser its though 3 technologies.
Since you chose React, Material-UI is a great solution but Bootstrap works wonders too. These are CSS frameworks that give you lots of working widgets out of the box that you can just tweak.
Number one best piece of advice for noobie CSS development is to BE EXPLICIT. Write 1,000 more lines of CSS then you have to because you are not trying to be clever and use the cascading nature of css to its full advantage. Instead take every HTML component on your page and give it its own class like "p-tag-45" and then write the css for just that component. It will take you longer, but things will behave the way you want them to. And as you advance your knowledge you can start refactoring it with smarter css where smarter means your web page looks and behaves exactly the same with 200 lines of css instead of 600 lines of css.
Good luck! Most people fail to ship their project. Just get it done and ship it and you are already head above water.
1. https://css-tricks.com/snippets/css/complete-guide-grid/
2. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
3. Googling 'css <thing I want to do>' because there is just too much syntax for an occasional user to commit all of it to memory.
I do this at my company (which for whatever reason doesn't like to hire frontend specialists) and we mostly are able to avoid writing any CSS.
[0] https://react-bootstrap.github.io/
As soon as you decide to make something custom, you will need to learn CSS and several other skills.
Why has CSS been a constant on the web when we churn through everything else? Be curious.
I bolt together pre-made components.
No CSS required if you’re just bolting together standard components like lists, buttons, menus, and images with accompanying text cards.
My favourite implementation of this is Callstack’s Paper because I can use it for websites and apps.
Demo:
https://react-native-web-paper-example.netlify.app/
Getting started:
git clone git@github.com:callstack/react-native-paper.git
yarn bootstrap
yarn example webIf your MVP requires a good design with good UX, and you have the budget, someone else can do it for you.
If your MVP does not require a good design or good UX, you can just download some random example and use that.
Keep in mind that using CSS, creating a design and creating a good UX are not the same thing. You can create a terrible UX with a pretty design and lots of cool CSS... Just like you can create an amazing UX and design with minimal CSS.
Don't use a library that will conflict with the styles
You should be good with these
This is also like saying. I want to learn how to build an app, is there any way to bypass the annoying part of having a database.
And like saying, is there anyway to bypass writing a front-end user interface.
It’s part of the stack! Just learn it, like you learned everything else. Once you learn CSS and the box model. You will find that it is easier than every other concept in web development.
If you don't want to use css, your choices are pretty much the following:
- use unstyled html
- use a component library (although any customization is going to require css)
- use a framework that has utility classes. Again it's hard to imagine never writing a line of css.
Honestly, css is a fundamental web technology. If you want to build for the web you're going to have to learn it
If you make stuff capable of graceful degradation (eg for older browsers) then you can give yourself some space and time for graceful and incremental CSS upgrades!
My CSS vocab is still I think very small (and I've a couple of big chunks coming that I want to understand) but it can be used like a scalpel: tiny uses of it can do good things.
I've been writing HTML since it was a thing (90s).
You try to match the source image using css.
You can even find youtubers who compete. I find it pretty entertaining. It helped me get from being afraid of writing styles to enjoying it.
I don't really see it as boring to begin with honestly. I like building UIs, so I don't think it's boring to learn to build UIs.
Watch some videos on how they are used and learn from them. Check this channel out:
https://www.youtube.com/c/TailwindLabs
But, if you want to be a web developer, sooner or later you'll have to grok CSS.
Bootstrap and tailwind would be my other recommendations as they’re well documented and pragmatic.
I tell them they can use 2d canvas, pixijs, threejs or anything that would work in a browser. Amusingly, I haven't had a single taker in a decade
(Someone needed to tell them.)
What’s the problem?
I like css, because it is just incredibly powerful, if you know how to use it. There are still some things that could really improve (css needs a "contains" selector that allows you to e.g. select paragraphs that contain an image, without selecting paragraphs that just contain text). Certain things that are common usecases (like centering a container on a page) are not straightforward in all cases etc.
That being said a lot has improved in the last