Extended Web Dev Interview Q&A – Mohammed
🟢 Beginner-Level Questions
1. What is the difference between inline, block, and inline-block elements in HTML?
Inline elements don't start on a new line and only take as much width as needed (e.g.,
<span>). Block elements take full width and start on a new line (e.g., <div>, <p>). Inline-
block behaves like inline but allows setting width/height.
2. How do you link a CSS file to an HTML page?
By using the <link> tag in the <head> section:
<link rel="stylesheet" href="styles.css">
3. What does 'box-sizing: border-box;' do in CSS?
It includes padding and border in the total width and height of an element. This makes
layouts more predictable.
4. How do you make a form field required in HTML?
Add the 'required' attribute to an input field: <input type="text" required>
5. What are the different input types supported in HTML5?
Some common types include: text, email, number, range, date, color, checkbox, radio, file,
and submit.
🟡 Intermediate-Level Questions
6. How did you style and structure your form in the document generator project?
I used a combination of Flexbox and CSS grid for layout. Each field had a label and I used
spacing and colors for clarity. I also used 'required' attributes and simple JavaScript
validation.
7. How does JavaScript handle asynchronous code? What are callbacks/promises?
JavaScript uses the event loop for async tasks. Callbacks are functions passed into other
functions. Promises are objects representing the future result of an operation. You can also
use async/await for cleaner code.
8. What are the differences between '==' and '===' in JavaScript?
'==' checks for value equality with type conversion, while '===' checks for both value and
type (strict equality).
9. What is DOM manipulation and how did you use it in your landing page?
DOM manipulation is changing HTML or CSS using JavaScript. I used
'document.getElementById' and 'addEventListener' to change styles or show/hide sections.
10. How do you validate user input in JavaScript before sending it to Python/Flask backend?
I check if fields are not empty, use regex for emails or numbers, and show alerts or error
messages if something is wrong. This prevents invalid data from reaching the backend.
11. What are template engines in Flask, and which one did you use?
Template engines let you embed Python logic into HTML. Flask uses Jinja2 by default. I used
it to insert user input into the output page dynamically.
🔴 Advanced-Level Questions
12. How would you secure user input in your Flask application to prevent injection attacks?
Use Flask’s built-in request sanitization, validate input server-side, use parameterized
queries if using databases, and escape output in templates.
13. Can you explain CORS and how you would handle cross-origin requests in your project?
CORS (Cross-Origin Resource Sharing) controls access between different domains. I would
use the Flask-CORS extension to allow specific origins.
14. How would you structure a Flask project for a larger application?
I’d separate code into folders: 'static/' for CSS/JS/images, 'templates/' for HTML, and create
separate Python files for routes, config, and models.
15. How would you make your document generator usable on mobile?
I’d use media queries in CSS for responsiveness and ensure form fields and buttons scale
well. I’d also test UI on mobile view in browser dev tools.
16. What are some Python libraries you would use for generating PDF or Word files from
input?
I would use libraries like 'pdfkit', 'xhtml2pdf', or 'reportlab' for PDF. For Word files, I would
use 'python-docx'.
17. If you had to deploy your web app online, what steps would you take?
I’d push code to GitHub, create a 'requirements.txt' file, and deploy using platforms like
Render or Heroku. For Flask, I’d also include a 'Procfile' for production configuration.
