A repository of small-medium frontend projects to study & re-create for practice using semantic html & css best practices and tricks. I've created this repository to work in tandem with a new study group I've started in my local community. I'm trying to make it as self-explanatory as possible so others that simply view the repo from elsewhere will still be able to gain value from it.
- Consistency
- DRY Principles
- Semantic Markup
- Progressive Enhancement
- CSS Tricks and No-JS Solutions
- List of all HTML elements
- Resilient Web Design (Read)
- Introduction to Aria via Google
- CSS Architecture Original Inspiration (ITCSS) -- My Version
- CSS Naming Methodology: BEM (Block Element Modifier)
- WCAG Contrast Ratio Tool
- You will need a text editor. The more popular ones are VS Code, Atom, Sublime Text and Brackets
- You will need a SCSS Compiler. Consider using Koala as it works on windows, linux and mac
- You will need Git installed on your computer. If you prefer the command line consider using this. If you prefer a GUI (Graphical User Interface) then Github Desktop is a great option.
- Fork the repo to your github account.
- Clone the repo to your local computer, it doesn't matter where so choose your favorite spot.
- Simply open the index.html in the repo root to navigate through the repo and activities.
- Brackets Users: You can open the repo in the editor and click the live preview button
- Alternatively if you have an existing apache environment setup, create a new vhost pointing to the repo root
- When you want to start an activity, create a new branch on your forked repository with
git checkout -B {activity#}/{yourgithubusername}(i.e.git checkout -B activity1/im-ironclad). - Once you've created the new branch, duplicate the starter-files directory in your desired activity and rename it to your github username (i.e. im-ironclad).
- If you want your completed work to be seen by others on the original repo, push your work to your forked repo and create a PR (Pull Request) to the original repo.
├── activities # Directory that holds all of the Activities
│ └── responsive-navigation # Directory for Activity 1: Responsive Navigation
│ │ ├── example # Directory with example code if you choose to reference it, try not to until you have to!
│ │ ├── starter-files # Directory with a basic file setup to get you started with the activity
│ │ └── index.html # Index html page for the Responsive Navigation activity
│ └── css-dragonball # Directory for Activity 2: CSS Dragonball
│ │ ├── example # Directory with example code if you choose to reference it, try not to until you have to!
│ │ └── index.html # Index html page for the CSS Dragonball activity
│ └── scss-and-bem # Directory for Activity 3: Learn SCSS and BEM
│ ├── example # Directory with example code if you choose to reference it, try not to until you have to!
│ ├── starter-files # Directory with a basic file setup to get you started with the activity
│ └── index.html # Index html page for the CSS Dragonball activity
├── styles # Directory with our main style Architecture (This affects everything but the activity example and starter files)
│ ├── components # Subdirectory with components
│ │ ├── _activities.js # Styles for activity pages
│ │ ├── _global-nav.js # Styles for the global nav
│ │ ├── _helpful-links.js # Styles for helpful-links list
│ │ ├── _link.js # Styles for anchor links
│ │ └── _main.js # Styles for the main element which holds all content
│ ├── generic # Subdirectory with generic reset(s)
│ │ ├── _elements.scss # Styles for our html elements (per project design, if applicable)
│ │ └── _reset.scss # Styles for resetting browser defaults
│ ├── mixins # Subdirectory with mixins
│ │ ├── _animations.scss # Mixins for animations (currently empty)
│ │ ├── _layout.scss # Mixins for layout helpers (i.e. container() mixin)
│ │ └── _typography.scss # Mixins for typography helpers (i.e. font-size() mixin)
│ ├── settings # Subdirectory with variables used throughout our styles
│ │ └── _variables.scss # Variables for our CSS regarding layout, spacing, colors and font styles
│ ├── app.css # Compiled, final version of our SCSS
│ └── app.scss # Uncompiled, development SCSS root file
├── .gitignore # gitignore
├── .index.html # Index html page for the repo root
├── package.json # Package config with scripts, list of dependencies etc.
├── README.md # Project README file
└── yarn.lock # Yarn lock file
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent