Skip to content

Instantly share code, notes, and snippets.

@alwell-kevin
Created October 23, 2023 15:38
Show Gist options
  • Save alwell-kevin/7e27db0a72031f4f5f587d136e8d609e to your computer and use it in GitHub Desktop.
Save alwell-kevin/7e27db0a72031f4f5f587d136e8d609e to your computer and use it in GitHub Desktop.
CSS exercises for NYIT

Beginner CSS Exercises:

  1. Change the text color of a paragraph.
  2. Center align a div element.
  3. Create an ordered (numbered) list and style the list items.
  4. Change the font size of a heading.
  5. Set the background color of a button.
  6. Add a border to an image.
  7. Create a simple navigation menu with horizontal links.
  8. Style a hyperlink to change color on hover.
  9. Apply margins to a div to control spacing.
  10. Create a basic form with text inputs and a submit button.
  11. Make an image round with a circular border.
  12. Change the font family of a paragraph.
  13. Create a responsive layout for mobile devices.
  14. Add padding to a div element.
  15. Create a footer at the bottom of a webpage.

15 intermediate CSS exercises:

  1. Implement a sticky navigation bar that stays at the top when scrolling.
  2. Create a dropdown menu in the navigation bar.
  3. Design a card component with a shadow effect.
  4. Build a responsive image gallery that displays images in a grid.
  5. Create a CSS grid layout for a webpage.
  6. Apply animations to elements (e.g., fade-in on page load).
  7. Design a responsive navigation menu that turns into a hamburger menu on small screens.
  8. Create a multi-level CSS accordion menu.
  9. Implement a CSS-only slider/carousel for featured content.
  10. Style a table with alternating row colors.
  11. Design a tooltip that appears when hovering over an element.
  12. Build a CSS loading spinner or animation.
  13. Create a sticky footer that stays at the bottom of the viewport.
  14. Apply responsive typography that adjusts font size based on screen size.
  15. Customize form elements (e.g., checkboxes, radio buttons, and input fields).

10 interview questions a junior designer might be asked during an interview:

Junior Designer Interview Questions:

  1. Can you explain the importance of responsive web design, and how do you approach it in your work?
  2. What tools and software do you use for web design and why?
  3. How do you stay updated with current design trends and best practices?
  4. Can you describe your design process, from initial concept to final implementation?
  5. Share an example of a project where you had to solve a design problem. What was the problem, and how did you address it?
  6. How do you ensure that your designs are accessible to users with disabilities?
  7. What is the difference between UX (User Experience) and UI (User Interface) design?
  8. Have you worked with version control systems or collaborated with developers in your previous projects? If so, please explain your experience.
  9. What is the role of user feedback in your design process, and how do you gather and incorporate it into your work?
  10. Can you showcase a portfolio piece and walk us through your design decisions for that project?

These questions can help you prepare for interviews and demonstrate your knowledge and skills in the field of web design.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment