1. Engineering
  2. Computer Science
  3. using visual studio code html build a responsive website using...

Question: using visual studio code html build a responsive website using...

Question details

using visual studio code html build a responsive website using @media(min-width {}).


Introduction This week you took a look at using fonts, font-icons and svgs. In addition to this we took our first look at media queries by creating a simple mobile menu layout for small and large viewports. In this weeks lab you are going to practice what you have learnt by creating a lab similar to lab one. First pick a site from themeforest a site you like on the web or you can create your own if you are so inclined. (strongly recommended) Again the end goal is not a pixel perfect duplication your aim is to practice the skills you have learnt this week and last. Only the navbar from this new site needs to be responsive that is small icon view and the large list view. The header is up to you but you have to show that you can construct a site that utilizes svg and or font icons, has a responsive menu and utilizes background images either bitmap or vector You have been shown in class how to procure vector content using illustrator from an image, you have SVG resources online at Free Icons and other sites, you can use content from the browser via the dev tools network media panel. So sourcing content should not be an issue. Use your knowledge of CSS flexbox layout, background images techniques, typography and style to make a simple site that you can be proud of.

Task 1: Site Navbar Minimum Requirements Attention to detail, complexity and and adherence to best practices Small Viewport. two icons either svg or icon fonts site branding image or text or icon Large Viewport Minimum of seven items in the nav bar at large viewport size Five items have to be text links styled with hover effect anchor <a> elements.. Remaining two items are of your choosing Functionality Create a single media query using @media(min-width () to show and hide the appropriate element.

Task 2: Site Header** Minimum Requirements Attention to detail, complexity and and adherence to best practices. Large Viewport Only Background image you can use either bitmap or SVG and you can use single or multiple back gradients and colors A single heading (site title) tag line usually a paragraph element. Two call to action buttons created from anchor elements. One additional icon in the header svg image or font icon. grounds Challenge * challenge try to create a two column layout inside the header content on one side and an bitmap or icon/ other try to balance the two columns visually. U percentage based units. svg in the se flexbox and create two containers along with either fixed width or challenge try to to make the header responsive not only in terms of layout but the display font sizes

Solution by an expert tutor
Blurred Solution
This question has been solved
Subscribe to see this solution