Samreen | Frontend Dev
@dev_samreen
-- Frontend Developer | HTML & CSS -- Laravel Intern --Want to Freelance on Fiverr 🔗 http://samreenzafar.github.io
Media Queries (Responsive Design) 👉 Use @media to make sites responsive. 👉 Breakpoints: 576px (Mobile), 768px (Tablet), 992px (Laptop), 1200px (Desktop). 📱 Mobile-First → min-width 🖥️ Desktop-First → max-width #CSS #ResponsiveDesign #Frontend
🚀 Built a Button Hover Effects project using just HTML + CSS 🎨 👉 Pure frontend ✨ no JS needed 👉 Clean + responsive design 🔗 Check it out here: [github.com/samreen-fronte…] #HTML #CSS #Frontend #WebDev
![dev_samreen's tweet image. 🚀 Built a Button Hover Effects project using just HTML + CSS 🎨
👉 Pure frontend ✨ no JS needed
👉 Clean + responsive design
🔗 Check it out here: [github.com/samreen-fronte…]
#HTML #CSS #Frontend #WebDev](https://pbs.twimg.com/media/G1Wgot_XoAA0dHb.png)
Just built a Simple Landing Page for a product/service! Hero section Call-to-action button Fully responsive & easy to customize Check it out on GitHub: [YOUR_REPO_LINK] #WebDevelopment #HTML #CSS #LandingPage #Frontend
![dev_samreen's tweet image. Just built a Simple Landing Page for a product/service!
Hero section
Call-to-action button
Fully responsive & easy to customize
Check it out on GitHub: [YOUR_REPO_LINK]
#WebDevelopment #HTML #CSS #LandingPage #Frontend](https://pbs.twimg.com/media/G1WEPJKWYAABCZ6.jpg)
👩💻 Hi, I'm Samreen Zafar — a Frontend Developer & Laravel enthusiast. ✅ Skilled in HTML, CSS & responsive design ⚡ Experience in Laravel CRUD 🌐 Open to freelance projects worldwide #WebDev #Frontend #HTML #CSS #Laravel
Tags Practice Explored basic HTML tags – headings, paragraphs, lists, links & images. It feels amazing to build from scratch 💻✨ #100DaysOfCode #HTML #FrontendDev
Layouts Practice 🧩Practiced layouts with Flexbox & CSS Grid Built a simple page with navbar, sidebar & footer. Step by step towards clean UI design 🚀 #CSS #Frontend #WebDevelopment
Styling Practice 🎨 Styling practice with CSS Worked on colors, fonts, spacing, hover effects & buttons. Loving how small details bring pages to life 🌟 #CSS #100DaysOfCode #Frontend
Personal Portfolio 🌐Created a Personal Portfolio Page Showcasing my name, bio, skills & projects. This will keep growing as I learn more 💡 #WebDev #FrontendDeveloper #Portfolio
CSS Transitions & Animations 🔹 Transitions: transition: all 0.3s ease; → smooth property changes on hover or state 🔹 Animations: @keyframes, animation-name, animation-duration, animation-iteration-count, animation-delay #CSS #WebDev #Frontend #Animation
CSS Backgrounds & Borders 🔹 Backgrounds: background-color, background-image, background-position, background-size, background-repeat, background-attachment 🔹 Borders: border, border-radius, border-style, border-color #CSS #WebDev #Frontend #Design
CSS Typography 🔹 Fonts → font-family, font-size, font-weight, font-style 🔹 Spacing → line-height, letter-spacing, word-spacing 🔹 Text → text-align, text-transform, text-decoration #CSS #WebDev #Frontend #Typography
CSS Grid 🔹 Container: display: grid; grid-template-columns / grid-template-rows → define structure gap / row-gap / column-gap → spacing 🔹 Items: grid-column / grid-row / grid-area → placement Alignment → place-items, align-content, justify-content #CSS #WebDev #Frontend
CSS Flexbox 🔹 Container: display: flex; flex-direction → row | column justify-content → main axis alignment align-items → cross axis alignment flex-wrap → wrap items gap → space between 🔹 Items: align-self flex-grow | flex-shrink | flex-basis #CSS #WebDev #Frontend
Web development is a book of 10 chapters 👇👇 Chapter 1: HTML 🧱 Chapter 2: CSS 🎨 Chapter 3: CSS frameworks 🧮 Chapter 4: JS ⚙️ Chapter 5: DOM 📃 Chapter 6: Git and GitHub 📲 Chapter 7: React/Angular/Vue⚛️ Chapter 8: Node 🔙🔚 Chapter 9: API and Database 🗄️📄 Chapter 10: Job 🏢
CSS Positioning 🔹 static → default 🔹 relative → shift from normal spot 🔹 absolute → relative to nearest positioned parent 🔹 fixed → stays in place (viewport) 🔹 sticky → relative + fix Offsets → top | right | bottom | left Layering → z-index #CSS #WebDev #Frontend
CSS Display & Visibility 🔹 display: block → full width, new line inline → flows with text inline-block → inline + width/height none → removed from layout 🔹 visibility: hidden; → hidden but space remains 🔹 overflow: hidden | scroll | auto #CSS #WebDev #Frontend
CSS Box Model Content → Padding → Border → Margin 🔹 box-sizing: content-box; (default → width = content only) 🔹 box-sizing: border-box; (width includes padding + border ✅ recommended) * { box-sizing: border-box; } #CSS #Frontend #WebDev
CSS Units & Values 🔹 Absolute: px, pt, cm 🔹 Relative: %, em, rem, vw, vh 🔹 Colors: ‣ Names → red ‣ Hex → #fff ‣ RGB → rgb(255,0,0) ‣ RGBA → rgba(0,0,0,0.5) ‣ HSL → hsl(200,100%,50%) #CSS #WebDev #Frontend
CSS Syntax & Selectors selector { property: value; } 🔹 Element (p, h1) 🔹 Class (.name) 🔹 ID (#id) 🔹 Grouping (h1, p) 🔹 Universal (*) 🔹 Descendant (div p) / Child (div > p) 🔹 Pseudo-classes (:hover, :nth-child) 🔹 Pseudo-elements (::before, ::after) #CSS #WebDev
Who’s hungry? 🍕 I made a Pizza Order Form with HTML + Inline CSS — clean, simple & responsive! Take a look 👇 🔗 [github.com/samreen-fronte…] #CodeNewbie #FrontendDeveloper #HTML #CSS
![dev_samreen's tweet image. Who’s hungry? 🍕
I made a Pizza Order Form with HTML + Inline CSS — clean, simple & responsive!
Take a look 👇
🔗 [github.com/samreen-fronte…]
#CodeNewbie #FrontendDeveloper #HTML #CSS](https://pbs.twimg.com/media/GzP7TeGXgAMnpmc.jpg)
United States Trendler
- 1. Happy Birthday Charlie 24.3K posts
- 2. Good Tuesday 23K posts
- 3. #Worlds2025 23.7K posts
- 4. #tuesdayvibe 2,469 posts
- 5. Bears 91.8K posts
- 6. Romans 10.4K posts
- 7. Pentagon 68.1K posts
- 8. Caleb 51K posts
- 9. Blinken 25.3K posts
- 10. Snell 25.7K posts
- 11. Jake Moody 14.5K posts
- 12. Jayden 23.7K posts
- 13. Commanders 53.6K posts
- 14. Swift 292K posts
- 15. Trump's Gaza 138K posts
- 16. Joji 35.6K posts
- 17. #BearDown 2,489 posts
- 18. Conquered 29.7K posts
- 19. Ben Johnson 4,662 posts
- 20. Martin Sheen 5,616 posts
Something went wrong.
Something went wrong.