In this week’s lecture we went over the elements of web building in HTML and CSS. Understanding how to build in these languages can act as a guide when using webflow, which I intend on using.
We started off this week talking about Responsive Web Design. RWD is a web development approach that creates dynamic changes to the appearance of a website, meaning you can change the size of a web browser and the website content will adapt to this.
To make the content of a website responsive you can use these elements;
- controlling the view point- in html this would look like ‘<meta name= “viewpoint” content =”width=device – width”>
- Using flexible grids/ CSS grids
- Making media responsive
- Creating breakpoints – change elements for different viewpoints eg. phone, tablet, web browser
To make media responsive we looked at how images affect the websites responsiveness. Jpeg images are great for photographs, its advised to make Jpegs in the dimensions you need them for the website otherwise it could make the websites loading time too long.
PNGs are great for photographs and icons and is the image file I use most frequently. I learned that SVG images are the best and should be used when possible, they are completely scalable without pixelation as they are vector based.
We were given a recap of HTML, most of which I had known before but there was some definitions I wasn’t completely sure of before. These were:
- <aside> identifies the content that is related to the primary content of the web page but does not include the main purpose of the primary page.
- <article> is a container that stores self-contained content
- <section> defines different types of content on the web page
Other information I didn’t know completely before was what content should be put in headers and footers on a webpage.
Headers
- Heading tags <h1- h6>
- Introduction paragraph
- Logo/ photograph
- Navigation
- Social Media Links
Footers
- Copyright
- Legalities
- Low priority navigation
- Meta data
- Social media links
- Footnotes
At the end of the lecture, it was explained to us that we would have a group critique coming up. We were told we should prepare for next week by signing up to webflow to understand it before starting to build our site.
Portfolio Site update
I signed up to Webflow this week and watched a couple of tutorials. It was easy enough to understand and I found starting to build my website quite fun.
This is what my website looks like so far.
I’ve just started building my homepage to get a feel for how webflow works. The first problem I ran into however was that the font I had chosen wasn’t available on webflow. Which lead me to tutorials on how to change this.
From the tutorial I learned that to change my website font I had to go to ‘Project Settings’ then the ‘Fonts’ tab. In the fonts tab webflow allows you to choose as many fonts you wish from a google fonts picker.
The font I wanted was ‘poppins’
From there you can pick exactly which font weights you need for your project, I chose all just to be safe.
After inserting the font I needed, my home page looks like this….
The next problem I ran into is that the navbar went the entire width of the page but I would rather have the navbar a lot shorter and maybe only take up half the space like on my mock-ups.
After messing around with the sizing of the container I had the navigation bar in, I changed it’s max width to the width of my tex containers.
I tried making the navigation bar shorter like in the mock-ups but when it came to responsiveness between laptop to mobile the navbar this length worked the best. Also having the shorter bar let me increase the size and height of the vertical ‘portfolio’ text to make it more faithful to my mock-ups.
Overall thoughts
I think working with webflow has been very manageable so far, there’s still a lot of content to go but I will be able to use tutorials or ask for help if I really start to struggle. At this point I am having a lot of fun seeing my visions come to life and am excited to keep going.