HTML describes what is on a web page: headings, paragraphs, lists, links, images and forms. Everything you build from here on attaches to it — Rails renders HTML, your CSS selects...
Work on this lesson in teacher mode. Note Many trainees arrive already knowing HTML. If that is you, read the learning goals, confirm you could do the exercises, and...
Learning goals You can explain how Action Mailer works: mailer classes, text and HTML views, and delivery methods that differ per environment. You can implement and test a mailer...
...from form models rather than from core model callbacks. You know the constraints of HTML e-mail and where to look up what mail clients support. Resources
Browsers differ in which HTML, CSS and JavaScript features they support. This lesson covers how to find out what you can use, which browsers we support, and how transpilation, polyfills...
...degrade gracefully when a feature may be missing — detect it and fall back — in HTML, CSS and JavaScript. You can test an app in browsers and devices you don't...
...plain form helpers are the better choice. You can configure Simple Form's generated HTML to match a project's markup, e.g. with its Bootstrap wrapper configuration.
...use Simple Form. Expect some pain to initially configure Simple Form to use the HTML structure of your MovieDB. After that your forms should be much shorter than before.
...you need; see attributes and whitespace removal 📄 Haml tutorial — ten minutes to the basics 🎮 html2haml — converts HTML or ERB to Haml; useful to check your own conversions, not to skip...
Convert the rest yourself, and check every page still renders the same HTML. Hint The Haml-tutorial doesn't show how to execute ruby-code that isn't...
In a web application you often need to move data between the client (HTML, Javascript) and the server (Ruby, Rails). Step 1: Moving HTML snippets Add a find-as-you...
...search results should happen on the server. So the client is pulling snippets of HTML from the server. For the part of the implementation that lives in Javascript, implement a...
...forms and page updates. The spectrum Multi-page app (MPA). The server renders complete HTML pages. Every link and form submission loads a new page. The browser does almost nothing...
...which limits how fluid the UI can feel. Progressively enhanced MPA. Still server-rendered HTML, but a small JavaScript layer swaps page fragments instead of reloading, handles forms without a...
...or navigation shows up on ten screens, and soon the same twelve lines of HTML live in ten places. Rails partials are the first tool against this; ViewComponent is the...
...You can explain the benefits of a view component over a partial: it hides HTML details behind an explicit interface and co-locates the template with its helpers, its JavaScript...
...brittle. This lesson teaches you to structure JavaScript as reusable components that attach to HTML elements, support multiple instances, and clean up after themselves. Important Work on this lesson in...
Learning goals You can explain what makes JavaScript "unobtrusive": behavior is attached to HTML elements by selector, and views contain no scripts. You can explain the properties of a...
...every interaction reachable and usable with the keyboard alone. You can explain when semantic HTML is not enough and ARIA attributes are needed, and use them correctly. You can explain...
...why built-in HTML elements are preferable to custom JavaScript components: they bring keyboard activation, focus handling and semantics for free, so extend them instead of rebuilding them.
...them in views and forms. You can explain how form input travels from the HTML form through the request into params and onto a record. You can recognize the parts...
In this exercise we take a closer look at how the HTML forms produced by Rails helpers, and how user input in those forms is sent over...
...type or timecop. 📄 Some libraries have a dedicated documentation site, e.g. Unpoly. Web platform (HTML, CSS, JavaScript) 📄 MDN Web Docs — the reference for HTML elements, CSS properties and JavaScript features...
...claims with a small experiment — an irb session or a throwaway script; for the HTML one, a throwaway .html file in your browser: Ruby: Array#tally HTML: the and elements...
...interactive behavior to our interfaces that would not be possible through declarative rules in HTML and CSS alone. Important Work on this lesson in teacher mode. Learning goals
...explain what the DOM is and how it relates to the HTML the server sent. You can select elements by CSS selector, on the whole document or within a parent...
...propagation, dynamically created elements. Three ways to handle a click You have the following HTML structure:
If you want to run Javascript code whenever someone clicks on a ...
..., you can...
We will implement a simplified version of Whac-A-Mole in HTML and Javascript. Start with this HTML structure: Now add some Javascript to implement the following...
...the component makes a request to /foo. The server is expected to respond with HTML containing an element with the same [id] (news in the example). The component parses the...
...a message like Error 404 while loading. When the server does not respond with HTML containing an element with matching [id], the inner text of will be replaced by a...
...that parse data correctly, like the parser gem for Ruby code or Nokogiri for HTML. Regular expressions are a blunt tool that happens to be good enough much of the...
...time. Read Parsing Html The Cthulhu Way for more...
...t need a Rails project for this. Just make a new folder with static HTML and CSS files. You can push it into a new repository in GitLab.
...peak too much into the actual HTML and CSS of makandracards.com. You are likely to have trouble deciding where to draw the line between the blocks. E.g. a structure could...
...it inline within the browser window. You can do so with either the [download] HTML attribute, or by sending a Content-Disposition header when delivering the image. When editing a...
...sees an image review, downloads image. Capybara needs the browser to show an interactive HTML page to be happy. Capybara methods will fail when the browser shows a "Save as...
CSS controls how your HTML looks. This lesson covers selectors, the box model, basic layout, the browser's inspector, and the Sass basics we use in all projects. Important
...a CSS class so you can apply styles. Some layout techniques may require more HTML elements than others, or a different nesting. You can generate paragraphs of random text on...
...default and where you still have to do the right thing yourself, e.g. with html_safe, strong parameters or file paths from parameters. You can set a strict Content Security...
📄 Strong parameters — the Rails answer to mass assignment 📄 How to use html_safe correctly — our card: where Rails' XSS protection ends 📄 Preventing users from uploading malicious content...
...place for what a user may do, usable in controllers, views and tests alike HTML components Partials only Partials and ViewComponent Components have an explicit API, co-locate template, helpers...
...Revision rounds with Claude Design Take a screen of your MovieDB and upload its HTML and a screenshot to Claude Design. Ask it to make the screen cleaner and prettier...
Frontend Frameworks like Unpoly Wysiwyg (What You See Is What You Get) HTML editors Datepickers Sliders Tooltips Dialogs ... Important Work on this lesson in builder mode. Learning goals...
...a class WebsiteSizer that measures the number of characters in the given URL's HTML body: website_sizer = WebsiteSizer.new website_sizer.size_of('https://makandra.com') # => 27448 website_sizer.size_of('https://railslts.com') # => 2145364
...class should cache its results so subsequent calls for the same URLs return the HTML size instantly, without making an additional HTTP request. Write three versions of WebsiteSizer: