ember-learn / ember-learn/guides-source

CSS issue in Ember Guides

Open
#1,709 7 comments 0 reactions 1 assignee Claimed by @Devashish0210 View on GitHub
Dominant language
HTML
Stars
161
Forks
512
Avg merge
4d 9h
Merged PRs (30d)
4

Description

| Stage | Start Date | Release Date | Release Versions | | Relevant Team(s) | RFC PR |
| :---: | :--------: | :----------: | :--------------: | --- | :--------------: | :----: |
| Accepted | 28/07/2021 | Unreleased | ember-source | ember-data | Ember Learning Team
| ---------- | ------------- | ------------ | v3.26.1 | v3.26.1 | ------------ |

# Summary
This feature will create a copy of the CSS file on our device at the time of running the command "ember new super-rentals"

# Motivation
To add simplicity to the guides.

# Detailed design
In the current version of the Ember guides, there is only one CSS file that serves the purpose of decorating our Super Rentals Ember app. This CSS file has to be downloaded separately through a link which is given to us in the guides.

The issue that I have faced recently while following the guides is that I had accidentally skipped the download link for the CSS file since it is not defined under a broad CSS heading (it is just a simple paragraph containing text and a link). When I could see visible changes in the expected output given in the guides and the output I was getting on my localhost, I knew the exact root cause of my issue(missing CSS file) because I have worked with a few guides before. So I immediately scanned the Guides thoroughly and found the link that I had missed and downloaded the file. A new user might not know the cause of the issue and if for instance a new user faces an issue similar to mine, the user is likely to be disheartened and skip the guides completely.

The CSS file is majorly responsible for making any webpage/app look attractive. Therefore, if a user does not download the CSS file, they will see a huge difference in the app generated by their system versus the screenshots of the expected output in the guides.

# How we teach this
To fix this issue, I would suggest the following steps -
* 1) At certain relevant points throughout the Ember Guides, we can add the CSS code for the users to copy into the CSS file. Basically, teaching the user how to do CSS.

* 2) The main problem with Solution 1 mentioned above is that we are working on Ember Guides and not CSS Guides, so teaching the user how to do CSS is not out prerogative. Hence we can temporarily have a small dynamic sub-heading called "CSS" (I am not the best at naming things, apologies) that contains the link so that even the most dumbest of users cannot miss it.

* 3) As mentioned above, Solution 2 is just a temporary fix to the problem. To fix the problem of the missing CSS file once and for all, we can make it so that when the user creates a new Ember app by running "ember new super-rentals" on their terminal, Ember automatically loads the CSS file onto their device. This way, we can skip telling the user anything about the CSS file at all since it all happens right at the time of creation of the app.

Presto! Problem Solved

# Drawbacks

# Alternatives

# Unresolved questions

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.