This was a very refreshful class by Kyle about all the basics of HTML & CSS. Everything from tags, headings, links, parameters, etc was covered in today’s class. More importantly, we went over responsive web design which is one thing I am worried about as my previous website failed to consist of these principles. As I know most of the basics of HTML & CSS I will only talk about the things I struggle with.
Although, the foundation of HTML & CSS is slowly being outed and replaced by less time-consuming methods such as custom website builders it is still helpful to acknowledge the subject matter as it can become relevant with future employers with the additional benefit of knowing what things mean whenever it does come up.
A quick refresh
Text
Headings (H1, H2, H3), paragraphs, text, – Are used to create a common hierarchy of text.
EM, B, I – are all used to create emphasis on text, e.g. <I> Hello</I> will make the selected word italic.
Margins & Padding – Margins are the outside of the element and paddings are the inside of the element.
Divs are used to define a sector of an element.
Classes are used to create a unique tag that can make it identifiable from others and form a common group.
Responsive Web design
First of all, what is responsive web design?
Responsive web design is the principle that suggests design should be proportionate and reactive to their user’s behavior and viewing platform based on things such as screen size, orientation and interactivity. This involves and being aware of flexible grids and layouts, media and the use of using CSS media queries (breakpoints).
How will I implement responsive web design onto my website?
Firstly, I need to acknowledge the structure of my website. I want to have a two-column structure so that if viewed on smaller devices such as mobiles, the two-column structure can collapse and turn into a one-column structure in an organized and orderly manner.
Secondly, I need to adjust images/media to each viewing device such as setting the max/min dimensions thus ultimately avoiding distorted or asymmetrical images.
Lastly, I need to add custom breakpoints to each resolution that condense with the viewing screen. The main problems will occur when viewing on a tablet/mobile and to make things slightly harder I am designing on a 27-inch monitor (2560 x 1440). To tackle this problem I have to constantly view and update my website on other devices such as my mobile and laptop which can be time-consuming and a hassle.
Building the Website – Webflow
Why choose Webflow?
Kyle recommended using a website builder named “Webflow” which instantly caught my attention. I decided to sign up and get the package. Straight away I was amazed at the opportunities Webflow prescribes. I noticed instantly I was learning far quicker and far more than actually ‘coding’ with HTML/CSS on Atom. One of the best features of this website is the instant live process in which saves a lot more energy when you have to manually refresh the browser to check for your changes.
The opportunities and selection are endless, it allows for full creative control over your website. With many built-in features such as looking at custom breakpoints. This is vital for me as I don’t have access to tablets or certain mobile phones to see what it would look like.
I decided to get straight to work building my website with ease. First I created my navbar and additionally put an animated monogram of my gif in.
As I wanted to get the harder parts out of the way, I decided to work on the project showcase section of my website. It looked really nice on my screen but after viewing it on other breakpoints/devices it was totally distorted (margins, paddings, spacing, etc all off). I decided to start from scratch again and watch a youtube video (https://www.youtube.com/watch?v=6Yh8y0pVfQc&ab_channel=Flux) which gave me a better idea and understanding of the structure of the website building.
It was a pretty simple formula, section > container > grid > content – this is what I used for my website.
This is the furthest I’ve come so far. I am pretty happy with the result, although, I do need to adjust the sizing of the text and padding along with some other things. I think this is a good start.
What have I learned?
Today’s class was a great refreshment on what we had done last year, with the addition of learning a few more skills and getting a clearer understanding of responsive web design and its structure. I am looking forward to completing the rest of my site and figuring a similar formula for my case study pages.
What is next?
I will continue to work on my site such as the three case studies, about page and content page. Additionally, at the same time, I want to ensure that the site is responsive and reactive to all platforms.