Responsive Website
I have completed my second week @AustinCodingAcademy and feel a lot of things feel into place for me this week. I realize I made several web projects, using the brute force method. I really did not understand some of the HTML or CSS code, but was able to change a few things and get it to work.
This week we worked on Responsive Websites and understanding how to use selectors properly became very important. Learning how to reference elements by selectors and why you’d use different selectors is very important when you might display your web page many different ways, based on screen size. A good understanding of classes and ids is key to having flexibility in your code.
Media queries and grid-template-areas are also very important for a responsive website. In the code below I am using two different layouts, based on a media query for the type of displaying being used.
Responsive websites allow content to be seen on many types of displays. You can also use it for screen position. This is very important since over 50% of web browsing occurs on both mobile devices. It is often easier to use a mobile-first strategy and layout your content for a mobile device first. Since the viewing area is more limited, you will determine the most important content and make sure it fits the smaller screen. Then you can expand your content in a responsive manner to have it show up the way you want on a traditional computer screen.
I am seeing HTML and CSS coding as an endless set of possibilities to display content the way I want a website to appear. It is important to learning the different elements, selectors, attributes, etc… that are available to make your code efficient and user friendly.
Within a year I see myself developing web pages and mobile apps to advance learning in the electrical industry. I see many avenues to develop interactive web pages to better qualify electrical workers. The information is available to all today, but I see me developing a structure learning platform to step workers through learning.
