Ask HN: Learning modern web design and CSS | Hacker News Reader

Ask HN: Learning modern web design and CSS

194 pointsthemanr53 comments

So I've been mostly doing back end stuff for a few years. My ability to fix float issues in IE6 just isn't relevant any more. What's the best way to get an understanding of modern CSS and web design? Preferably simple approaches that don't involve horrible, huge, redundant class names or bloated, overbearing frameworks.

This is for a couple of personal projects. I may ultimately end up hiring designers but I want to know what I'm taking about and I'd want to be able to maintain their output.

View on HN

Web Design is easy! You can learn it 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/

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.

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.

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?

Do you have anything about the new flex or grid systems in some modern browsers like FF on marksheet.io/?

It's funny re: that "web design in 4 minutes" link; while the page got "prettier" over the course of the demo, I found it to get progressively less readable. I'll openly admit I have an astigmatism and have been having more and more trouble with pale/small letters, but I had no idea I had gone over the fold into things like high contrast mode being useful for me.

I'm curious as to if that's just my eyesight falling over as I get older, or trends in "modern design", as I still find the original text-on-canvas, 90's garage style of websites to be much more readable to me, as well as containing much less wasted whitespace.

We don't treat websites like documents anymore. Instead they're interfaces. The old document style is much more readable.

That first link is nice if you're creating a simple informational page about one topic, and it's part of a website without much in the way of a header, navigation, footer, or widget elements.

But as useful as that is at some level, that's not the problem most people struggling with design have. They struggle to make a full website where everything logically fits together and where the structure of the site makes it easy for people to navigate between pages. One which also looks nice and modern compared to large platforms like say, Facebook, Twitter, Medium, etc.

For example, I could design a simple page about a single topic easily enough, but I struggle trying to create a full platform with a flat design aesthetic (or what not).

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/

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

[3] http://flexboxfroggy.com/

[4] http://cssgridgarden.com/

Work through this:

https://learn.shayhowe.com/html-css/

followed by this:

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...

Read this:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://css-tricks.com/snippets/css/complete-guide-grid/

<3 css grid

It works quite nice, only some old browsers that don't support it properly. Still advised to check for grid support via css, but don't think this will be required for long.

https://caniuse.com/#search=grid

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.

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

Looks promising 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)

http://html5doctor.com/ is a great resource for semantic HTML5

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!

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.

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.

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.

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.

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

A recent and very valuable resource for modern web design : https://internetingishard.com/html-and-css/

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://www.flexboxdefense.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/

Good luck to you on this new adventure!

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

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

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

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

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

I would add Pure as well: https://purecss.io/

Covered previously:

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.

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

I'd say not too much from a high perspective. Browser support for new HTML5/CSS3 specs got better, so it's safer to use stuff like flexboxes now. But resources for learning the basics from then should still be relevant, and potentially got updated anyway.

Regarding JS, there's an ongoing shift of hype between various front end frameworks like React, Angular or Vue. Others go back to vanilla JS, as it has better standardization and more power nowadays. But maybe that's not too relevant for you.

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

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.

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. :-)

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.

CSS Grid is now available and constitutes a major change in how layout can (should) be done. Of course there should be fallbacks so older browsers can still get a page that can be used (not pixel perfect).

Writing JavaScript using newer ES5, ES6 features and transpiling it has become more common.

For CSS you can still inspect elements with devtools, fortunately, and that will show you the style properties, even if the styles are set programmatically.

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

- CSS & Layout: 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...

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!

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.

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

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/

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.

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

https://www.learnenough.com/css-and-layout-tutorial/

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.

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

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.

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

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.

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

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

Read lea verou book 'css secrets' it's an awesome book for every web developer. http://lea.verou.me/writing/

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..

CSS: The Missing Manual by David McFarland will get you a long way.

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).

Reply on news.ycombinator.com