The latest articles on DEV Community by Mariam ait bella (@mariamaitbella). https://dev.to/mariamaitbella https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F825149%2Fb6a32d1b-cd62-407d-b63b-c82b4d95c19f.jpeg https://dev.to/mariamaitbella en Mariam ait bella Mon, 04 Jul 2022 21:23:00 +0000 https://dev.to/mariamaitbella/color-scheme-generator-js-project-6j8 https://dev.to/mariamaitbella/color-scheme-generator-js-project-6j8 <p>Hello friends!</p> <p>I am presenting to you my last project that I built using, I had lot of fun building it especially the design and the apis part and here is the final result.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdxwc1hslhswwkt92e3n5.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdxwc1hslhswwkt92e3n5.png" alt="Image description"></a></p> <p>This project is very helpful to get the color scheme for your own future projects and it is not the final version I'm looking forward to add other useful features to it and I hope you can tell me you opinions and ideas I can add to develop this amazing project 🙏!</p> <p><strong>Used technologies</strong></p> <ul> <li>HTML</li> <li>CSS(Media queries classes...)</li> <li>JS(Apis...)</li> <li>Figma</li> </ul> <p><strong>My newfound knowledge</strong><br> Apis applications, fetching data from them, turn it to Json and get data from it and also the ability to read apis documentation.</p> <p><strong>What are the challenges</strong><br> Working with data that is fetched from the api and turning it show it to the user, this part is very important and needed more focus from me and effort and I learned many things at the end.</p> <p><strong>Source code</strong><br> You can see the source code by clicking to this link of github repository<br> <a href="https://github.com/mariamaitbella/color-scheme-generator" rel="noopener noreferrer">source code</a></p> <p><strong>Preview</strong><br> Try out the project, review it, and share your thoughts in the comments area below. 🙏<br> <a href="https://mariamaitbella.github.io/color-scheme-generator/" rel="noopener noreferrer">Test the colorScheme</a></p> javascript react css productivity Mariam ait bella Wed, 22 Jun 2022 10:55:53 +0000 https://dev.to/mariamaitbella/my-hometown-homepage-project-with-html-css-5gg1 https://dev.to/mariamaitbella/my-hometown-homepage-project-with-html-css-5gg1 <p><strong>1. The project</strong><br> The website is an introductory page for the city, divided into three parts: the introduction, the activities that the tourist can carry out, and finally the guide card</p> <p><a href="https://mariamaitbella.github.io/hometown/" rel="noopener noreferrer">See page in web</a></p> <p><strong>2. Technologies, languages &amp; tools</strong></p> <ul> <li><p>languages<br> HTML, CSS</p></li> <li><p>tools<br> VSCode, Figma Design</p></li> </ul> <p><strong>3. What I have learned?</strong></p> <ul> <li><p>Html: utility of each tag like div, h1.., img tag and how we can give it a class property or id and refer to it in css.</p></li> <li><p>Css: giving a specific design to a class/id or many , flexbox and its properties and its multiple uses, also I used some properties that css provides for example for the image background and i learned how to work with them and to do something nice with them.</p></li> <li><p>Figma: the ability to extract information about typography, redlines, colors, measurement and more from designed interfaces.</p></li> </ul> <p><strong>4. Link to the source code on github</strong></p> <p><a href="https://github.com/mariamaitbella/hometown" rel="noopener noreferrer">source code</a></p> <p><strong>5. A scrim record of a part of coding process</strong></p> <p><em>For better experience, please minimize the screen and increase the speed of the scrim in the corner right below!</em><br> <a href="https://scrimba.com/scrim/co17a4a0da17d29c3fc6e241d" rel="noopener noreferrer">Coding Scrim</a></p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw25e8au4hwghg3ga3g73.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw25e8au4hwghg3ga3g73.png" alt="Image description"></a></p> programming html javascript css