The latest articles on DEV Community by Monika Dafouti (@monika631). https://dev.to/monika631 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%2F3592113%2Fa33737bb-9960-4d5b-b8b5-4aec6d49bc00.png https://dev.to/monika631 en Monika Dafouti Sat, 01 Nov 2025 10:42:15 +0000 https://dev.to/monika631/my-first-step-into-frontend-journey-with-this-html-css-project--1d93 https://dev.to/monika631/my-first-step-into-frontend-journey-with-this-html-css-project--1d93 <p>Hey everyone 👋<br> I'm excited to share my first HTML &amp; CSS-based project, which I recently completed —<br> a simple and clean Website Design!</p> <p>💡 About This Project</p> <p>This project is purely focused on frontend design — no JavaScript, no frameworks —<br> just pure HTML and CSS!</p> <p>I built this to improve my web layout and CSS styling skills,<br> and to understand how real websites maintain clean structure and design consistency.</p> <p>The website includes:</p> <p>*A beautiful header &amp; navigation bar</p> <p>*Hero section</p> <p>*Feature/product section</p> <p>*Footer</p> <p>----* What I Learned</p> <p>While working on this project, I learned a lot about:-</p> <p>Using Flexbox for layout alignment</p> <p>Creating responsive designs using media queries</p> <p>Managing folder structure and assets</p> <p>Writing clean and reusable CSS code</p> <p>💻 Technologies Used</p> <p>HTML5</p> <p>CSS3</p> <p>Flexbox &amp; Grid</p> <p>🔗 Source Code</p> <p>You can check out the full source code on my GitHub repo <br> 👉<a href="https://github.com/Monika631/html-css-project1.git" rel="noopener noreferrer">https://github.com/Monika631/html-css-project1.git</a></p> <p>✨ Final Thoughts</p> <p>This project was a big step in my frontend development journey.<br> If you’re a beginner, I highly recommend trying small static projects like this —<br> they help you understand layout, design flow, and responsiveness better than any tutorial.<br> <a href="https://media2.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%2Foeup8xkyqn42dw2io24e.png" class="article-body-image-wrapper"><img src="https://media2.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%2Foeup8xkyqn42dw2io24e.png" alt=" " width="800" height="382"></a></p> <p><a href="https://media2.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%2Fd9mh4pzhpkuh29jm9kxg.png" class="article-body-image-wrapper"><img src="https://media2.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%2Fd9mh4pzhpkuh29jm9kxg.png" alt=" " width="800" height="381"></a><br> <a href="https://media2.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%2F28o1he8fa7omhq27cudd.png" class="article-body-image-wrapper"><img src="https://media2.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%2F28o1he8fa7omhq27cudd.png" alt=" " width="800" height="385"></a><br> <a href="https://media2.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%2Fq58grpbt6ltixgzowlfi.png" class="article-body-image-wrapper"><img src="https://media2.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%2Fq58grpbt6ltixgzowlfi.png" alt=" " width="800" height="348"></a><br> <a href="https://media2.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%2Fja2sso1eovrkztxdsdda.png" class="article-body-image-wrapper"><img src="https://media2.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%2Fja2sso1eovrkztxdsdda.png" alt=" " width="800" height="341"></a><br> <a href="https://media2.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%2F8l2sq16b1fe0ido7ruqo.png" class="article-body-image-wrapper"><img src="https://media2.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%2F8l2sq16b1fe0ido7ruqo.png" alt=" " width="800" height="379"></a><br> <a href="https://media2.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%2Fifr0qv1y0gaj7nysyl9j.png" class="article-body-image-wrapper"><img src="https://media2.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%2Fifr0qv1y0gaj7nysyl9j.png" alt=" " width="800" height="387"></a>My First Frontend Project: UsabilityHub Website Design</p> <p>Would love to hear your feedback ---<br> Drop your thoughts or suggestions in the comments 💖</p> programming webdev beginners career