Web development: HTML, CSS, Bootstrap and Framer as Free Alternative

Apply now!

Web Development: Week 4-5

All you need to know about   Web development: HTML, CSS and Bootstrap

This course immerses us in the fundamental principles of web development, teaching us how basic syntax and code operate. Since I had already covered these disciplines (including JavaScript) while I was in Ukraine, I had the flexibility to choose alternative non-code software and tools for building this project.

What is HTML?

HTML, or Hypertext Markup Language, is the backbone of the modern web. It's the language that underpins every webpage you visit, enabling the structure and content of websites. At its essence, HTML provides a standardised way to format text, insert images, create links, and embed multimedia elements, allowing web developers to craft interactive and visually appealing online experiences. With the evolution of HTML over the years, from the early days of HTML4 to the current HTML5, the language has become more versatile and feature-rich, accommodating the diverse demands of today's internet.

Whether you're a novice looking to build your first webpage or a seasoned web developer pushing the boundaries of web design, a deep understanding of HTML remains essential. In this article, we'll explore the fundamental concepts of HTML, its key elements, and how it fits into the broader landscape of web development, shedding light on the code that powers the digital world as we know it.

Some words about CSS

CSS, or Cascading Style Sheets, is the artistic brush that paints the web's visual landscape. While HTML structures the content of web pages, CSS breathes life into them by controlling how they look and feel. It's the magic that transforms plain text and elements into beautifully designed, responsive, and aesthetically pleasing websites. With CSS, designers have the power to dictate the colours, fonts, spacing, layout, and interactive behaviours of web elements, creating visually stunning and user-friendly digital experiences.

Whether you're aiming for a sleek, minimalist design or a vibrant, dynamic interface, CSS is the versatile tool that enables you to customise and style web content to match your creative vision. In this article, we'll delve into the world of CSS, exploring its core principles, selectors, properties, and responsive design techniques, and showcasing its role in shaping the captivating visual identity of the modern web.

photo by Michael Dziedzic

What is a Bootstrap?

Bootstrap, often hailed as a web developer's best friend, is a powerful front-end framework that has revolutionised the way we build websites and web applications. Developed by Twitter and released as an open-source project, Bootstrap offers a comprehensive collection of pre-designed HTML, CSS, and JavaScript components that streamline the process of creating responsive, mobile-first, and visually appealing user interfaces. With Bootstrap, you can rapidly prototype, design, and develop web projects, saving valuable time and effort.

Whether you're a seasoned developer seeking to expedite your workflow or a newcomer looking to create professional-looking websites with ease, Bootstrap provides a robust foundation, responsive grid system, and a plethora of customisable design elements to suit your needs. In this article, we will take a deep dive into Bootstrap's features, its flexible grid system, extensive component library, and the advantages it brings to both developers and designers, making it an indispensable tool in the modern web development toolkit.

Team-working Task

Our first task was to create a website sketch-concept for a coffee shop owned by lovely Phoebe (a fictional character). In the given scenario, it was the grand opening day of her coffee shop, and our objective was to brainstorm ideas for the website. This included promotional advertisements, features, and a business strategy designed to set Phoebe apart from the competition. The learning class was divided into several groups. Below, you can view my sketch, along with ideas and concepts from my team.

Bootstrap: The most popular HTML, CSS, and JS library in the world

Framer as Free Alternative Non-code Software for Building Websites

Framer is a dynamic and innovative design and prototyping tool that has become a game-changer in the world of UI/UX design. With Framer, designers can bring their creative visions to life by seamlessly combining design and code, enabling the development of interactive and high-fidelity prototypes.

I believe this would fit nicely into your 'cat'alogue of cat coding memes :)

Recommended materials

Here’s a bunch of articles for those who would like to continue the topic exploration:

SheCodes Athena – AI Coding Assistant

Build fast, Responsive Sites with Bootstrap

W3 Schools – Learn to Code

Framer Bootcamp & Tutorial for Beginners

I believe this would fit nicely into your 'cat'alogue of cat coding memes :)

About

Programme

Apply now!