CSS Self-Paced Practice Exercises based on CSS Challenges from the website: 100dayscss.com using CSS, HTML & JavaScript. Challenge Started 2023-11-10 and currently undergoing improvements! I am currently working on saving the original challenges and creating updated/hybrid versions with my own preferred styles & colors applied.
More Technologies 📀
Glossary - Overview of Tools & Tech 💻
| Technology | Overview | Release Year |
|---|---|---|
Bash |
Bash is a Unix shell and command language written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell. First released in 1989, it has been used as the default login shell for most Linux distributions and it was one of the first programs Linus Torvalds ported to Linux, alongside GCC. | 1989 |
 CodePen |
CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. It functions as an online code editor and open-source learning environment, where developers can create code snippets, called "pens," and test them. | 2012 |
CSS |
Cascading Style Sheets is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. | 1996 |
Debian |
Debian, also known as Debian GNU/Linux, is a Linux distribution composed of free and open-source software and proprietary software developed by the community-supported Debian Project, which was established by Ian Murdock on August 16, 1993. | 1993 |
ESLint |
ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. It was created by Nicholas C. Zakas in 2013. Rules in ESLint are configurable, and customized rules can be defined and loaded. ESLint covers both code quality and coding style issues. | 2013 |
Font Awesome |
Font Awesome is a font and icon toolkit based on CSS and Less. As of 2023, Font Awesome was used by 30% of sites that use third-party font scripts, placing Font Awesome in second place after Google Fonts. | 2012 |
Git |
Git is a distributed version control system that tracks changes in any set of computer files, usually used for coordinating work among programmers who are collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows. | 2005 |
GitHub |
GitHub is a developer platform that allows developers to create, store, and manage their code. It uses Git software, providing the distributed version control of Git plus access control, bug tracking, software feature requests, task management, continuous integration, and wikis for every project. | 2008 |
HTML |
HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript. | 1993 |
JavaScript |
JavaScript frameworks, such as React Native, Ionic, NativeScript, and Apache Cordova, enable developers to build native and hybrid mobile apps for Android and iOS. Facebook, Google, Uber, and Instagram all use JavaScript to build their mobile apps. JS is fast, efficient, and straightforward. | 1995 |
KDE |
KDE is an international free software community that develops free and open-source software. As a central development hub, it provides tools and resources that allow collaborative work on this kind of software. | 1996 |
Kubuntu |
Kubuntu is an official flavor of the Ubuntu operating system that uses the KDE Plasma Desktop instead of the GNOME desktop environment. As part of the Ubuntu project, Kubuntu uses the same underlying systems. Kubuntu shares the same repositories as Ubuntu and is released regularly on the same schedule as Ubuntu. | 2006 |
Linux |
Linux is a family of open-source Unix-like operating systems based on the Linux kernel, an operating system kernel first released on September 17, 1991, by Linus Torvalds. | 1991 |
 Markdown |
Markdown is a lightweight markup language for creating formatted text using a plain-text editor. John Gruber created Markdown in 2004 as a markup language that is easy to read in its source code form. | 2004 |
Prettier |
Prettier, known for its strong formatting opinions, supports a broad range of programming languages. It seamlessly integrates with the majority of code editors and offers a streamlined set of configuration options. | 2017 |
Ubuntu |
Ubuntu is a Linux distribution based on Debian and composed mostly of free and open-source software. Ubuntu is officially released in multiple editions: Desktop, Server, and Core for Internet of things devices and robots. | 2004 |
VS Code |
Visual Studio Code is a streamlined code editor with support for development operations like debugging, task running, and version control. It aims to provide just the tools a developer needs for a quick code-build-debug cycle and leaves more complex workflows to fuller featured IDEs, such as Visual Studio IDE. | 2015 |
I've been participating in the 100 DAYS CSS CHALLENGE, a creative and skill-enhancing endeavor initiated by Matthias Martin. This challenge involves crafting HTML and CSS snippets daily for 100 consecutive days. It's a self-paced, practical learning process, utilizing CodePen for code development and sharing. The unique aspect of this challenge is its blend of creativity and technical skill, pushing me to explore and expand my CSS capabilities in various ways.
My primary objective with this challenge is to refine and deepen my HTML and CSS skills. Each day presents a new opportunity to experiment with different styles and layouts, enhancing my understanding of CSS intricacies. The goal is not just to replicate the given examples but to add my own creative twist, thereby fostering a more intuitive grasp of web design principles. Completing this challenge will mark a significant milestone in my journey towards becoming a more skilled and versatile web developer.
Engaging in this challenge means dedicating time each day to develop a new CSS snippet. It's a commitment to daily practice and learning, allowing me to steadily build a portfolio of diverse and creative CSS works. While the challenge is structured for 100 days, it offers flexibility. If I miss a day, I can easily catch up. This structure keeps me motivated and ensures a consistent learning curve, with the end goal of not only completing the 100 challenges but also showcasing significant improvement in my CSS skills.
If you're eager to simply see the results of this project, most, if not all of the projects have a Live Demo associated with them. I have linked them all in the overview for each specific project/section. To view these live demos, simply follow the links provided with each project. You'll see them alongside buttons that look like this:
Click the button/link and you should be taken to the Live Demo for that specific project. Please note that some projects don't have a Live Demo, and if that's the case there will not be a button/link. I'm hoping to get all of the projects on the internet at some point in the near future, so check back soon and you might find a link!
I have provided detailed instructions for how to clone/download this repository to your local machine in the Setup Instructions section. In that section, you should find everything you need to be able to get these projects running and working on your own machine. Please note that a few of the projects use external APIs that include verification, so you will need to setup your own accounts/API keys for those services.
If you plan on running the code on your local machine, be sure to check the specific project you're trying to run to see if it needs any additional information or setup for the connections to the API to work. In most cases, I will try to include a `.env.example` file. You will need to open this file, and read the instructions inside to obtain your own API key. Once that's done, you'll need to make sure you've renamed the file from `.env.example` to `.env` only.
If you want to avoid setting up environment variables, check to see if the project has a Live Demo associated with it. For all of the projects that I have hosted on the internet, you'll be able to use them without any API configuration required. This is often a simpler way of viewing more complicated projects, since everything will already be running for you to view, use & explore.
A full list of tech, tools, and other links & resources can be found towards the bottom of this README in the Links & Citations section. |
For detailed installation instructions, please refer to the Setup Instructions section below.
To be able to clone/download & view these projects, or to start learning HTML, CSS, and JavaScript as well as web development in general, you'll need a few essential tools. At a minimum, you should have a basic text editor/integrated development environment, a web browser, and an internet connection.
I used the following:
- Text Editor/IDE: I use Visual Studio Code as my main integrated development environment. VS Code can be customized to work with just about any technology, making it a great choice for a general all-purpose IDE, it also has a large and helpful community for support.
- Web Browser: I prefer to use Google Chrome for their comprehensive set of Chrome DevTools. While most if not all of the tools are available in other browsers/Developer Tools such as Firefox DevTools, Safari Web Inspector, and Edge DevTools, I am most familiar & comfortable with the layout of Chrome.
- Internet Connection: Aim to have at least 2-3 Mbps or more to speed up development, especially if you'll be downloading large files or loading video/image based resources. Most libraries and a variety of public places can have high-speed Wi-Fi available for visitors free-of-charge.
Based on the fact that you're reading this right now, you probably already have a browser & internet connection!
Windows, macOS, and most Linux distributions should include a text editor by default, which in this case should be more than enough to view and edit HTML, CSS & JavaScript files.
For those using mobile devices, I advise switching to a laptop or desktop for a more streamlined experience. While mobile development is feasible on Android or iOS, the ease of a full-sized computer, keyboard, and mouse is unmatched. Visual Studio Code is accessible via most browsers on any device, however, you would still need to serve/host it from another machine. For optimal functionality, a personal computer remains the best choice.
System requirements for these projects can vary due to the fact that they use different amounts of client-side processing power and resources. In general, a recent operating system like Windows, macOS, or a popular Linux distribution usually suffices. Modern computers, especially those purchased in the last few years, should meet these needs adequately.
Performance will heavily rely on your specific hardware setup, including processor speed, RAM capacity, storage type, and graphics card quality. The operating system choice and its configuration also play a significant role in speed.
To give you a practical example, I personally used a Lenovo ThinkPad T480 for the entirety of my recent projects. This laptop, has been great for a variety of daily tasks, including programming.
The computer I used for the entire project features the following specifications:
- Operating System: Kubuntu Linux 22.04
- Processor: 8th Gen Intel Core Duo i5-8350U
- RAM: 16GB DDR4 RAM
- Storage: 512GB SSD of data
- Graphics: Intel UHD Graphics 620
- Display: 14.0" Screen with FHD 1920x1080 resolution.
This configuration was more than sufficient for both my project and other tasks. Interestingly, working on a less powerful laptop has its advantages, such as highlighting inefficient code that consumes excessive resources.
If you're unsure, I recommend testing your setup with the intended software. Should you encounter any errors, feel free to reach out for assistance. Your feedback can also help in making projects more adaptable to diverse hardware, operating systems, and browsers.
Below you will find various methods that are available to download/clone this repository.
Feel free to use whichever option you are most comfortable & familiar with. You can also read GitHub's guide on downloading source code archives & cloning repositories.
💡 Download Method Details Clone with SSH ★
- Ensure SSH Key Setup: Before you can clone with SSH, make sure you have an SSH key set up and added to your GitHub account. If you haven't done this, refer to GitHub's documentation on setting up a new SSH key.
- Copy SSH URL: Navigate to the repository on GitHub. Click the 'Code' button and switch to the 'SSH' tab in the dropdown menu. Click the clipboard icon to copy the SSH URL.
- Open Terminal or Command Prompt: Open your terminal or command prompt. Navigate to the directory where you want the cloned repository to be placed.
- Run Clone Command: Type
git clonefollowed by the copied SSH URL. For this project, that's:git clone git@github.com:itsjordanmuller/50-in-50-html-css-javascript.git- Access Cloned Repository: Once the cloning process is complete, you will have a local copy of the repository. Navigate into the newly created directory to access the repository files.
Note: Cloning with SSH is secure and allows for easy repository updates without repeatedly entering credentials.
Download ZIP File
- Navigate to the Repository: Open your web browser and go to the main page of the repository.
- Find the 'Code' Button: On the repository's main page, locate the 'Code' button. This is usually found near the top right, just above the file list.
- Download ZIP Option: Click on the 'Code' button. A dropdown menu will appear. Select the 'Download ZIP' option from this menu.
- Save the ZIP File: Choose a location on your computer where you want to save the ZIP file and confirm the download.
- Extract Files: Once the download is complete, navigate to the downloaded file. Right-click on the ZIP file and select 'Extract All...' or use your preferred extraction tool. Choose where you want the extracted folder to be placed.
- Access Repository Contents: Open the extracted folder to access the contents of the repository. Note: Downloading a ZIP file is a great way to get a copy of the repository without using Git commands.
Clone with HTTPS
- Copy HTTPS URL: Go to the GitHub page of the repository. Click on the 'Code' button. Under the dropdown menu, select the 'HTTPS' tab and click the clipboard icon to copy the HTTPS URL.
- Open Terminal or Command Prompt: Access your terminal (Linux/Mac) or command prompt (Windows). Navigate to the directory where you want the repository to be cloned.
- Execute Clone Command: Type
git clonefollowed by the copied HTTPS URL. In this case:git clone https://github.com/itsjordanmuller/50-in-50-html-css-javascript.git- Enter GitHub Credentials: If prompted, enter your GitHub username and password. This step is usually required the first time you use HTTPS to clone a repository.
- Access Cloned Repository: After the cloning process completes, a local copy of the repository will be created. Navigate into the directory that was just created to start working with the files. Note: HTTPS cloning is straightforward but may require you to enter your GitHub credentials more frequently compared to SSH.
Clone with GitHub CLI
The GitHub CLI (
gh) provides a convenient way to interact with GitHub from your command line. Here’s how to useghto clone the repositoryitsjordanmuller/50-in-50-html-css-javascript:
Install GitHub CLI: If you haven't already, you need to install the GitHub CLI. You can find installation instructions on the official GitHub CLI page.
Authenticate GitHub CLI: Open your terminal and authenticate the GitHub CLI using the command
gh auth login. Follow the prompts to complete the authentication process.Clone the Repository: To clone this repository, use the following command:
gh repo clone itsjordanmuller/50-in-50-html-css-javascriptThis command will clone the repository into a new directory named
50-in-50-html-css-javascriptin your current working directory.Navigate to the Repository: Once the cloning process is complete, navigate into the repository directory with:
cd 50-in-50-html-css-javascriptStart Working: You now have a local copy of the repository and can begin working on it.
Note: The GitHub CLI streamlines various GitHub operations and is particularly useful for those who prefer command-line tools.
★ When I have the option, I personally prefer to use the
Clone with SSHmethod. Alternatively,Download ZIP Filecan be a quick and easy way to simply download the files without a terminal or Git.
An easy start into the challenge with a custom build number with gradient.
Used on almost every website by now, simple but impressively animated it becomes a real eye-catcher.
Not as challenging as the real pyramids in Egypt, but the shadow path is not easy.
The best are always websites that do not need a loading status. If they do, here would be a calming one.
In a world of numbers, it is important to be able to interpret them correctly. Beautiful statistics help to capture these data.
Who of you knows how many social media profiles you have already created? For a refreshing twist, you can also create one yourself.
The three cornerstones of any application? Brought together in the smallest possible space.
At first glance impossible to implement with CSS, but filters make this possible too.
The perfect time of day and the perfect weather to program in peace. The raindrops even shatter on the ground.
Classic, noble, modern or playful? What do you want your favorite watch to look like?
These boots are made for walking. Where are they going and for how long?
I'm quite sure, you already know what obsession means. But you can look it up anyways.
An idea for a transition between user overview and profile page.
Which side of the card do you want to use? Either drive or fly to work in the morning?
Yes, you can actually drag and drop a file in there. But don't worry, the upload process is faked.
It appears, wobbles, changes its shape and disappears again. Just like that.
CSS makes even the impossible possible. Can you find out how it was done?
I thought for a long time about the best way to achieve this effect. In the end, the solution was easier than expected.
Why use CSS when you can use JavaScript? Selectors can be wildly combined with each other.
Surprise your visitors with a nice animation instead of a simple "request sent".
If you have questions/feedback, I would love to hear from you. Thanks for stopping by! - Jordan Muller
Please feel free to reach out if you have any suggestions or run into any issues with viewing this project.
I am always looking for feedback from other people! I'd be more than happy to answer any questions you may have as well as assist with getting the project working on your machine.
Be sure to view the Setup Instructions in the README, as well as any specific README files for that specific project as they contain more details and may already have the answer to your question(s)!
100 Days CSS Challenge provided by Matthias Martin on 100dayscss.com
| LICENSE.md |
|---|
|