Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Ask HN: Learning modern web design and CSS

news.ycombinator.com

Post reply on HN
Print view View original

31–40 of 56 posts

Re: Ask HN: Learning modern web design and CSS

#31

Post by 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

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

Re: Ask HN: Learning modern web design and CSS

#32

Post by kraitis »

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

Re: Ask HN: Learning modern web design and CSS

#33

Post by scottmf »

baby wrote: post #19
zichy wrote: post #4

Read this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/complete-guide-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 l…

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

Re: Ask HN: Learning modern web design and CSS

#34

Post by fenwick67 »

KGIII wrote: post #2

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.

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.

Re: Ask HN: Learning modern web design and CSS

#35

Post by KGIII »

herbst wrote: post #9
themanr wrote: post #3

Earlier quoted context omitted.

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

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.

Re: Ask HN: Learning modern web design and CSS

#36

Post by Santosh83 »

KGIII wrote: post #35
herbst wrote: post #9

Earlier quoted context omitted.

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

Re: Ask HN: Learning modern web design and CSS

#37

Post by tootie »

mattmanser wrote: post #28
bbx wrote: post #24

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…

If he's talking about being able to fix float issues, he doesn't need to be told what an 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?

Re: Ask HN: Learning modern web design and CSS

#38

Post by steindavidb »

tudorw wrote: post #11

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/

Re: Ask HN: Learning modern web design and CSS

#39

Post by franciscop »

baby wrote: post #19
zichy wrote: post #4

Read this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/complete-guide-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 l…

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

Re: Ask HN: Learning modern web design and CSS

#40

Post by Lord_Zero »

bbx wrote: post #24

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…

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