- Notifications
You must be signed in to change notification settings - Fork0
This repository offers a collection of hands-on exercises inspired by W3Schools Frontend Development Path, covering a wide spectrum of Frontend development topics in HTML, CSS, and JavaScript.
License
gurjeetsinghvirdee/W3Schools-Frontend-Development-Exercises
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Welcome to the Frontend Development Practice Repository! Here, you'll find a curated collection of W3Schools' frontend development tutorial exercises, accompanied by their solutions and visual results in the form of images. I've created this repository with the understanding that many students may face data constraints for online practice tests. You can download this repository to your local system and practice at your convenience. The solutions, presented in image form, allow you to check and continue your practice even without an internet connection. Whether you're reinforcing your skills or exploring practical exercises in HTML, CSS, and JavaScript, this repository offers a hands-on learning experience. Enhance your understanding with detailed solutions and gain valuable insights into web development. Happy coding!
To get started, simply clone this repository to your local machine. If you're unfamiliar with GitHub or unsure how to do this, follow these steps:
Fork the Repository:Look for theFork button on the top-right corner of the repository's page. Click on it.
Clone the Repository:Now Open your terminal and run the following command:
git clone https://github.com/your-github-username/W3Schools-Frontend-Development-Exercises.git
Navigate to the Desired Topic:Change your directory to the specific topic you want to practice:
cd W3Schools-Frontend-Development-Exercises.git/topic-nameEach topic folder contains exercises related to HTML, CSS, and JavaScript, providing a well-rounded learning experience.
Download for Offline Practice:If you prefer not to use Git or GitHub directly, you can also download the entire repository as a ZIP file.Simply click on the"Code" button (green box) on the GitHub repository page and select"Download ZIP."Extract the contents on your local machine and navigate to the desired topic folder.
Feel free to modify the exercises, create branches, and experiment with your solutions. The more hands-on experience you gain, the better your understanding of JavaScript will become.
Expanded coverage in the repository to include a diverse range of frontend development topics. Encompassing HTML elements, CSS styling, and JavaScript functionalities, the repository provides hands-on exercises solution and explanations for each topic, catering to learners at various skill levels.
| Topics Covered | Description |
|---|---|
| Basic | Tags and document structure. |
| Elements | HTML elements for structuring content, including headings, paragraphs, etc. |
| Attributes | Utilizing HTML attributes. |
| Headings | Creating hierarchical headings. |
| Paragraphs | Structuring text content. |
| Styles | Inline and internal styling. |
| Formatting | Semantic formatting elements. |
| Quotations | Quoting text with<q> and<blockquote>. |
| Comments | Adding comments to HTML. |
| Colors | Specifying colors with hexadecimal and named values. |
| CSS | Linking external stylesheets. |
| Links | Creating hyperlinks. |
| Images | Embedding and styling images. |
| Tables | Constructing tables with rows and columns. |
| Lists | Ordered and unordered lists. |
| Block and Inline | Understanding block and inline elements. |
| Classes | Applying CSS classes. |
| ID | Using unique identifiers. |
| IFrames | Embedding external content. |
| Forms | Building HTML forms. |
| Form Attributes | Configuring form attributes. |
| Form Elements | Input, textarea, select, etc. |
| Input Types | Text, password, checkbox, radio, etc. |
| Input Attributes | Attributes for form elements. |
(⬆️)
| Topics Covered | Description |
|---|---|
| Selectors | Targeting HTML elements. |
| How to add CSS | Inline, internal, and external methods. |
| Background | Styling background properties. |
| Border | Defining border styles. |
| Margin | Adjusting margin space. |
| Padding | Setting padding within elements. |
| Height/Width | Controlling element dimensions. |
| Box Model | Understanding the box model. |
| Outline | Styling element outlines. |
| Text | Formatting text properties. |
| Font | Specifying font styles. |
| Links | Styling hyperlinks. |
| Lists | Styling list elements. |
| Tables | Styling table components. |
| Display/Visibility | Configuring display and visibility. |
| Positioning | Positioning elements. |
| Z-Index | Layering elements with z-index. |
| Overflow | Handling overflow content. |
| Align | Aligning elements. |
| Combinators | Utilizing CSS combinators. |
| Pseudo-Classes | Applying pseudo-classes. |
| Pseudo-Elements | Employing pseudo-elements. |
| Opacity | Adjusting element opacity. |
| Attribute Selectors | Selecting elements by attributes. |
| Rounded Corners | Creating rounded corners. |
| Border Images | Styling borders with images. |
| Backgrounds | Customizing backgrounds. |
| Colors | Working with color values. |
| Gradients | Applying gradient effects. |
| Shadow Effects | Adding shadow effects. |
| Text Effects | Styling text effects. |
| Web Fonts | Integrating custom web fonts. |
| 2D Transforms | Transforming elements in 2D space. |
| 3D Transforms | Applying 3D transformations. |
| Transitions | Creating smooth transitions. |
| Animations | Designing CSS animations. |
(⬆️)
| Topics Covered | Description |
|---|---|
| Variables | Declaring and using variables. |
| Operators | Performing actions on variables and values. |
| Data Types | Understanding JavaScript data types. |
| Functions | Defining and invoking functions. |
| Objects | Creating and manipulating objects. |
| Events | Handling HTML events. |
| Strings | Working with string data. |
| Strings Methods | Employing string methods. |
| Arrays | Managing arrays. |
| Array Sort | Sorting array elements. |
| Array Methods | Efficient manipulation and transformation of arrays. |
| Dates | Working with date objects. |
| Math | Performing mathematical operations. |
| Comparisons | Making logical comparisons. |
| Conditions | Implementing conditional statements. |
| Switch | Using the switch statement. |
| For Loops | Iterating with for loops. |
| While Loops | Implementing while loops. |
| Break Loops | Using break statements. |
| HTML DOM | Manipulating the Document Object Model. |
If you find this repository helpful, your support means a lot! Please consider giving it a star—it's a small gesture but greatly motivates me to continue creating and improving resources.Thank you for your support! ⭐️✨
(⬆️)
About
This repository offers a collection of hands-on exercises inspired by W3Schools Frontend Development Path, covering a wide spectrum of Frontend development topics in HTML, CSS, and JavaScript.
Topics
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.