In week 4 we had a basic recap of HTML and CSS, looking at things such as structuring type with tags, creating lists and links, inserting images and tables and using colour. We also looked at how to simply make your website responsive. It is key to remember that even if we use webflow or other no code tools to create our site that this information is valuable to us.
When considering making a website responsive it is good to look at Ethan Marcotte as he said “Rather than tailoring disconnected designs to each of an ever increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.” When creating responsive websites we need to have consideration for controlling the viewport, creating flexible grids such as CSS Grid and Flexbox, making the media responsive and creating break points such as media queries.
We briefly looked at tags, how the main information for the side is kept inside <main> and this should not contain a header or a footer, it is also key that there is only one of them within a html document. Things within a tag can be styled using CSS differently and also this can be done in classes. Classes start with a full stop e.g. .main{} whether tags are surrounded by arrows e.g. <main>.
We overviewed how to style within CSS such as using colour and typefaces etc and then looked at how to add images in HTML and add internal and external links.
Finally we looked at headers and footers and what they should include. things that can go inside headers includes the heading element, introduction, a profile picture/logo, navigation, your/the authors name, meta data and social media links. Nothing else should really go in headers, anything else can go within the main body of the website. The footer has the option to contain things such as copyright info, legalities, footnotes, site navigation, date, meta data and social media links. Again, any other information should be held within the main body of the website.