Ask HN: Learning modern web design and CSS

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.

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.

Read this:

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

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

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

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

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!

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

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

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.

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

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/

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