emmet VS modular-html-css-workshop

Emmet is a content/code assist tool to write code faster and more efficiently. It comes standard with VS Code so there is no need for any plugin. The concept is simple: you start typing an Emmet abbreviation, press TAB or 'ENTER', and a full Emmet snippet for that abbreviation will come out.

Not equivalent, but arguably more useful for manual authoring: Emmet [0] was all the range a while back, and I still use it to write HTML. It comes naturally if you're used to writing CSS-like selectors, and mostly gets out of the way.

DSL-wise, I've rather enjoyed Clojure's Hiccup [1].

[0] https://emmet.io/

[1] https://github.com/weavejester/hiccup

LiveCodes provides many of the commonly used developer tools. These include Monaco editor (that powers VS Code), Prettier, Emmet, Vim/Emacs modes, Babel, TypeScript, SCSS, Less, PostCSS, Jest and Testing Library, among others. All these tools run seamlessly in the browser without any installations or configurations. It feels like a very light-weight version of your own local development environment including the keyboard shortcuts, IntelliSense and code navigation features.

local lspconfig = require('lspconfig') local configs = require('lspconfig/configs') local capabilities = vim.lsp.protocol.make_client_capabilities() capabilities.textDocument.completion.completionItem.snippetSupport = true lspconfig.emmet_ls.setup({ -- on_attach = on_attach, capabilities = capabilities, filetypes = { 'html', 'typescriptreact', 'javascriptreact', 'css', 'sass', 'scss', 'less', 'javascript' }, init_options = { html = { options = { -- For possible options, see: https://github.com/emmetio/emmet/blob/master/src/config.ts#L79-L267 ["bem.enabled"] = true, }, }, } })

Emmet is a tool that allows you to quickly generate HTML and CSS code by using abbreviations and expanding them into full code.

One interesting plugin from that list is an amazing tool called Emmet, which helps you write HTML and CSS faster by using simple abbreviations that are then converted into code blocks. However, there is one minor drawback; by default, Emmet is not enabled for React in VS Code.

As you can see, emmet can help you avoid doing repetitive tasks. Please click here to find out more about emmet acronyms.

You might also consider adding snippets or Emmet support to your IDE. This will let you reuse existing templates that you use frequently so you don't have to waste time with the initial development.

I recently started doing this as well. I searched HN and landed on https://learn.shayhowe.com/ . Very useful link

Shay's website is a great resource. It's a little outdated but has valuable information. You could also look into MDN's website, which is actually THE best resource for web development.

I liked Shay Howe's Learn to Code HTML & CSS series. Lesson 5 has some examples of using floats for layout.

Both the Coursera HTML5 course and 100devs use the Learn to Code HTML & CSS by Shay Howe book as reference material.

I also really like http://learn.shayhowe.com