Samreen | Frontend Dev @dev_samreen

-- Frontend Developer | HTML & CSS -- Laravel Intern --Want to Freelance on Fiverr 🔗 https://t.co/oRnU2ruOZ0 fiverr.com/samreenzafar Pakistan Joined June 2025

Tweets

64
Followers

5
Following

50
Likes

61

Samreen | Frontend Dev @dev_samreen

a hour ago

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

0 0 0 11 0

Samreen | Frontend Dev @dev_samreen

a day ago

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

0 0 0 17 0

WebDeveloperMentor @MentorWebDev

2 weeks ago

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 🏢

45 163 1K 47K 1K

Samreen | Frontend Dev @dev_samreen

a week ago

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

0 0 0 10 0

Samreen | Frontend Dev @dev_samreen

a week ago

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

0 0 0 32 0

Samreen | Frontend Dev @dev_samreen

a week ago

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

0 0 0 13 0

Samreen | Frontend Dev @dev_samreen

2 weeks ago

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

0 0 1 25 0

Samreen | Frontend Dev @dev_samreen

2 weeks ago

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

0 0 0 37 0

Samreen | Frontend Dev @dev_samreen

2 weeks ago

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

0 0 0 12 0

Download Image

Samreen | Frontend Dev @dev_samreen

2 weeks ago

HTML Validation Use W3C Validator 🌐 🔹 Finds errors (unclosed tags, invalid attrs) 🔹 Ensures clean, standard HTML 🔹 Better SEO + browser compatibility 👉 Validation = Professional websites 🚀 #HTML #WebDev

0 0 0 9 0

Samreen | Frontend Dev @dev_samreen

2 weeks ago

Bonus HTML Pro Tips 1️⃣ Email Templates → High demand on Fiverr 2️⃣ Blade (Laravel) → @extends, @section, @yield 3️⃣ Validation → W3C Validator = clean code 4️⃣ SEO → Headings, alt text, meta tags 👉 Master these = Pro-level HTML + More gigs 🚀 #HTML #WebDev #Fiverr

0 0 0 27 0

Samreen | Frontend Dev @dev_samreen

2 weeks ago

Favicon & External Resources 🌐 🔹 Add favicon: <link rel="icon" href="favicon.png"> 🔹 Google Fonts: <link href="fonts.googleapis.com/css2?family=Ro…" rel="stylesheet"> 🔹 External CSS/JS (e.g., Bootstrap, jQuery) via CDN 👉 Branding + Better UI 🚀 #HTML #CSS #WebDev

0 0 0 47 0

Samreen | Frontend Dev @dev_samreen

2 weeks ago

Linking CSS & JS in HTML 🔗 ✨ CSS <link rel="stylesheet" href="style.css"> (best) <style>...</style> (internal) style="" (inline – avoid) ✨ JS <script src="app.js"></script> Place before </body> for faster load ⚡ #HTML #CSS #JavaScript #WebDev

0 0 1 16 1

Samreen | Frontend Dev @dev_samreen

2 weeks ago

HTML Best Practices ✅ Write clean, semantic code Use proper indentation & comments Avoid old tags like <font>, <center> 👉 Clean code = better SEO + accessibility + future-proof sites 🚀 #HTML #WebDev #Coding

0 0 0 24 0

Samreen | Frontend Dev @dev_samreen

2 weeks ago

Accessibility (A11Y) Basics ♿ alt → describe images <label for=""> → link inputs & labels Keyboard friendly → Tab / Enter / Space navigation 👉 Make the web inclusive for everyone 🌍 #HTML #WebDev #A11Y

0 0 0 21 0

Samreen | Frontend Dev @dev_samreen

2 weeks ago

Responsive Design 📱 <meta name="viewport"> → mobile-friendly CSS @Media → adapt to screen sizes 👉 Make your site look great on any device! #HTML #CSS #WebDev

0 0 0 22 0

Samreen | Frontend Dev @dev_samreen

2 weeks ago

HTML Input Attributes & Form Controls 📝 ✨ Attributes: placeholder, value, readonly, disabled, checked, multiple ✨ New HTML5 Types: date, range, color, number 👉 Make forms more powerful & user-friendly! #HTML #WebDev #Coding

0 0 0 11 0

Samreen | Frontend Dev @dev_samreen

2 weeks ago

🚀 Excited to share my HTML Documentation repo! 📖 From basic tags to advanced concepts 📥 Download notes as a ZIP file 🔗 [github.com/samreen-fronte…] #HTML #WebDev #Frontend #OpenSource