https://github.com/linkedinlearning/css-layout-code-challenges-3155794
CSS Layout Code Challenges
https://github.com/linkedinlearning/css-layout-code-challenges-3155794
Last synced: 7 months ago
JSON representation
CSS Layout Code Challenges
- Host: GitHub
- URL: https://github.com/linkedinlearning/css-layout-code-challenges-3155794
- Owner: LinkedInLearning
- License: other
- Created: 2021-12-14T16:05:56.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-08-02T12:02:53.000Z (over 2 years ago)
- Last Synced: 2025-07-21T06:50:15.257Z (8 months ago)
- Language: HTML
- Size: 110 KB
- Stars: 26
- Watchers: 4
- Forks: 134
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# CSS Layout Code Challenges
This is the repository for the LinkedIn Learning course CSS Layout Code Challenges. The full course is available from [LinkedIn Learning][lil-course-url].
![CSS Layout Code Challenges][lil-thumbnail-url]
This course with Morten Rand-Hendriksen tests your knowledge with 15 CSS layout challenges exploring the opportunities and intricacies presented by modern CSS layout modules. Challenges range in scope from component-level layouts like horizontal menus to sitewide layouts and responsive layouts across multiple viewport widths. If you want to see how your skills stack up or just learn something new, join Morten for this course.
## Instructions
All the exercise files in this repository are available from the `main` branch. Each movie has one challenge, and the files for each challenge are contained in folders following the `CHAPTER#_MOVIE#` naming convention. As an example, the branch named `01_03` corresponds to the first chapter and the third video in that chapter. For each challenge there is also a solution contained in the `XX_XX_solution` folder.
## Notes
The repository contains two folders named `css` and `assets`. These contain global styles and an SVG used throughout the different challenge movies. In the exercise files for each challenge there is an `index.html` file containing all relevant HTML, and a `current-style.css` file containing CSS to get you started. All your CSS work will be done in the `current-style.css` file for the current challenge. In some challenges you may also need to make changes to `index.html`.
## Installing
1. To use these exercise files, you must have the following installed:
- A code editor (VS Code recommended)
- One or more modern browsers (Chrome recommended)
2. Clone this repository into your local machine using the terminal (Mac), CMD (Windows), or a GUI tool like SourceTree.
3. Open the exercise files for the current challenge you are watching.
### Instructor
Morten Rand-Hendriksen
Developer and Senior Staff Instructor
Check out my other courses on [LinkedIn Learning](https://www.linkedin.com/learning/instructors/morten-rand-hendriksen).
[lil-course-url]: https://www.linkedin.com/learning/css-layout-code-challenges
[lil-thumbnail-url]: https://cdn.lynda.com/course/3155794/3155794-1644861689695-16x9.jpg