Once you have your wireframes and HTML you should write CSS to implement your base layout. For the final you will need to write you base layout using CSS Grid and use Media Queries to allow the layout to change for small, medium and large screens.
My recommendation is to add this to your layout.css mentioned in the File Structure discussion.
Base CSS for Responsive Sites
Before you add your layout CSS you should start with the CSS in this Gist. It has CSS that:
- Tells the browser to use border-box model for box sizing. This can be helpful. Learn more here if interested.
- Makes images responsive so they resize with their container.
- CSS you can use to make your videos responsive. (more below in Responsive media)
Use CSS Grid and Media Queries to Create Layouts to Match your Wireframes
This part is up to you and depends on the design you want to implement. Here are some resources on CSS grid and Media Queries:
