
Ask HN: Learning modern web design and CSS - themanr
So I&#x27;ve been mostly doing back end stuff for a few years. My ability to fix float issues in IE6 just isn&#x27;t relevant any more. What&#x27;s the best way to get an understanding of modern CSS and web design? Preferably simple approaches that don&#x27;t involve horrible, huge, redundant class names or bloated, overbearing frameworks.<p>This is for a couple of personal projects. I may ultimately end up hiring designers but I want to know what I&#x27;m taking about and I&#x27;d want to be able to maintain their output.
======
bbx
Web Design is easy! You can learn it in 4 minutes: [http://jgthms.com/web-
design-in-4-minutes/](http://jgthms.com/web-design-in-4-minutes/)

More seriously, if you fancy some reading, I wrote a free HTML and CSS
tutorial: [http://marksheet.io/](http://marksheet.io/)

Before you dive into specific frontend feature like Flexbox or Grid or even a
full CSS framework, I believe you should first understand the basics of markup
and styling, which are very _simple_ but not _easy_.

Because otherwise, you will start using tools you don't fully understand, and
will struggle extending or fixing your design.

After that, you can simply Google whatever style you want to implement, or
problem you're facing, "just in time", and end up on CSS Tricks or Stack
Overflow.

~~~
mattmanser
If he's talking about being able to fix float issues, he doesn't need to be
told what an <img> tag is.

One of the frustrations with tutorials like yours is that it's assuming no
knowledge, where I (and I assume he) has plenty of knowledge of HTML/CSS, it's
just we don't have knowledge of _modern_ css.

~~~
tootie
Yeah, I'm in the same boat as OP. I thoroughly understand the tech stack and
even the modern wave of npm build tools. Where I am completely lost is if you
ask me to match a comp. Like what do I with Photoshop or Sketch and how do
design CSS rules to make it real?

------
afarrell
If you find yourself wanting to get a solid mental model of CSS, I highly
recommend blocking out a few evenings to work through The Pedantic Guide to
CSS [1] as if you are a university student studying the complexities of
cellular metabolism. A Spaced Repetition app like Anki [2] is really helpful
here. EDIT: I've found that for best effect, write flashcards that lead you to
think through some reasoning about how a layout attribute works.

You might also find the games Flexbox Froggy[3] and Grid Garden[4] useful.

[1] [http://book.mixu.net/css/](http://book.mixu.net/css/)

[2] [https://apps.ankiweb.net/](https://apps.ankiweb.net/)

[3] [http://flexboxfroggy.com/](http://flexboxfroggy.com/)

[4] [http://cssgridgarden.com/](http://cssgridgarden.com/)

------
kraitis
Work through this:

[https://learn.shayhowe.com/html-css/](https://learn.shayhowe.com/html-css/)

followed by this:

[https://learn.shayhowe.com/advanced-html-
css/](https://learn.shayhowe.com/advanced-html-css/)

and you'll be good to go. The tutorial, while covering the essentials, is
working towards creating this:

[https://learn.shayhowe.com/practice/organizing-data-with-
tab...](https://learn.shayhowe.com/practice/organizing-data-with-
tables/index.html)

------
zichy
Read this:

[https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-
tricks.com/snippets/css/a-guide-to-flexbox/)

[https://css-tricks.com/snippets/css/complete-guide-grid/](https://css-
tricks.com/snippets/css/complete-guide-grid/)

~~~
baby
I was going to post the same. I think the learning has to be split in three
components:

* CSS: learn how to use flexbox and grids, the rest will follow.

* HTML5: this is pretty straight forward to learn IMO, maybe someone has a good resource? (that does not talk about JS at all preferably)

* JS: This one is tricky, if you really want to learn more about JS it is its own big world. Two advice I would give: learn the latest JS version and use a transpiler. The most popular framework seems to be React, so learn how to use that.

~~~
scottmf
Simply use create-react-app and don’t worry about setting up Babel and Webpack

~~~
baby
Looks promising [https://github.com/facebookincubator/create-react-
app](https://github.com/facebookincubator/create-react-app) !

That's the one part of the stack I still need to learn (becuase jQuery is not
trendy anymore apparently)

------
hacking-n-stuff
I used Codecademy to learn HTML and CSS essentials. Once you have that down,
you'll want to learn a responsive grid CSS framework like Bootstrap or
Materialize. Then learn some basic javascript to make the page behave in cool
ways (making elements appear/disappear, scroll and animate, etc). I recommend
learning jQuery for that (a javascript library) but avoid any bloated
frameworks like React or Angular when you're first starting out.

Once you understand those three foundational concepts (basic HTML/CSS, a CSS
framework, basic javascript) try just building some websites from scratch or
editing templates to make them look how you want. It'll be tough at first but
you'll gradually get the hang of it!

------
arsalanb
Build actual websites. Code a lot. Pick a website every week that fits your
definition of "modern web design" and try to clone it. This will be
exponentially better than joining an online course and reading/watching a
video about building something.

Actual learning happens when you're applying knowledge, not merely ingesting
it.

------
z3t4
If you are not good at the CSS basics, then learn the CSS basics, for example
where in the CSS file you should place something for it to override something
else. Then read through the CSS spec. there are a lot of nice new features
like border-radius, linear-gradient, box-sizing, and finally display: inline-
block is now a standard feature! Then there are animations and SVG support!
You can make a lot with just CSS now a days, no need for JavaScript. Speaking
of JavaScript a lot of back-end stuff has now moved to the front-end. You can
now have the database on the client side. And you can develop a web app like
if it where an off-line native app, blurring the lines of what a "native" app
is, as users doesn't have to notice a difference.

------
gexla
Just like you learned the back-end stuff. Practice, practice, practice. Just
as you went through multiple levels of understanding with the back-end, you'll
do the same with the front-end.

Here's an idea. Do you do any sort of journaling? Maybe make a daily scratch-
pad in HTML / CSS and just include whatever junk you happen to feel like
throwing in there through the day. Think of it as web doodling. Screw around
with different layouts, images, colors, emoji's and maybe even some actual
doodles you put together in a graphics editor. Do this every day and you'll
probably get pretty quick at making HTML / CSS changes.

The design part is another rabbit hole. Are you talking about making it look
good? UI? UX? Probably the answer is more practice there also.

------
herbst
I would suggest getting into Bootstrap and try to understand their paradigm.
Many other CSS Frameworks work like that, and you should do your own in a
similar way to keep it clean. Bootstrap will also help you makeing pretty
things in a standard way fast, plus the examples and templates all come with
the typical modern layouts.

~~~
weavie
Following the pareto principle, learning Bootstrap (or equivalent other
framework) will let you design 80% of your site in 20% of the time..

------
singletoon
A recent and very valuable resource for modern web design :
[https://internetingishard.com/html-and-
css/](https://internetingishard.com/html-and-css/)

------
morgunkorn
My first step would be to learn both the display: flex and display: grid
syntaxes. They eliminate the need of 90% of the hacks of floats/clearfixes,
and table layouts. For this you can get familiar with the overall
possibilities with these games: \-
[http://flexboxfroggy.com/](http://flexboxfroggy.com/) \-
[http://www.flexboxdefense.com/](http://www.flexboxdefense.com/) \-
[http://cssgridgarden.com/](http://cssgridgarden.com/)

The next big bite to take is responsive web design, using Media Queries, which
involves getting mostly rid of any fixed width and rely on %, calc() and
modern units like vw and vh to size your content.

CSS Tricks has a great article to get started: [https://css-tricks.com/css-
media-queries/](https://css-tricks.com/css-media-queries/)

Good luck to you on this new adventure!

------
hacker_9
For my site [0] I found downloading a modern HTML5 template, and tweaking it
as needed from user feedback, helped me learn a lot. Just using the dev tools
and toggling CSS styles on and off helps a lot for intuitive understanding.

Also learning techniques when you need them helps with retaining knowledge.
For example on desktop the features list alternates the image on the left and
right per row, but for mobile when everything becomes one column I wanted the
image to always be underneath the text. A few google searches later led me to
the flex box which can easily reorder the cells by just changing the 'order'
property. That's now a piece of modern CSS I can recall again for later use.

[0] [http://www.waveform3d.com](http://www.waveform3d.com)

------
teniutza
I would recommend starting with [0]. It takes you on a progressive ride from
"no layout" to "modern" layout (apart from "grid", but after learning the
"classical" stuff, "grid" is not so complicated and there are a ton of
resources around).

I would also suggest getting acquainted with specificity, early on. Other
resources I can recommend are the Almanac[1] and the Snippets[2] from CSS
Tricks.

[0] [http://learnlayout.com](http://learnlayout.com)

[1] [https://css-tricks.com/almanac/](https://css-tricks.com/almanac/)

[2] [https://css-tricks.com/snippets/css/](https://css-
tricks.com/snippets/css/)

------
ezero
I think
[http://bulma.io/documentation/overview/start/](http://bulma.io/documentation/overview/start/)
might be what you are looking for. Flexbox based framework, clean class names,
no JavaScript.

~~~
a_w
I would add Pure as well: [https://purecss.io/](https://purecss.io/)

------
KGIII
Covered previously:

[https://news.ycombinator.com/item?id=11048409](https://news.ycombinator.com/item?id=11048409)

The answers should still be salient.

I used to be able to say, "Right-click and read the source." I'm not sure
that's realistic anymore.

~~~
themanr
Thanks. That was two years ago. I wonder how much has changed since then?

~~~
herbst
This is pretty much the time Bootstrap 4 is in beta now. So not much has
changed actually

~~~
KGIII
I haven't coded a page in years. So, pardon my ignorance, but is Bootstrap
really required?

I ask because I too am marginally interested in creating something. Though, I
suspect I'll just cheat and use a CMS like Wordpress and a bog-standard theme.

~~~
Santosh83
As someone looking to learn web design for my personal site too, from what I
can see Bootstrap and similar frameworks aren't really needed provided you're
willing to learn all the tech utilised by them and do it from scratch
yourself, either for learning purposes or because you prefer to avoid
frameworks for some other reason.

The frameworks exist for professional web designers who don't want to redo the
same stuff over and over, and want code with maximum browser compatibility and
covering edge cases, bullet-proof and so on - not goals that you would
probably prioritise when just starting out learning or creating hobbyist
sites.

I'm considering using a CMS or a WYSIWYG editor too, but the prospect of
creating a minimal, semantically rich and modern site in HTML5/CSS3, is too
tempting to not spend the time learning the ropes. Besides, efficient use of
these CMS/editors themselves take fair bit of effort, which we might as well
employ to learn the foundations, or so I feel. :-)

~~~
KGIII
As tempting as it is, the project I have in mind will be time consuming, so
the devoted time is probably best spent generating content - in my case.

Like you, I am sorely tempted to undertake an in-depth learning. Years ago, I
wrote a comprehensive HTML tutorial. It covered the entire spec. Of course,
that was v. 2.0, so it's hardly valid today.

It touched on CSS, the tutorial, but I'm not sure it was even a complete
standard back then. I think it was just a single page in my tutorial.

My, how times change.

------
thirdsun
I like the Learn Enough tutorials and recommend them particularly for
newcomers that like to find an introduction and overview to a topic. In this
case the HTML and CSS / layout courses should be relevant:

\- HTML: [https://www.learnenough.com/html-
tutorial](https://www.learnenough.com/html-tutorial)

\- CSS & Layout: [https://www.learnenough.com/css-and-layout-
tutorial](https://www.learnenough.com/css-and-layout-tutorial)

However the CSS tutorial doesn't include CSS Grid yet, which is pretty much
essential these days and therefor requires further reading elsewhere. CSS Grid
is a major milestone for layout on the web. Don't miss it.

Additionally another important aspect that is often overlooked: Naming things
in CSS. Since you're working with a global namespace it's important to find a
sane naming system. I recommend BEM, which is easy to grasp:
[https://csswizardry.com/2013/01/mindbemding-getting-your-
hea...](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-
bem-syntax/)

------
mattbee
[http://www.htmlandcssbook.com/](http://www.htmlandcssbook.com/) taught me the
groundwork despite its age. Lea Verou's CSS Secrets is a great book to pair it
with - will show you lots of avenues of CSS and layout ideas that you'd never
have found on your own. You probably also need some reference on Flexbox &
Grid but depends how far you want to go!

~~~
teniutza
CSS Secrets is wonderful but I wouldn't consider recommending it for learning
CSS as it assumes at least a solid base. What I do believe someone new to CSS
or currently learning would find useful is the overall approach. Until reading
it, I did not really take any interest in being DRY with my CSS.

------
tudorw
You could start by reading the specifications to get up to speed on the scope
of contemporary HTML, not quite sure where you are coming from technically so
if it sounds condescending just fill me in with where you stand now ;)

[https://www.w3.org/standards/techs/html#w3c_all](https://www.w3.org/standards/techs/html#w3c_all)

~~~
steindavidb
Going straight to the spec is really great for HTML/CSS. Also worth looking at
the CSS snapshot from w3
[https://www.w3.org/TR/css-2017/](https://www.w3.org/TR/css-2017/)

------
thehoneybadger
Do the same thing you might do when browsing open source code on github. Go to
websites of well known companies or by people that provide web design
services, view source, look at a feature that doesn't make sense at first, and
then search on Google or Mozilla Developer Network or Stackoverflow for more
details, and then write a practice page in a basic text editor.

As far as design, you cannot go wrong with bootstrap. However, to really learn
design, do not study web design. Study things like Bahaus, billboard design,
marketing and messaging and PR, how to compose for simplicity, SEO
optimization techniques and their influence on design, etc. Seriously, the
people that learn how to make websites and want to tell you how to make
websites absolutely and hilariously SUCK at design.

------
a_w
"Learn Enough CSS & Layout to Be Dangerous" by Lee Donahoe and Michael Hartl

[https://www.learnenough.com/css-and-layout-
tutorial/](https://www.learnenough.com/css-and-layout-tutorial/)

------
have_faith
On the CSS side you'll want to learn Flexbox, Sass, Auto-prefixer (life
saver), and maybe something like BEM naming conventions for "regular"
websites. There are CSS-in-JS options if you're building large web apps with
something like React or Angular but it's still up for debate if this approach
is better.

On the design side it's difficult to know what to recommend. I would learn
simple UI/UX principles. Lots of designers use either Sketch or Adobe
Experience Design as opposed to something like photoshop these days. Makes for
much quicker prototyping of designs.

~~~
amirouche
I tried sass on rather big project where several people contribute to it. It
seems like Sass doesn't help keep the code clean. A scheme like css-
architecture [1] or oocss is required to keep the css code manageable.

[1] [https://github.com/jareware/css-
architecture](https://github.com/jareware/css-architecture)

~~~
larzang
Sure, SASS is just a power-tool, it still requires a sane architecture.

CSS of any flavor should be modular and semantic, it's just that SASS gives
you a big leg up once you're comfortable with those concepts. It's still on
you not to shoot your leg off with criss-crossing @extends and deeply nested
selectors and and snowflake components.

------
jmkni
Pluralsight has a new feature called _Paths_ which I think is pretty good, I
would recommend working through their HTML5 path -
[https://www.pluralsight.com/paths/html5](https://www.pluralsight.com/paths/html5)

------
ollerac
Pick a few CSS frameworks, say Bootstrap, MDL web components, and Bulma.

Choose 5 components from each that you want to learn how to build.

Look at the source code with the goal of understanding how they're
accomplishing what they're accomplishing.

Try to build a project from scratch, without a framework.

------
fahimulhaq
Take a look at The (Complete) Practical Introduction to CSS

([https://www.educative.io/collection/5191711974227968/5641332...](https://www.educative.io/collection/5191711974227968/5641332169113600))

------
melenaos
Read lea verou book 'css secrets' it's an awesome book for every web
developer. [http://lea.verou.me/writing/](http://lea.verou.me/writing/)

------
Rakeshcetcse15
i want a help for my project. suppose in indeed.com search bar we will put
java,it will so us no of java related job... i need to fetch them and want to
store in excel..in different row.. how to do this any idea?? what script can i
use except python..

------
Lordarminius
_CSS: The Missing Manual_ by David McFarland will get you a long way.

------
newsmania
Google “flexbox”. That is the single biggest new thing replacing floats in
css. You’ll also want to make sure you understand css transitions (they are
very simple).

